# Devie UI > A design system for React, built on Base UI with SCSS modules and CSS design tokens. Copy component source files into your project. Start with the installation guide to set up dependencies, global styles, and design tokens. The Markdown pages below include component implementations, code examples, and guides. ## Get started - [Overview](https://devie-ui.com/get-started/overview.md): Devie UI is a design system for React, providing UI components extending the Base UI primitives, with a minimalist tokenized theming mechanism. - [Installation](https://devie-ui.com/get-started/installation.md) - [Theming](https://devie-ui.com/get-started/theming.md): Styling for all Devie UI components utilizes a unified set of design tokens defined in global CSS variables. - [Changelog](https://devie-ui.com/get-started/changelog.md) ## Components - [Accordion](https://devie-ui.com/components/accordion.md): A component that displays a set of collapsible panels with headings. - [Alert Dialog](https://devie-ui.com/components/alert-dialog.md): A dialog that requires a user response to proceed. - [Autocomplete](https://devie-ui.com/components/autocomplete.md): A text input with a list of suggestions that filter as the user types. - [Avatar](https://devie-ui.com/components/avatar.md): A component that shows a user image with a text fallback. - [Badge](https://devie-ui.com/components/badge.md): A tinted chip for a label, a tag, or a status. - [Breadcrumb](https://devie-ui.com/components/breadcrumb.md): A navigation trail that shows the current location in a site hierarchy. - [Button](https://devie-ui.com/components/button.md): A button that can render as another tag and stay focusable when disabled. - [Button Group](https://devie-ui.com/components/button-group.md): A component that joins several buttons into one control. - [Callout](https://devie-ui.com/components/callout.md): A contextual message block for a section of the interface. - [Checkbox](https://devie-ui.com/components/checkbox.md): A control for a binary or indeterminate choice. - [Checkbox Group](https://devie-ui.com/components/checkbox-group.md): A component that provides shared state for a series of checkboxes. - [Combobox](https://devie-ui.com/components/combobox.md): An input combined with a filterable list of predefined items to select. - [Command](https://devie-ui.com/components/command.md): A command palette that filters actions as the user types. - [Context Menu](https://devie-ui.com/components/context-menu.md): A menu that appears at the pointer on right click or long press. - [Dialog](https://devie-ui.com/components/dialog.md): A dialog that opens on top of the entire page. - [Drawer](https://devie-ui.com/components/drawer.md): A panel that slides in from the edge of the screen. - [Field](https://devie-ui.com/components/field.md): A component that provides labeling and validation for form controls. - [Form](https://devie-ui.com/components/form.md): A form with consolidated error handling. - [Input](https://devie-ui.com/components/input.md): A native text input that works inside a Field. - [Input Group](https://devie-ui.com/components/input-group.md): A component that joins an input with buttons and addons into one control. - [Kbd](https://devie-ui.com/components/kbd.md): A component that shows keyboard keys and shortcuts. - [Layer Card](https://devie-ui.com/components/layer-card.md): A card that floats on a shell with a matching corner radius. - [Menu](https://devie-ui.com/components/menu.md): A list of actions in a popup, with keyboard navigation. - [Navigation Menu](https://devie-ui.com/components/navigation-menu.md): A collection of links and menus for website navigation. - [Number Field](https://devie-ui.com/components/number-field.md): A numeric input with increment and decrement buttons, and a scrub area. - [Popover](https://devie-ui.com/components/popover.md): An accessible popup anchored to a trigger. - [Progress](https://devie-ui.com/components/progress.md): A progress bar that displays the status of a long task. - [Radio](https://devie-ui.com/components/radio.md): A set of radio buttons for choosing one option. - [Scroll Area](https://devie-ui.com/components/scroll-area.md): A native scroll container with custom scrollbars. - [Select](https://devie-ui.com/components/select.md): A control for choosing one predefined value from a popup list. - [Separator](https://devie-ui.com/components/separator.md): A separator line that is accessible to screen readers. - [Skeleton Line](https://devie-ui.com/components/skeleton-line.md): A placeholder bar that shimmers while content loads. - [Slider](https://devie-ui.com/components/slider.md): A slider that works like a range input. - [Switch](https://devie-ui.com/components/switch.md): A switch that indicates whether a setting is on or off. - [Tabs](https://devie-ui.com/components/tabs.md): A component for toggling between related panels on the same page. - [Toast](https://devie-ui.com/components/toast.md): A component that generates notifications. - [Toggle](https://devie-ui.com/components/toggle.md): A two-state button that can be on or off. - [Toolbar](https://devie-ui.com/components/toolbar.md): A component that groups a set of buttons and controls. - [Tooltip](https://devie-ui.com/components/tooltip.md): A hint that appears when an element is hovered or focused. - [Tree Line](https://devie-ui.com/components/tree-line.md): A component that draws connector lines for nested lists such as file trees. ## Guides - [Design for desktop](https://devie-ui.com/how-tos/design-for-desktop-native.md): The flexibility of Devie UI's theming approach makes it easy to design apps with a desktop native feel. - [Add Dark Mode](https://devie-ui.com/how-tos/implement-dark-mode.md): CSS provides a built-in solution to implement dark mode using the `prefers-color-scheme` directive. - [Manage More Themes](https://devie-ui.com/how-tos/manage-multiple-themes.md): Devie UI supports several themes in one application with several sets of CSS variables. - [Get values in JSX](https://devie-ui.com/how-tos/retrieve-theme-values-inside-jsx.md): Devie UI themes are powered by CSS variables. - [Scale the interface](https://devie-ui.com/how-tos/scale-the-interface.md): Devie UI includes built-in support for interface scaling. - [Use SCSS Variables](https://devie-ui.com/how-tos/use-scss-variables.md): Devie UI tokens are CSS variables, so they can be swapped at runtime (themes, dark mode, user preferences). - [Stack without z-index](https://devie-ui.com/how-tos/z-index-and-stacking.md): Most design systems ship a `z-index` ladder: modal at 1000, toast at 1400, tooltip at 1500.