# carbon

> An opinionated React design system built on Base UI and StyleX. Every component ships as source you copy into your project and own.

carbon has no package to install. Each component page lists its dependencies and
carries the component's full source. The imports already point at `@/components/ui/*`,
`@/theme/*` and `@/lib/*`, so they resolve in a typical project. Do the quick setup below
first. It sets up the StyleX compiler and the token layer every component reads. Skip it
and a pasted component renders unstyled, with no error or warning.

Every link below is Markdown. The same page as HTML is at the URL without `.md`.

## Quick setup

For a Vite + React + TypeScript project. Paths are relative to `src/`. The files for step 5
are on [Installation](https://carbon.style/docs/installation.md).

1. `npm install @stylexjs/stylex @base-ui/react clsx @fontsource/geist-sans @fontsource/geist-mono`
   and `npm install -D @stylexjs/unplugin`.
2. In `vite.config.ts`, put `stylex()` from `@stylexjs/unplugin/vite` first in `plugins`, with
   `aliases: { "@/*": [path.join(import.meta.dirname, "src/*")] }` and
   `useCSSLayers: { before: ["carbon.base"] }`. Add `resolve: { tsconfigPaths: true }` and
   `build: { cssTarget: ["chrome123", "edge123", "firefox120", "safari17.5"] }`.
3. In `package.json`, set `"browserslist": ["chrome >= 123", "edge >= 123", "firefox >= 120", "safari >= 17.5"]`.
4. In `tsconfig.app.json`, set `"paths": { "@/*": ["./src/*"] }`. In `tsconfig.node.json`, set
   `"module": "esnext"` and `"moduleResolution": "bundler"`.
5. Copy `styles/theme.css`, `styles/interop.css`, `theme/tokens.stylex.ts`,
   `theme/breakpoints.stylex.ts`, `theme/markers.stylex.ts`, `theme/states.ts`,
   `lib/state-styles.ts` and `lib/field-state.ts`.
6. Delete `src/index.css`. Import `"./styles/theme.css"`, then `"./styles/interop.css"`, at the top
   of `main.tsx`.
7. For each component, fetch its page below, run its `npm install` line and paste its source
   into `components/ui/<name>.tsx`.

Check the result by rendering a component: an unresolved token drops its CSS without failing
the build. The first `vite` start can show an "Invalid empty selector" overlay; reload once.

## Guides

- [Installation](https://carbon.style/docs/installation.md): Get StyleX compiling, then paste the token layer every component reads.
- [React Hook Form](https://carbon.style/docs/forms/react-hook-form.md): Build forms with React Hook Form, Zod and the Field component.

## Components

- [Accordion](https://carbon.style/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://carbon.style/docs/components/alert.md): Displays a callout for user attention.
- [Alert Dialog](https://carbon.style/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Avatar](https://carbon.style/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://carbon.style/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://carbon.style/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Button](https://carbon.style/docs/components/button.md): Displays a button or a component that looks like a button.
- [Button Group](https://carbon.style/docs/components/button-group.md): A container that groups related buttons with shared borders and outer corners only.
- [Card](https://carbon.style/docs/components/card.md): Displays a card with header, content, and footer.
- [Checkbox](https://carbon.style/docs/components/checkbox.md): A control that lets the user toggle between checked and not checked.
- [Checkbox Group](https://carbon.style/docs/components/checkbox-group.md): Shares selection state across a set of checkboxes.
- [Collapsible](https://carbon.style/docs/components/collapsible.md): An interactive component that expands and collapses a panel.
- [Combobox](https://carbon.style/docs/components/combobox.md): An input that filters a list of options as you type.
- [Command](https://carbon.style/docs/components/command.md): A searchable list of actions, on the page or in a dialog.
- [Context Menu](https://carbon.style/docs/components/context-menu.md): Displays a menu of actions, opened by a right click or a long press.
- [Dialog](https://carbon.style/docs/components/dialog.md): A window overlaid on the page, rendering the content underneath inert.
- [Drawer](https://carbon.style/docs/components/drawer.md): A panel that enters from an edge of the screen and is dismissed by swiping it back.
- [Dropdown Menu](https://carbon.style/docs/components/dropdown-menu.md): Displays a menu of actions or functions, opened from a button.
- [Empty](https://carbon.style/docs/components/empty.md): Displays an empty state.
- [Field](https://carbon.style/docs/components/field.md): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Fieldset](https://carbon.style/docs/components/fieldset.md): Groups related controls under a shared legend.
- [Form](https://carbon.style/docs/components/form.md): Validates fields and displays server errors.
- [Hover Card](https://carbon.style/docs/components/hover-card.md): For sighted users to preview content available behind a link.
- [Input](https://carbon.style/docs/components/input.md): Displays a form input field for a single line of text.
- [Input Group](https://carbon.style/docs/components/input-group.md): Puts icons, text and buttons inside a single input frame.
- [Input OTP](https://carbon.style/docs/components/input-otp.md): Accepts a one-time password one character per slot, with paste and keyboard support.
- [Kbd](https://carbon.style/docs/components/kbd.md): Displays a keyboard key or a combination of keys.
- [Label](https://carbon.style/docs/components/label.md): Renders an accessible caption for a form control.
- [Menubar](https://carbon.style/docs/components/menubar.md): Provides a persistent set of application commands.
- [Meter](https://carbon.style/docs/components/meter.md): Displays a numeric measurement within a range.
- [Navigation Menu](https://carbon.style/docs/components/navigation-menu.md): A collection of links for navigating websites.
- [Number Field](https://carbon.style/docs/components/number-field.md): A numeric input with increment and decrement buttons and a draggable label.
- [Pagination](https://carbon.style/docs/components/pagination.md): Pagination with page navigation, next and previous links.
- [Popover](https://carbon.style/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://carbon.style/docs/components/progress.md): Displays an indicator showing the completion progress of a task.
- [Radio Group](https://carbon.style/docs/components/radio-group.md): A set of radio buttons where no more than one can be checked at a time.
- [Resizable](https://carbon.style/docs/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://carbon.style/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://carbon.style/docs/components/select.md): Displays a list of options for the user to pick from, opened from a button.
- [Separator](https://carbon.style/docs/components/separator.md): Visually or semantically separates content.
- [Sheet](https://carbon.style/docs/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://carbon.style/docs/components/sidebar.md): A collapsible app sidebar that renders as a sheet on small screens.
- [Skeleton](https://carbon.style/docs/components/skeleton.md): Shows a placeholder while content is loading.
- [Slider](https://carbon.style/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Spinner](https://carbon.style/docs/components/spinner.md): An indicator that shows a loading state.
- [Stack](https://carbon.style/docs/components/stack.md): Flex layout as props, on a closed spacing scale.
- [Switch](https://carbon.style/docs/components/switch.md): A control that lets the user toggle between checked and not checked.
- [Table](https://carbon.style/docs/components/table.md): A responsive table component.
- [Tabs](https://carbon.style/docs/components/tabs.md): A set of layered sections of content, known as tab panels, that are displayed one at a time.
- [Textarea](https://carbon.style/docs/components/textarea.md): Displays a form textarea for several lines of text.
- [Toast](https://carbon.style/docs/components/toast.md): A succinct message that is displayed temporarily.
- [Toggle](https://carbon.style/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://carbon.style/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Toolbar](https://carbon.style/docs/components/toolbar.md): Groups related controls into a single keyboard navigation region.
- [Tooltip](https://carbon.style/docs/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

## Optional

- [All pages](https://carbon.style/llms-full.txt): Every page above in one file, in this order
- [Source](https://github.com/arc1hq/carbon): The repository, MIT-licensed