Quick start

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

yarn add @base-ui/react

pnpm add @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:

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.

Add styles

Style your button using your preferred method. Here are three common approaches:

CSS Modules
Tailwind CSS
Inline Styles

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>
  );
}

App.tsx

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>
  );
}

App.tsx

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

⌘I

Getting Started

Handbook

Inputs

Data Display

Navigation

Overlays

Forms

Layout

Utilities

State attributes

Next steps

Browse Components

Styling Guide

TypeScript

Accessibility

​State attributes

​Next steps

Browse Components

Styling Guide

TypeScript

Accessibility

State attributes

Next steps