⚠️ 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 dialog: the Corner set. 5 decorative dialog variations (TopRightDialog, BottomRightDialog, TopCenterDialog, DockedDialog, OffsetDialog) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled carousel: the Coverflow set. 5 decorative carousel variations (FlowCarousel, DeepCarousel, TiltCarousel, FanCarousel, StackCarousel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Date field that opens a Calendar in a Popover. Controlled or uncontrolled via value/defaultValue and onValueChange; formats the selected date with date-fns and shows a placeholder when empty.
Usage example for the ai2 date-picker component.
Styled separator: the Decorative set. 5 decorative separator variations (ZigzagSeparator, WaveSeparator, ChevronSeparator, DiamondSeparator, StarSeparator) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled menubar: the Dense set. 5 decorative menubar variations (CompactMenubar2, NarrowMenubar, TightMenubar, SlimMenubar, MicroMenubar) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Modal dialog on radix-ui with portal, overlay, focus trap, fade/zoom animations and 5 content sizes (sm, md, lg, xl, full) that cap the width from the sm breakpoint up while staying full width minus a margin on mobile. Exports Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose.
Styled alert: the Dialog-accent set. 5 decorative alert variations (TopBarAlert, SideBarAlert, RingAlert, GlowAlert, FillAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled command: the Dialog set. 5 decorative command variations (ModalCommand, OverlayCommand, CenterCommand, TopCommand, FullscreenCommand) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Usage example for the ai2 dialog component.
Styled dialog: the essentials set. 5 decorative dialog variations (CenterDialog, SlideUpDialog, GlassDialog, FullscreenDialog, DropDialog) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled alert: the Dialog-glass set. 5 decorative alert variations (FrostAlert, TintAlert, DarkAlert, BlurAlert, CrystalAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled alert: the Dialog-illustration set. 5 decorative alert variations (SpotlightAlert, BadgeAlert, CircleAlert, GradientAlert, BannerAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled alert: the Dialog-layout set. 5 decorative alert variations (CenteredAlert, HorizontalAlert, CompactAlert, WideAlert, SplitAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled alert: the Dialog-motion set. 5 decorative alert variations (ShakeAlert, PopAlert, DropAlert, ZoomAlert, SlideAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled alert: the Dialog-styled set. 5 decorative alert variations (ConfirmAlert, DestructiveAlert, InfoAlert, SuccessAlert, IconAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled loaders: the DNA set. 5 decorative loaders variations (HelixLoader, LadderLoader, TwistLoader, CoilLoader, WeaveLoader) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled separator: the Dotted set. 5 decorative separator variations (DotSeparator, DottedSeparator, BeadsSeparator, SpacedSeparator, FadeDotSeparator) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled item: the Drag set. 5 decorative item variations (HandleItem, GripItem, ReorderItem, GhostItem, RailItem) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Draggable drawer on vaul with 4 directions (top, right, bottom, left), a drag handle on the bottom variant, overlay and snap behavior. Exports Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose, DrawerOverlay, DrawerPortal.
Usage example for the ai2 drawer component.
Styled drawer: the essentials set. 5 decorative drawer variations (BottomDrawer, TopDrawer, GlassDrawer, RoundedDrawer, SnapDrawer) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Full dropdown menu on radix-ui: items (default + danger variant), checkbox items, radio group, submenus, labels, separators and shortcuts. Keyboard navigable.
Usage example for the ai2 dropdown-menu component.
Empty-state placeholder: Empty wrapper with EmptyHeader, EmptyMedia (default or icon variant), EmptyTitle, EmptyDescription and EmptyContent for actions. Centered, balanced text, dashed-border ready.
Styled command: the Empty set. 5 decorative command variations (EmptyCommand, LoadingCommand, ErrorCommand, RecentCommand, SuggestCommand) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Usage example for the ai2 empty component.
Styled empty: the essentials set. 5 decorative empty variations (SimpleEmpty, IconEmpty, IllustrationEmpty, ActionEmpty, CardEmpty) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled empty: the Error set. 5 decorative empty variations (ErrorEmpty, OfflineEmpty, DeniedEmpty, TimeoutEmpty, BrokenEmpty) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled calendar: the Event set. 5 decorative calendar variations (DotCalendar, BadgeCalendar, BarCalendar, CountCalendar, ToneEventCalendar) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Form field composition: Field, FieldControl, FieldLabel, FieldDescription, FieldError. Auto-wires accessibility: FieldControl (a Slot around any control) receives a generated id, aria-describedby pointing at the description and error, and aria-invalid; the label targets the control automatically. invalid/disabled props drive data attributes, label color and dimming. orientation switches vertical (default) and horizontal (label-left, e.g. switch rows).
Usage example for the ai2 field component.
Styled field: the essentials set. 5 decorative field variations (StackedField, FloatingField, InlineField, CardField, BorderedField) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled file picker: hidden native input under a custom surface with a leading icon (lucide or remixicon), placeholder or selected file name, multiple-file count and an optional clear button. Follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (neutral, success, danger). States: empty, selected, disabled, invalid via aria-invalid.
Usage example for the ai2 file-input component.
Styled label: the Float set. 5 decorative label variations (FloatLabel, ShrinkLabel, InlineFloatLabel, OverlapLabel, SlideLabel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled carousel: the Fraction set. 5 decorative carousel variations (CounterCarousel, BarCarousel, RingCarousel, CornerCarousel, CombinedCarousel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Floating surface treatments: glass.overlay (translucent + blur, for tooltips/dropdowns), glass.frosted (heavier blur + deep layered shadow, for modals), glass.solid (opaque), plus shadow.default and shadow.max elevation tokens. Class-string helpers composed with cn(); backgrounds wired to ai2 tokens so glass follows any theme in both modes. Inspired by the Delphi glass system.
Styled accordion: the Glass set. 5 decorative accordion variations (FrostAccordion, TintAccordion, SmokeAccordion, CrystalAccordion, DepthAccordion) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled avatars: the Glass set. 5 decorative avatars variations (FrostAvatar, TintAvatar, SheenAvatar, CrystalAvatar, HaloGlassAvatar) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled badges: the Glass set. 5 decorative badges variations (FrostBadge, TintBadge, CrystalBadge, SmokeBadge, HaloBadge) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled breadcrumb: the Glass set. 5 decorative breadcrumb variations (FrostBreadcrumb, TintBreadcrumb, SmokeBreadcrumb, CrystalBreadcrumb, DepthBreadcrumb) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled buttons: the Glass set. 5 decorative buttons variations (FrostButton, TintButton, CrystalButton, SmokeButton, DepthButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled collapsible: the Glass set. 5 decorative collapsible variations (FrostCollapsible, TintCollapsible, SmokeCollapsible, CrystalCollapsible, DepthCollapsible) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled empty: the Glass set. 5 decorative empty variations (FrostEmpty, TintEmpty, SmokeEmpty, CrystalEmpty, DepthEmpty) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled field: the Glass set. 5 decorative field variations (FrostField, TintField, SmokeField, CrystalField, DepthField) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled inputs: the Glass set. 5 decorative inputs variations (FrostInput, TintInput, CrystalInput, SmokeInput, DepthGlassInput) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled kbd: the Glass set. 5 decorative kbd variations (FrostKbd, TintKbd, SmokeKbd, CrystalKbd, DepthKbd) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.