Pure UI
DocsComponentsBlocksNEW
141

Docs

IntroductionGet Started
Installation
Theming

Components

AccordionAvatarBadgeButtonButton GroupCalendarCardCheckboxCollapsibleCombobox
Detached Triggers
DialogInputInput GroupInput OTPKbdLabelMenuNumber FieldPopoverRadio GroupNEWScroll AreaSelectSeparatorSheetSpinnerSwitchTabsNEWTextareaToastTooltip

Get Started

A quick guide to adding your first component.

This guide provides the essentials for adding Pure UI components to your React application.

Prerequisites

Pure UI components are built with Tailwind CSS v4. Before you begin, make sure you have a React project set up with Tailwind CSS.

Adding Components

You can add components automatically with the shadcn CLI or manually by copying the files.

Styling

Components are styled with the design token system, which is defined by CSS variables and implemented with Tailwind CSS.

The variables are the same as shadcn/ui, and are fully customizable. You can modify them in your global stylesheet (e.g., app/globals.css) to match your design system.

Migration from Radix UI

For developers migrating from Radix UI, many of our UI primitives include instructions and examples for translating equivalent Radix components to Base UI. This ensures a smooth transition while preserving accessibility, behaviors, and API patterns.