Documentation Index
Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt
Use this file to discover all available pages before exploring further.
Get started with Base UI by building your first component. This guide walks you through installing the library and creating a styled button.
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.
Import and use a component
Import the Button component and use it in your app:import { Button } from '@base-ui/react/button';
export default function App() {
return (
<Button
onClick={() => alert('Hello!')}
className="my-button"
>
Click me
</Button>
);
}
Add styles
Style your button using your preferred method. Here are three common approaches: CSS Modules
Tailwind CSS
Inline Styles
.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;
}
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>
);
}
import { Button } from '@base-ui/react/button';
export default function App() {
return (
<Button
className="px-4 py-2 rounded-md bg-blue-600 text-white
hover:bg-blue-700 active:scale-98
data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
transition-all"
>
Click me
</Button>
);
}
import { Button } from '@base-ui/react/button';
export default function App() {
return (
<Button
style={{
padding: '8px 16px',
borderRadius: '6px',
border: 'none',
fontSize: '14px',
fontWeight: 500,
cursor: 'pointer',
backgroundColor: '#0066ff',
color: 'white',
}}
>
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