Skip to main content
Get started with Base UI by building your first component. This guide walks you through installing the library and creating a styled button.
1

Install Base UI

Install the @base-ui/react package using your preferred package manager:
npm install @base-ui/react
Base UI requires React 17 or later. Make sure you have React and React DOM installed in your project.
2

Import and use a component

Import the Button component and use it in your app:
App.tsx
import { Button } from '@base-ui/react/button';

export default function App() {
  return (
    <Button
      onClick={() => alert('Hello!')}
      className="my-button"
    >
      Click me
    </Button>
  );
}
Base UI components are unstyled by default, giving you complete control over their appearance.
3

Add styles

Style your button using your preferred method. Here are three common approaches:
App.module.css
.button {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background-color: #0066ff;
  color: white;
  transition: all 0.2s;
}

.button:hover {
  background-color: #0052cc;
}

.button:active {
  transform: scale(0.98);
}

.button[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
App.tsx
import { Button } from '@base-ui/react/button';
import styles from './App.module.css';

export default function App() {
  return (
    <Button className={styles.button}>
      Click me
    </Button>
  );
}

​
State attributes

Base UI components expose data attributes for styling different states: 
<Button className="my-button">
  Submit
</Button>

/* Style the disabled state */
.my-button[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Style the focus-visible state */
.my-button[data-focus-visible] {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

​
Next steps

Browse Components

Explore all available components

Styling Guide

Learn different styling approaches

TypeScript

Use Base UI with TypeScript

Accessibility

Build accessible interfaces