Styling

A guide to styling Base UI components with your preferred styling engine.

Base UI components are unstyled, don’t bundle CSS, and are compatible with Tailwind, CSS Modules, CSS-in-JS, or any other styling solution you prefer. You retain total control of your styling layer.

Style hooks

CSS classes

Every component accepts a className prop which you can use to pass CSS classes to its DOM element. The className prop, in addition to accepting a string, can be defined as a function that takes a component state as an argument:

switch.tsx

<Switch.Thumb className={(state) => (state.checked ? 'checked' : 'unchecked')} />

CSS variables

Some components expose CSS custom properties to aid with styling, such as --accordion-panel-height, --transform-origin, or --active-tab-width.

Data attributes

Base UI components provide data attributes designed for styling their states. For example, a Switch may be styled using its [data-checked] and [data-unchecked] attributes, among others.

Check out each component’s API reference for a complete list of available data attributes.

Tailwind

Apply Tailwind classes to each part via the className prop.

menu.tsx

import * as React from 'react';import { Menu } from '@base-ui-components/react/menu';
export default function ExampleMenu() {  return (    <Menu.Root>      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">        Song      </Menu.Trigger>      <Menu.Portal>        <Menu.Positioner className="outline-none" sideOffset={8}>          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">              Add to Library            </Menu.Item>            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900">              Add to Playlist            </Menu.Item>          </Menu.Popup>        </Menu.Positioner>      </Menu.Portal>    </Menu.Root>  );}

CSS Modules

Apply custom CSS classes to each part via the className prop. Then style those classes in a CSS Modules file.

menu.tsx

import * as React from 'react';import { Menu } from '@base-ui-components/react/menu';import styles from './index.module.css';
export default function ExampleMenu() {  return (    <Menu.Root>      <Menu.Trigger className={styles.Button}>Song</Menu.Trigger>      <Menu.Portal>        <Menu.Positioner className={styles.Positioner} sideOffset={8}>          <Menu.Popup className={styles.Popup}>            <Menu.Item className={styles.Item}>Add to Library</Menu.Item>            <Menu.Item className={styles.Item}>Add to Playlist</Menu.Item>          </Menu.Popup>        </Menu.Positioner>      </Menu.Portal>    </Menu.Root>  );}

CSS-in-JS

Wrap each component part and apply styles, then assemble your styled components.

index.tsx

import * as React from 'react';import { Menu } from '@base-ui-components/react/menu';import styled from '@emotion/styled';
const StyledMenuTrigger = styled(Menu.Trigger)`  // Button styles`;
const StyledMenuPositioner = styled(Menu.Positioner)`  // Positioner styles`;
const StyledMenuPopup = styled(Menu.Popup)`  // Popup styles`;
const StyledMenuItem = styled(Menu.Item)`  // Menu item styles`;
const MenuExample = () => (  <Menu.Root>    <StyledMenuTrigger>Song</StyledMenuTrigger>    <Menu.Portal>      <StyledMenuPositioner>        <StyledMenuPopup>          <StyledMenuItem>Add to Library</StyledMenuItem>          <StyledMenuItem>Add to Playlist</StyledMenuItem>        </Menu.Portal>      </StyledMenuPositioner>    </StyledMenuPopup>  </Menu.Root>);
export default MenuExample;