⚠️ 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.
Usage example for the ai2 input-otp component.
Styled file: the Input-preview set. 5 decorative file variations (ImagePreviewFile, GridFile, ThumbFile, MediaFile, CardFile) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled file: the Input-progress set. 5 decorative file variations (BarFile, RingFile, PercentFile, MultiFile, QueueFile) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled inputs: the essentials set. 5 decorative inputs variations (UnderlineInput, FloatInput, GlowInput, FilledInput, IconInput) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled file: the Input-styled set. 5 decorative file variations (DropzoneFile, ButtonFile, AvatarFile, ListFile, GlassFile) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled file: the Input-tone set. 5 decorative file variations (InfoFile, SuccessFile, WarningFile, DangerFile, MutedFile) 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 Inset set. 5 decorative resizable variations (SoftResizable, DeepResizable, GrooveResizable, FrameResizable, FloatResizable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled sheet: the Inset set. 5 decorative sheet variations (FloatingSheet, RoundedSheet, MarginSheet, CardSheet, PillSheet) 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 Interactive set. 5 decorative tooltips variations (ScaleTooltip, UnderlineTooltip, LiftTooltip, FadeScaleTooltip, DelayTooltip) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
List/row primitive with 3 variants (default, outline, muted) and 2 sizes (default, sm). Parts: Item, ItemGroup, ItemMedia (default/icon/image), ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator. asChild renders the row as a link.
Usage example for the ai2 item component.
Styled item: the essentials set. 5 decorative item variations (SimpleItem, IconItem, AvatarItem, ActionItem, CardItem) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Keyboard key hint styled with the ai2 mono font and surface tokens. Use for shortcuts and command hints.
Usage example for the ai2 kbd component.
Styled kbd: the essentials set. 5 decorative kbd variations (RaisedKbd, FlatKbd, GlowKbd, OutlineKbd, SoftKbd) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Accessible form label built on radix-ui Label with 2 sizes (sm, md). Auto-dims when the associated control is disabled.
Usage example for the ai2 label component.
Styled label: the essentials set. 5 decorative label variations (RequiredLabel, UppercaseLabel, PillLabel, IconLabel, GradientLabel) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled table: the Layout set. 5 decorative table variations (StickyHeaderTable, ScrollTable, FixedTable, WideTable, DenseTable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled progress: the Liquid set. 5 decorative progress variations (WaveProgress, BubbleProgress, TideProgress, DropProgress, FoamProgress) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled toggles: the Liquid set. 5 decorative toggles variations (LiquidToggle, BlobToggle, DropToggle, WaveToggle, MercuryToggle) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled checkbox: the List set. 5 decorative checkbox variations (RowCheckbox, DividedCheckbox, GroupedCheckbox, InlineCheckbox, DenseCheckbox) 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 essentials set. 5 decorative loaders variations (DotsLoader, BarsLoader, RingLoader, PulseLoader, OrbitLoader) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled kbd: the Mac set. 5 decorative kbd variations (SymbolKbd, MacKbd, WinKbd, IconKbd, MixedKbd) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled avatars: the Magnetic set. 5 decorative avatars variations (MagneticAvatar, TiltAvatar, PopAvatar, WobbleAvatar, FollowAvatar) 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 Magnetic set. 5 decorative buttons variations (MagneticButton, RepelButton, TiltPointerButton, ElasticButton, SquishButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled inputs: the Magnetic set. 5 decorative inputs variations (TiltInput, GlowTrailInput, ExpandInput, ShakeInput, SpotlightInput) 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 Magnetic set. 5 decorative tooltips variations (MagneticTooltip, FloatTooltip, TiltTooltip, SpotlightTooltip, ParallaxTooltip) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled slider: the Marks set. 5 decorative slider variations (StepsSlider, LabelsSlider, SnapSlider, ScaleSlider, SegmentsSlider) 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 Media set. 5 decorative card variations (ImageCard, CoverCard, OverlayCard, SplitCard, AvatarCard) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled item: the Media set. 5 decorative item variations (ThumbItem, CoverItem, VideoItem, BadgeItem, StackItem) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Application menu bar on radix-ui with top-level menus, items, checkbox and radio items, submenus, labels, separators and shortcuts. Item variant default or danger. Icons work with lucide svg and remixicon i. Exports the full Menubar part set.
Usage example for the ai2 menubar component.
Styled menubar: the essentials set. 5 decorative menubar variations (BarMenubar, PillMenubar, GlassMenubar, MinimalMenubar, IconMenubar) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled context: the Menu-check set. 5 decorative context variations (CheckContextMenu, RadioContextMenu, ToggleContextMenu, MixedContextMenu, MultiContextMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled context: the Menu-compact set. 5 decorative context variations (DenseContextMenu, MinimalContextMenu, PillContextMenu, BareContextMenu, NarrowContextMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled context: the Menu-glass set. 5 decorative context variations (FrostContextMenu, TintContextMenu, SmokeContextMenu, CrystalContextMenu, DepthContextMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled dropdown: the Menu-glass set. 5 decorative dropdown variations (FrostMenu, TintMenu, SmokeMenu, CrystalMenu, DepthMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled context: the Menu-motion set. 5 decorative context variations (PopContextMenu, FadeContextMenu, SlideContextMenu, SpringContextMenu, ScaleContextMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled dropdown: the Menu-motion set. 5 decorative dropdown variations (SlideMenu, PopMenu, FadeMenu, FlipMenu, SpringMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled dropdown: the Menu-placement set. 5 decorative dropdown variations (BottomMenu, TopMenu, LeftMenu, RightMenu, CenterMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled dropdown: the Menu-shortcut set. 5 decorative dropdown variations (KbdMenu, InlineMenu, TrailingMenu, GroupedMenu, CompactMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled context: the Menu-styled set. 5 decorative context variations (SimpleContextMenu, IconContextMenu, ShortcutContextMenu, SectionContextMenu, DangerContextMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled dropdown: the Menu-styled set. 5 decorative dropdown variations (SimpleMenu, IconMenu, SectionMenu, CheckMenu, RichMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled context: the Menu-submenu set. 5 decorative context variations (NestedContextMenu, FlyoutContextMenu, InlineContextMenu, DeepContextMenu, WideContextMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled dropdown: the Menu-tone set. 5 decorative dropdown variations (InfoMenu, SuccessMenu, WarningMenu, DangerMenu, MutedMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled calendar: the Minimal set. 5 decorative calendar variations (BareCalendar, GhostCalendar, ThinCalendar, DenseCalendar, CleanCalendar) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled resizable: the Minimal set. 5 decorative resizable variations (LineResizable, HairResizable, DotResizable, GhostResizable, BareResizable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.