Quick start

Install the library

Install Base UI using a package manager.

pnpm add base-ui-solid solid-js@2.0.0-rc.13 @solidjs/web@2.0.0-rc.13

Base UI Solid requires Solid 2.0, with the compiler configured for jsxImportSource: "@solidjs/web". Solid 1.x is not supported.

All components are included in a single package. Base UI is tree-shakable, so your app bundle will contain only the components that you actually use.

Set up

Portals

Base UI uses portals for components that render popups, such as Dialog and Popover. To make portaled components always appear on top of the entire page, add the following style to your application layout root:

<body>
  <div class="root">
    {/* prettier-ignore */}
    {children}
  </div>
</body>

.root {
  isolation: isolate;
}

This style creates a separate stacking context for your application’s .root element. This way, popups always appear above the page contents, and any z-index property in your styles won’t interfere with them.

iOS 26+ Safari

Starting with iOS 26, Safari allows content beneath the UI chrome to be visible. Backdrops such as those used by dialogs must use position: absolute instead of position: fixed to cover the entire visual viewport. For this to work after the page is scrolled, the following style must be added to your global styles:

body {
  position: relative;
}

Assemble a component

This demo shows you how to import a Popover component, assemble its parts, and apply styles. There are examples for both Tailwind and CSS Modules below, but since Base UI is unstyled, you can use CSS-in-JS, plain CSS, or any other styling solution you prefer.

import { Popover } from 'base-ui-solid/popover';
import styles from './index.module.css';

export default function ExamplePopover() {
  return (
    <Popover.Root>
      <Popover.Trigger class={styles.Button}>Notifications</Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={8}>
          <Popover.Popup class={styles.Popup}>
            <Popover.Arrow class={styles.Arrow} />
            <Popover.Title class={styles.Title}>Notifications</Popover.Title>
            <Popover.Description class={styles.Description}>
              You are all caught up. Good job!
            </Popover.Description>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

Working with LLMs

For those of you working with LLMs, each docs page has a “View as Markdown” link at the top, which can be shared with AI chat assistants to help them understand Base UI concepts and component APIs.

Additionally, there is an “llms.txt” link in the “Handbook” section of the navigation sidebar, which you can feed to AI chat assistants to help them navigate the docs.

Next steps

This walkthrough outlines the basics of putting together a Base UI component. Continue to the Handbook section for broader guidance on topics like styling, animation, and composition, or explore the components.