> ## 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.

# Quick start

> Get up and running with Base UI in minutes by creating your first component

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

<Steps>
  <Step title="Install Base UI">
    Install the `@base-ui/react` package using your preferred package manager:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @base-ui/react
      ```

      ```bash yarn theme={null}
      yarn add @base-ui/react
      ```

      ```bash pnpm theme={null}
      pnpm add @base-ui/react
      ```
    </CodeGroup>

    <Note>
      Base UI requires React 17 or later. Make sure you have React and React DOM installed in your project.
    </Note>
  </Step>

  <Step title="Import and use a component">
    Import the Button component and use it in your app:

    ```tsx title="App.tsx" theme={null}
    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.
  </Step>

  <Step title="Add styles">
    Style your button using your preferred method. Here are three common approaches:

    <Tabs>
      <Tab title="CSS Modules">
        ```css title="App.module.css" theme={null}
        .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;
        }
        ```

        ```tsx title="App.tsx" theme={null}
        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>
          );
        }
        ```
      </Tab>

      <Tab title="Tailwind CSS">
        ```tsx title="App.tsx" theme={null}
        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>
          );
        }
        ```
      </Tab>

      <Tab title="Inline Styles">
        ```tsx title="App.tsx" theme={null}
        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>
          );
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## State attributes

Base UI components expose data attributes for styling different states:

```tsx theme={null}
<Button className="my-button">
  Submit
</Button>
```

```css theme={null}
/* 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

<CardGroup cols={2}>
  <Card title="Browse Components" icon="grid" href="/components/button">
    Explore all available components
  </Card>

  <Card title="Styling Guide" icon="palette" href="/handbook/styling">
    Learn different styling approaches
  </Card>

  <Card title="TypeScript" icon="code" href="/handbook/typescript">
    Use Base UI with TypeScript
  </Card>

  <Card title="Accessibility" icon="universal-access" href="/handbook/accessibility">
    Build accessible interfaces
  </Card>
</CardGroup>