# Pimolu UI

> One system. Your identity. A React design system with shared CSS and design tokens.

## Current distribution

The five library packages are published on npm at 0.1.0-beta.1; latest and beta dist-tags point to it. Install with pnpm add @pimolu/react@beta @pimolu/web-styles@beta. A component-copy CLI is not available. React and Next.js are implemented. Native, Angular, CDN and a Pimolu MCP server are future directions.

## Guides
- [Introduction](https://pimolu.com/docs): One visual language. A foundation you can make your own.
- [Quick start](https://pimolu.com/docs/quick-start): From npm installation to your first Pimolu screen.
- [Design principles](https://pimolu.com/docs/design-principles): Precise defaults. Room for your identity.
- [Frameworks](https://pimolu.com/docs/frameworks): A clear map of supported integrations and future adapters.
- [Next.js](https://pimolu.com/docs/nextjs): Keep the App Router boundary clear and load the shared styles once.
- [Colors](https://pimolu.com/docs/colors): Explore the real light and dark palettes, then use their semantic roles.
- [Themes and presets](https://pimolu.com/docs/theming): Separate color mode, visual character and the identity of your product.
- [Dark mode](https://pimolu.com/docs/dark-mode): Light, dark and system are independent from your visual preset.
- [Customization](https://pimolu.com/docs/customization): Use the system's controls first, then scope your own refinements.
- [Styling](https://pimolu.com/docs/styling): Shared component CSS, application layout and scoped overrides.
- [Animation](https://pimolu.com/docs/animation): Motion should explain a change and respect the person using it.
- [Composition](https://pimolu.com/docs/composition): Build interfaces from small, readable parts with clear ownership.
- [Accessibility](https://pimolu.com/docs/accessibility): Make the behavior of the components work for the whole interface.
- [AI and developer tooling](https://pimolu.com/docs/agents): Give assistants verified context instead of guessed APIs.
- [Contribution](https://pimolu.com/docs/contributing): Set up the repository, develop a change and verify your contribution.

## Components
- [ThemeBuilder](https://pimolu.com/components/theme-builder): An appearance panel whose selection belongs to the application.
- [Button](https://pimolu.com/components/button): Actions with consistent tone, appearance and interaction states.
- [ButtonGroup](https://pimolu.com/components/button-group): Related formatting actions in a compact editor toolbar.
- [SplitButton](https://pimolu.com/components/split-button): Publish now or choose an alternative deployment action.
- [Toggle](https://pimolu.com/components/toggle): A formatting option with an observable pressed state.
- [ToggleGroup](https://pimolu.com/components/toggle-group): Choose several formatting options in one group.
- [Toolbar](https://pimolu.com/components/toolbar): An editor toolbar with formatting and alignment commands.
- [Popconfirm](https://pimolu.com/components/popconfirm): Confirm a destructive action beside its trigger.
- [Tabs](https://pimolu.com/components/tabs): Related views with matching triggers and panels.
- [SegmentedControl](https://pimolu.com/components/segmented-control): Switch between a few mutually exclusive views.
- [Link](https://pimolu.com/components/link): Navigation links with consistent tone and emphasis.
- [Accordion](https://pimolu.com/components/accordion): Application-controlled disclosure of related content.
- [Breadcrumbs](https://pimolu.com/components/breadcrumbs): A path through nested application information.
- [Pagination](https://pimolu.com/components/pagination): Move through pages while the application owns the data.
- [Stepper](https://pimolu.com/components/stepper): A controlled onboarding sequence with back and next actions.
- [NavigationMenu](https://pimolu.com/components/navigation-menu): Grouped destinations for a product navigation bar.
- [Menubar](https://pimolu.com/components/menubar): Desktop-style application commands with local feedback.
- [TableOfContents](https://pimolu.com/components/table-of-contents): A controlled outline of a long document.
- [Checkbox](https://pimolu.com/components/checkbox): Select individual records or the whole set.
- [Combobox](https://pimolu.com/components/combobox): Search and choose an assignee from named options.
- [FormField](https://pimolu.com/components/form-field): Label and feedback compositions for profile fields.
- [Input](https://pimolu.com/components/input): A native input with labels, feedback, clear actions and visual variants.
- [Label](https://pimolu.com/components/label): Visible field labels in a sign-in composition.
- [MultiSelect](https://pimolu.com/components/multi-select): Choose a technology stack with an application-owned limit.
- [Radio](https://pimolu.com/components/radio): Choose one framework in a named radio group.
- [RangeSlider](https://pimolu.com/components/range-slider): Set a lower and upper price boundary.
- [Select](https://pimolu.com/components/select): Single selection with a styled listbox or an explicit native option.
- [Slider](https://pimolu.com/components/slider): Adjust a price filter with visible numeric feedback.
- [Switch](https://pimolu.com/components/switch): Controlled appearance preferences with supporting descriptions.
- [Textarea](https://pimolu.com/components/textarea): Write a comment with application-owned text.
- [NumberInput](https://pimolu.com/components/number-input): Choose a number of seats and see the resulting quantity.
- [PinInput](https://pimolu.com/components/pin-input): A one-time verification code split into coordinated cells.
- [TagsInput](https://pimolu.com/components/tags-input): Create and remove tags for an article.
- [TimePicker](https://pimolu.com/components/time-picker): Choose a booking time with visible selection feedback.
- [Calendar](https://pimolu.com/components/calendar): Select dates for a booking in a standalone calendar.
- [DatePicker](https://pimolu.com/components/date-picker): Single-day selection with a calendar, locale and form integration.
- [DateRangePicker](https://pimolu.com/components/date-range-picker): Pick arrival and departure dates for a reservation.
- [FileUpload](https://pimolu.com/components/file-upload): Attach supporting documents to a request.
- [Dropzone](https://pimolu.com/components/dropzone): Upload and review a collection of brand assets.
- [ColorPicker](https://pimolu.com/components/color-picker): Edit two brand colors with a live visual preview.
- [SearchInput](https://pimolu.com/components/search-input): Filter a documentation list with controlled search text.
- [PasswordInput](https://pimolu.com/components/password-input): A password field in an application-owned sign-in form.
- [InputGroup](https://pimolu.com/components/input-group): Invite a teammate using a composed field and adjacent action.
- [TreeSelect](https://pimolu.com/components/tree-select): Route a ticket through a hierarchical selection.
- [Signature](https://pimolu.com/components/signature): Capture a signature for a contract workflow.
- [Form](https://pimolu.com/components/form): Typed values, validation and submit state with useForm.
- [MaskedInput](https://pimolu.com/components/masked-input): Guide entry of formatted delivery information.
- [CurrencyInput](https://pimolu.com/components/currency-input): Enter a budget with locale-aware currency formatting.
- [PhoneInput](https://pimolu.com/components/phone-input): Choose a calling code and enter a contact number.
- [Mentions](https://pimolu.com/components/mentions): Mention teammates while writing a project update.
- [Cascader](https://pimolu.com/components/cascader): Choose a shipping destination through nested levels.
- [Transfer](https://pimolu.com/components/transfer): Assign a subset of available permissions.
- [Avatar](https://pimolu.com/components/avatar): People and teams with image and fallback identities.
- [Badge](https://pimolu.com/components/badge): A compact label for status, classification or a small count.
- [Card](https://pimolu.com/components/card): A composable surface for related content and actions.
- [List](https://pimolu.com/components/list): Select entries in an application-owned list.
- [DescriptionList](https://pimolu.com/components/description-list): Workspace metadata expressed as terms and descriptions.
- [Table](https://pimolu.com/components/table): Semantic table primitives when your application owns the data behavior.
- [DataTable](https://pimolu.com/components/data-table): Filtering, sorting, selection and pagination for straightforward datasets.
- [DataGrid](https://pimolu.com/components/data-grid): A richer data surface with ownership modes, grouping and configurable columns.
- [TreeTable](https://pimolu.com/components/tree-table): A folder hierarchy with columns and controlled selection.
- [Charts](https://pimolu.com/components/chart): SVG charts with legends and accessible data alternatives.
- [ApiTable](https://pimolu.com/components/api-table): A compact reference of property contracts.
- [Stat](https://pimolu.com/components/stat): A billing snapshot with values, trends and context.
- [Timeline](https://pimolu.com/components/timeline): A sequence of security-review events.
- [Rating](https://pimolu.com/components/rating): An editable product rating with local feedback.
- [Image](https://pimolu.com/components/image): A product image inside a composed product card.
- [Carousel](https://pimolu.com/components/carousel): A browsable product gallery with image descriptions.
- [VirtualList](https://pimolu.com/components/virtual-list): Search a large directory without mounting every visible record at once.
- [TreeView](https://pimolu.com/components/tree-view): Browse an application-controlled file hierarchy.
- [Kanban](https://pimolu.com/components/kanban): Move work through a sprint board with local state.
- [Scheduler](https://pimolu.com/components/scheduler): Review and create events in a weekly schedule.
- [Gantt](https://pimolu.com/components/gantt): A project roadmap across a time axis.
- [Chat](https://pimolu.com/components/chat): Send messages in a local team conversation.
- [FileManager](https://pimolu.com/components/file-manager): Browse and manage a project's assets.
- [VideoPlayer](https://pimolu.com/components/video-player): Play the bundled Pimolu tour with captions.
- [AudioPlayer](https://pimolu.com/components/audio-player): Browse and play locally bundled design-note episodes.
- [PDFViewer](https://pimolu.com/components/pdf-viewer): Read the bundled brand-guidelines document.
- [Lightbox](https://pimolu.com/components/lightbox): Open a gallery at its selected image.
- [ImageCropper](https://pimolu.com/components/image-cropper): Crop a profile image and inspect the exported result.
- [QRCode](https://pimolu.com/components/qr-code): Create a QR code from an editable value.
- [Typography](https://pimolu.com/components/typography): Readable article text with a deliberate hierarchy.
- [Prose](https://pimolu.com/components/prose): Long-form editorial content with shared typography.
- [Anchor](https://pimolu.com/components/anchor): Permalinks associated with article headings.
- [CodeBlock](https://pimolu.com/components/code-block): A release note with a copyable code sample.
- [Code & Kbd](https://pimolu.com/components/code): Inline technical values and shortcut notation.
- [Navbar](https://pimolu.com/components/navbar): Brand, navigation and actions with a real responsive toggle.
- [Sidebar](https://pimolu.com/components/sidebar): Grouped navigation that can collapse without losing its controls.
- [DashboardLayout](https://pimolu.com/components/dashboard-layout): A composed workspace with sidebar, navbar, content and an optional right rail.
- [AppShell](https://pimolu.com/components/app-shell): Application regions with a header, rails and footer.
- [PageHeader](https://pimolu.com/components/page-header): A page introduction with context and actions.
- [Hero](https://pimolu.com/components/hero): A composed product introduction with calls to action.
- [Footer](https://pimolu.com/components/footer): Grouped product links and legal information.
- [DocsLayout](https://pimolu.com/components/docs-layout): A documentation shell with navigation and article content.
- [Watermark](https://pimolu.com/components/watermark): A repeated visual mark on document content.
- [Box](https://pimolu.com/components/box): A plan summary built from a token-aware surface primitive.
- [Stack](https://pimolu.com/components/stack): A notification composition with consistent spacing.
- [Flex](https://pimolu.com/components/flex): A flexible toolbar that adapts to available space.
- [Grid](https://pimolu.com/components/grid): A responsive collection arranged in a grid.
- [Container](https://pimolu.com/components/container): Constrain a composition's reading width.
- [Center](https://pimolu.com/components/center): An empty-state composition centered within a surface.
- [Spacer](https://pimolu.com/components/spacer): Separate groups of actions in a responsive app bar.
- [AspectRatio](https://pimolu.com/components/aspect-ratio): Keep product media in a predictable frame.
- [VisuallyHidden](https://pimolu.com/components/visually-hidden): Visible controls with additional screen-reader context.
- [FocusScope](https://pimolu.com/components/focus-scope): An inline confirmation with deliberate focus handling.
- [Resizable](https://pimolu.com/components/resizable): A workspace inspector with resizable panels.
- [ScrollArea](https://pimolu.com/components/scroll-area): A bounded, scrollable activity list.
- [Separator](https://pimolu.com/components/separator): Separate account-setting groups without extra content.
- [CircularProgress](https://pimolu.com/components/circular-progress): Show upload progress with a numeric value.
- [Dialog](https://pimolu.com/components/dialog): A focused modal conversation with managed focus and dismissal.
- [Alert](https://pimolu.com/components/alert): Contextual feedback with a title, supporting text and optional actions.
- [Banner](https://pimolu.com/components/banner): A dismissible application-wide message.
- [EmptyState](https://pimolu.com/components/empty-state): Guide users toward creating their first project.
- [Result](https://pimolu.com/components/result): A checkout outcome with a meaningful next action.
- [LoadingOverlay](https://pimolu.com/components/loading-overlay): Block a local action while work is in progress.
- [AlertDialog](https://pimolu.com/components/alert-dialog): An explicit decision before deleting a resource.
- [ContextMenu](https://pimolu.com/components/context-menu): Contextual commands for a project row.
- [Command](https://pimolu.com/components/command): Searchable actions with keyboard navigation and optional palette presentation.
- [DropdownMenu](https://pimolu.com/components/dropdown-menu): Commands attached to a record action trigger.
- [Drawer](https://pimolu.com/components/drawer): A side panel for editing details without leaving context.
- [HoverCard](https://pimolu.com/components/hover-card): Supplementary profile information on a named trigger.
- [Popover](https://pimolu.com/components/popover): Edit local filters in a compact anchored panel.
- [Progress](https://pimolu.com/components/progress): Explain storage usage with a labelled progress meter.
- [Skeleton](https://pimolu.com/components/skeleton): An article placeholder while real content loads.
- [Spinner](https://pimolu.com/components/spinner): A pending form action with visible saving feedback.
- [Toast](https://pimolu.com/components/toast): Brief, dismissible notifications backed by a shared store.
- [Tour](https://pimolu.com/components/tour): A controlled product tour with real targets.
- [NotificationCenter](https://pimolu.com/components/notification-center): A controlled inbox with read and dismiss actions.
- [Tooltip](https://pimolu.com/components/tooltip): Supplementary context on a focusable trigger.

## Journal
- [One system, many identities](https://pimolu.com/blog/one-system-many-identities): Why Pimolu separates color, visual character and component behavior, and what that means for your product.
- [From tokens to a working interface](https://pimolu.com/blog/from-tokens-to-components): A guided look at the build pipeline connecting design data, shared CSS and the React registry.
- [A component is not a complete workflow](https://pimolu.com/blog/a-component-is-not-a-workflow): Keyboard paths, focus return and room to breathe: the details that make composed interfaces dependable.

## Project
- [Preview release](https://pimolu.com/releases/0.1.0-beta.1)
- [Development notes](https://pimolu.com/releases/unreleased)
- [Source and AGENTS.md](https://github.com/pimoludev/ui)

APIs and code examples are generated from or checked against the repository. Accessibility notes describe verification needs, not a blanket certification.