# Yopem UI

> Source-owned, accessible React components built with StyleX and Base UI. Initialize supported projects with `bunx @yopem-ui/cli init`, then install source with the CLI; customize it without package lock-in.

## Documentation

- [Layout and typography](https://ui.yopem.com/docs/layout.md): Box Flex Stack HStack VStack Grid Center Container AbsoluteCenter Bleed Float Wrap Link Text Blockquote Em Highlight Mark Prose Codeblock Heading semantic layout native elements refs typography
- [Styling with StyleX](https://ui.yopem.com/docs/styling.md): StyleX create props xstyle semantic tokens responsive styles defaults components className integration
- [Lint rules](https://ui.yopem.com/docs/lint.md): Oxlint rules prefer-layout-primitives Box Flex Grid Center Stack opt-out div span enforce-styling-methods static-stylex valid-polymorphic-as no-restyle no-raw-stylex-colors atoms contracts StyleX configuration properties
- [Theming](https://ui.yopem.com/docs/theming.md): Customize colors fonts CSS variables StyleX tokens light dark system ThemeProvider ThemeScript useTheme getRootThemeProps nonce
- [Introduction](https://ui.yopem.com/index.md): Source-owned React components with StyleX and Base UI. Initialize and install component source with the CLI.
- [Getting started](https://ui.yopem.com/docs/getting-started.md): React TypeScript StyleX components accessibility composition usage prerequisites CLI installation
- [Installation](https://ui.yopem.com/docs/installation.md): CLI init dependencies StyleX Vite aliases tokens themes ThemeProvider CSS reset
- [Components](https://ui.yopem.com/components.md): Browse all components

## Components

- [Absolute Center](https://ui.yopem.com/components/absolute-center.md)
- [Accordion](https://ui.yopem.com/components/accordion.md)
- [Alert](https://ui.yopem.com/components/alert.md)
- [Alert Dialog](https://ui.yopem.com/components/alert-dialog.md)
- [Autocomplete](https://ui.yopem.com/components/autocomplete.md)
- [Avatar](https://ui.yopem.com/components/avatar.md)
- [Badge](https://ui.yopem.com/components/badge.md)
- [Bleed](https://ui.yopem.com/components/bleed.md)
- [Blockquote](https://ui.yopem.com/components/blockquote.md)
- [Box](https://ui.yopem.com/components/box.md)
- [Breadcrumb](https://ui.yopem.com/components/breadcrumb.md)
- [Button](https://ui.yopem.com/components/button.md)
- [Calendar](https://ui.yopem.com/components/calendar.md)
- [Card](https://ui.yopem.com/components/card.md)
- [Center](https://ui.yopem.com/components/center.md)
- [Checkbox](https://ui.yopem.com/components/checkbox.md)
- [Checkbox Group](https://ui.yopem.com/components/checkbox-group.md)
- [Checkmark](https://ui.yopem.com/components/checkmark.md)
- [Clipboard](https://ui.yopem.com/components/clipboard.md)
- [Codeblock](https://ui.yopem.com/components/codeblock.md)
- [Collapsible](https://ui.yopem.com/components/collapsible.md)
- [Combobox](https://ui.yopem.com/components/combobox.md)
- [Command](https://ui.yopem.com/components/command.md)
- [Container](https://ui.yopem.com/components/container.md)
- [Context Menu](https://ui.yopem.com/components/context-menu.md)
- [Date Picker](https://ui.yopem.com/components/date-picker.md)
- [Dialog](https://ui.yopem.com/components/dialog.md)
- [Drawer](https://ui.yopem.com/components/drawer.md)
- [Em](https://ui.yopem.com/components/em.md)
- [Empty](https://ui.yopem.com/components/empty.md)
- [Field](https://ui.yopem.com/components/field.md)
- [Fieldset](https://ui.yopem.com/components/fieldset.md)
- [Flex](https://ui.yopem.com/components/flex.md)
- [Float](https://ui.yopem.com/components/float.md)
- [Form](https://ui.yopem.com/components/form.md)
- [Frame](https://ui.yopem.com/components/frame.md)
- [Grid](https://ui.yopem.com/components/grid.md)
- [Group](https://ui.yopem.com/components/group.md)
- [Heading](https://ui.yopem.com/components/heading.md)
- [Highlight](https://ui.yopem.com/components/highlight.md)
- [HStack](https://ui.yopem.com/components/hstack.md)
- [Input](https://ui.yopem.com/components/input.md)
- [Input Group](https://ui.yopem.com/components/input-group.md)
- [Kbd](https://ui.yopem.com/components/kbd.md)
- [Label](https://ui.yopem.com/components/label.md)
- [Layout](https://ui.yopem.com/components/layout.md)
- [Link](https://ui.yopem.com/components/link.md)
- [Mark](https://ui.yopem.com/components/mark.md)
- [Marquee](https://ui.yopem.com/components/marquee.md)
- [Menu](https://ui.yopem.com/components/menu.md)
- [Meter](https://ui.yopem.com/components/meter.md)
- [Native Select](https://ui.yopem.com/components/native-select.md)
- [Number Field](https://ui.yopem.com/components/number-field.md)
- [Otp Field](https://ui.yopem.com/components/otp-field.md)
- [Pagination](https://ui.yopem.com/components/pagination.md)
- [Popover](https://ui.yopem.com/components/popover.md)
- [Preview Card](https://ui.yopem.com/components/preview-card.md)
- [Progress](https://ui.yopem.com/components/progress.md)
- [Prose](https://ui.yopem.com/components/prose.md)
- [Radio Group](https://ui.yopem.com/components/radio-group.md)
- [Rating](https://ui.yopem.com/components/rating.md)
- [Scroll Area](https://ui.yopem.com/components/scroll-area.md)
- [Segmented Control](https://ui.yopem.com/components/navigation.md)
- [Select](https://ui.yopem.com/components/select.md)
- [Separator](https://ui.yopem.com/components/separator.md)
- [Sheet](https://ui.yopem.com/components/sheet.md)
- [Sidebar](https://ui.yopem.com/components/sidebar.md)
- [Skeleton](https://ui.yopem.com/components/skeleton.md)
- [Slider](https://ui.yopem.com/components/slider.md)
- [Spinner](https://ui.yopem.com/components/spinner.md)
- [Stack](https://ui.yopem.com/components/stack.md)
- [Stat](https://ui.yopem.com/components/stat.md)
- [Steps](https://ui.yopem.com/components/steps.md)
- [Switch](https://ui.yopem.com/components/switch.md)
- [Table](https://ui.yopem.com/components/table.md)
- [Tabs](https://ui.yopem.com/components/tabs.md)
- [Text](https://ui.yopem.com/components/text.md)
- [Textarea](https://ui.yopem.com/components/textarea.md)
- [Toast](https://ui.yopem.com/components/toast.md)
- [Toggle](https://ui.yopem.com/components/toggle.md)
- [Toggle Group](https://ui.yopem.com/components/toggle-group.md)
- [Toolbar](https://ui.yopem.com/components/toolbar.md)
- [Tooltip](https://ui.yopem.com/components/tooltip.md)
- [VStack](https://ui.yopem.com/components/vstack.md)
- [Wrap](https://ui.yopem.com/components/wrap.md)

## Machine-readable resources

- [Registry index](https://ui.yopem.com/r/registry.json): Component registry metadata
- [Sitemap](https://ui.yopem.com/sitemap.xml): Canonical public URLs