⚠️ Mobile is not supported yet.
Search for a command to run...
Agent-native design system for the shadcn CLI: 51 base components with a full variant, tone and size matrix on an OKLCH token layer, plus 307 styled variations. MIT.
Styled date: the Picker-compact set. 5 decorative date variations (DenseDatePicker, MinimalDatePicker, NarrowDatePicker, InlineCompactDatePicker, BareDatePicker) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled date: the Picker-motion set. 5 decorative date variations (SlideDatePicker, PopDatePicker, FadeDatePicker, SpringDatePicker, MorphDatePicker) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled date: the Picker-preset set. 5 decorative date variations (QuickDatePicker, ShortcutsDatePicker, RecentDatePicker, RelativeDatePicker, CustomDatePicker) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled date: the Picker-styled set. 5 decorative date variations (SimpleDatePicker, RangeDatePicker, GlassDatePicker, InlineDatePicker, IconDatePicker) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled date: the Picker-time set. 5 decorative date variations (TimeDatePicker, DateTimeDatePicker, ClockDatePicker, SlotsDatePicker, DurationDatePicker) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled date: the Picker-tone set. 5 decorative date variations (InfoDatePicker, SuccessDatePicker, WarningDatePicker, DangerDatePicker, MutedDatePicker) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled buttons: the Pill set. 5 decorative buttons variations (FillButton, CenterFillButton, SwapButton, OutlineFillButton, DotButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled popover: the Placement set. 5 decorative popover variations (TopPopover, BottomPopover, LeftPopover, RightPopover, CornerPopover) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Popover on radix-ui with portal, directional slide/zoom animations, 3 content sizes (sm, md, lg) and an optional anchor. Exports Popover, PopoverTrigger, PopoverContent, PopoverAnchor.
Usage example for the ai2 popover component.
Styled popover: the essentials set. 5 decorative popover variations (ArrowPopover, GlassPopover, MenuPopover, FormPopover, RichPopover) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled sonner: the Position set. 5 decorative sonner variations (TopRightToaster, TopCenterToaster, BottomLeftToaster, BottomCenterToaster, TopLeftToaster) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled card: the Pricing set. 5 decorative card variations (TierCard, FeaturedCard, CompactPricingCard, TogglePricingCard, ListPricingCard) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Headless primitive adapter: the single entry point every ai2 component imports its unstyled behaviour from. Components never import the primitive library directly, so the provider is swapped in one file instead of thirty. Re-exports the twenty-four Radix UI namespaces the system uses (Dialog, Popover, Select, Tabs, Tooltip, Menu, and the rest). Components with no cross-library equivalent, such as Command, Toast, Drawer, Calendar, OTP input, Carousel and Resizable, keep their own dependency on purpose.
The second provider behind the ai2 primitive adapter: the same surface as @ai2/primitives, bound to Base UI instead of Radix. A pro block imports the adapter, not the library, so the same block source runs on either one. Anatomy differences are absorbed here (Base UI wraps the slider track in a Control part and calls the filled part Indicator, and it renders a native range input inside the thumb, so focus styling is mirrored from focus-visible to focus-within). Primitives with no Base UI counterpart are deliberately left out rather than silently falling back to Radix.
Progress bar on radix-ui with 6 tones (neutral, brand, success, warning, danger, info) and 3 sizes. Fill animates using ai2 motion tokens.
Usage example for the ai2 progress component.
Styled progress: the essentials set. 5 decorative progress variations (StripedProgress, GradientProgress, GlowProgress, SegmentedProgress, ShimmerProgress) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled sonner: the Progress set. 5 decorative sonner variations (BarToaster, RingToaster, CountdownToaster, SweepToaster, EdgeToaster) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Radio group + item on radix-ui with 4 tones and 3 sizes. Exports RadioGroup and RadioGroupItem.
Usage example for the ai2 radio-group component.
Styled slider: the Range set. 5 decorative slider variations (DualSlider, MinMaxSlider, StepsRangeSlider, LabelsRangeSlider, FillRangeSlider) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled resizable: the Ratio set. 5 decorative resizable variations (PillResizable, InlineResizable, BadgeResizable, TooltipResizable, CornerResizable) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Resizable split panels on react-resizable-panels with horizontal or vertical groups and an optional drag handle. Exports ResizablePanelGroup, ResizablePanel, ResizableHandle.
Usage example for the ai2 resizable component.
Styled resizable: the essentials set. 5 decorative resizable variations (HorizontalResizable, VerticalResizable, HandleResizable, NestedResizable, GlassResizable) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled combobox: the Rich set. 5 decorative combobox variations (AvatarCombobox, DescriptionCombobox, BadgeCombobox, MediaCombobox, GroupCombobox) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled pagination: the Rich set. 5 decorative pagination variations (SizesPagination, TotalPagination, PerPagePagination, InfoPagination, FullPagination) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled select: the Rich set. 5 decorative select variations (AvatarSelect, DescriptionSelect, BadgeSelect, MediaSelect, SplitSelect) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled sonner: the Rich set. 5 decorative sonner variations (TitleToaster, AvatarToaster, MediaToaster, DescriptionToaster, StackedToaster) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled tooltips: the Rich set. 5 decorative tooltips variations (TitleTooltip, IconTooltip, KbdTooltip, MediaTooltip, MenuTooltip) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled buttons: the Ripple set. 5 decorative buttons variations (RippleButton, EchoButton, SonarButton, PingButton, FlashButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Custom cross-browser scroll container on radix-ui with a thin token-colored scrollbar. Exports ScrollArea and ScrollBar (vertical or horizontal orientation).
Usage example for the ai2 scroll-area component.
Styled empty: the Search set. 5 decorative empty variations (QueryEmpty, FilterEmpty, SuggestEmpty, RecentEmpty, ClearEmpty) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled select: the Search set. 5 decorative select variations (FilterSelect, TypeSelect, LiveSelect, ClearSelect, HighlightSelect) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Select on radix-ui. Trigger follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (neutral, success, danger). Grouped items, labels, separators, scroll buttons, checkmark indicator; popper positioned with matching width.
Usage example for the ai2 select component.
Styled select: the essentials set. 5 decorative select variations (SimpleSelect, GlassSelect, IconSelect, PillSelect, GroupedSelect) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled table: the Selection set. 5 decorative table variations (CheckboxTable, RadioTable, RowTable, AllTable, HighlightTable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled item: the Select set. 5 decorative item variations (CheckItem, RadioItem, ToggleItem, MultiItem, HighlightItem) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Horizontal or vertical divider on radix-ui with 2 variants (solid, dashed) and an optional centered label that renders a two-line divider with text (e.g. OR). Decorative by default with correct aria semantics when not.
Usage example for the ai2 separator component.
Styled separator: the essentials set. 5 decorative separator variations (GradientSeparator, DashedSeparator, LabelSeparator, IconSeparator, GlowSeparator) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled skeleton: the Shapes set. 5 decorative skeleton variations (CircleSkeleton, SquareSkeleton, RoundedSkeleton, PillSkeleton, BarSkeleton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled tooltips: the Shape set. 5 decorative tooltips variations (BubbleTooltip, PillTooltip, NotchTooltip, CalloutTooltip, BadgeTooltip) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Slide-in panel on radix-ui Dialog with 4 sides (right, left, top, bottom), 3 sizes (sm, md, lg) that set the panel width for the left/right sides, and directional slide animations using ai2 motion tokens.
Usage example for the ai2 sheet component.