DocsComponentsChartsStudio

Overview

IntroductionInstallationComponentsCharts

Components

AccordionAlertAttachmentAvatarBadgeBreadcrumbsBubbleButtonCalendarCardChartCheckbox GroupCheckboxColor AreaColor EditorColor FieldColor PickerColor SliderColor Swatch PickerColor SwatchComboboxCommandDate FieldDate PickerDialogDisclosureDrawerDrop ZoneEmptyFieldFile TriggerFormGroupInput GroupInputKbdLinkList BoxLoaderMarkerMentionMenuMessageScrollerMessageModalNumber FieldOTP FieldPaginationPopoverProgress BarQR CodeQuestionnaireRadio GroupSearch FieldSegmented ControlSelectSeparatorSidebarSkeletonSliderSwitchTableTabsTag GroupText AreaTextFieldTime FieldTime PickerToastToggle Button GroupToggle ButtonToken FieldTooltipTree

Installation

Learn how to add dotUI to your project.

Use dotUI Studio

dotUI starts in the Studio: compose your design system — colors, typography, icons, density, radius, per-component styles — and preview every change on live components. The export dialog gives you the setup command with your theme baked in, and every component you then add with the shadcn CLI installs pre-styled to your system. Requires React 19, Tailwind CSS 4, and TypeScript 5.

Open the Studio

Last updated on 9/2/2026

Use dotUI Studio
Use dotUI Studio