⚠️ 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 avatars: the 3D set. 5 decorative avatars variations (CoinAvatar, CardTiltAvatar, LayeredAvatar, ShadowLiftAvatar, CubeAvatar) 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 3D set. 5 decorative buttons variations (PushButton, TiltButton, LayeredButton, EmbossButton, LiftButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled progress: the 3D set. 5 decorative progress variations (RaisedProgress, TubeProgress, BevelProgress, GlossProgress, InsetProgress) 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 3D set. 5 decorative toggles variations (RaisedToggle, PillPressToggle, TactileToggle, DomeToggle, SwitchLeverToggle) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled accordion: the Accent set. 5 decorative accordion variations (BarAccordion, GrowAccordion, GlowAccordion, LeftAccordion, FullAccordion) 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 Accent set. 5 decorative collapsible variations (BarCollapsible, GrowCollapsible, GlowCollapsible, LeftCollapsible, FullCollapsible) 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 Accent set. 5 decorative command variations (BarCommand, GlowCommand, FillCommand, RingCommand, EdgeCommand) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled menubar: the Accent set. 5 decorative menubar variations (BarMenubarAccent, GlowMenubar, FillMenubar, UnderlineMenubar, EdgeMenubar) 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 Accent set. 5 decorative popover variations (BorderPopover, GlowPopover, RingPopover, TopBarPopover, FillPopover) 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 Accent set. 5 decorative resizable variations (BarResizable, GlowResizable, RingResizable, FillResizable, EdgeResizable) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled tabs: the Accent set. 5 decorative tabs variations (BarTabs, GlowTabs, FillTabs, RingTabs, EdgeTabs) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Accordion on radix-ui with 3 variants (default divided rows, separated cards, outline boxed) plus animated open/close (ai2 motion tokens) and a rotating chevron. Variant flows from Accordion to every item via context. Exports Accordion, AccordionItem, AccordionTrigger, AccordionContent.
Usage example for the ai2 accordion component.
Styled accordion: the essentials set. 5 decorative accordion variations (BorderedAccordion, SeparatedAccordion, FilledAccordion, GhostAccordion, PlusAccordion) 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 Action set. 5 decorative alert variations (DismissAlert, LinkAlert, ButtonsAlert, InlineActionAlert, StackedAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Indigo brand theme for ai2: recolors the brand tone channel (solid + soft pairs) in light and dark mode. Install on top of any ai2 setup; every component using tone=brand follows automatically.
ai2 extension tokens: tone colors (brand, success, warning, danger, info + soft pairs), surface-2/3 and motion variables. Required by every ai2 component; installed automatically as a dependency.
Alert with a variant x tone matrix: 2 variants (soft, outline) x 6 tones. Optional leading icon, AlertTitle and AlertDescription. role=alert.
Usage example for the ai2 alert component.
Confirmation dialog on radix-ui AlertDialog for destructive or irreversible actions. Action button defaults to the danger tone; cancel is focused first per WAI-ARIA.
Usage example for the ai2 alert-dialog component.
Styled alert: the essentials set. 5 decorative alert variations (SoftAlert, LeftBarAlert, GlassAlert, GlowAlert, IconPulseAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled badges: the Animated set. 5 decorative badges variations (ShimmerBadge, BounceBadge, FlipBadge, SlideBadge, WobbleBadge) 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 Animated set. 5 decorative buttons variations (BounceButton, ScaleButton, SlideButton, RotateButton, BreatheButton) 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 Animated set. 5 decorative tooltips variations (PopTooltip, FlipTooltip, SwingTooltip, TypeTooltip, GlowInTooltip) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled scroll: the Area-fade set. 5 decorative scroll variations (TopFadeScrollArea, BottomFadeScrollArea, BothFadeScrollArea, SoftFadeScrollArea, StrongFadeScrollArea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled scroll: the Area-gutter set. 5 decorative scroll variations (RailScrollArea, GrooveScrollArea, WideScrollArea, InsetScrollArea, BorderedScrollArea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled scroll: the Area-inset set. 5 decorative scroll variations (SoftInsetScrollArea, DeepInsetScrollArea, TopInsetScrollArea, BottomInsetScrollArea, FrameInsetScrollArea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled scroll: the Area-primary set. 5 decorative scroll variations (SolidPrimaryScrollArea, SoftPrimaryScrollArea, RingPrimaryScrollArea, GradientPrimaryScrollArea, GlowPrimaryScrollArea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled scroll: the Area-shadow set. 5 decorative scroll variations (FloatShadowScrollArea, LiftShadowScrollArea, DeepShadowScrollArea, PillShadowScrollArea, EdgeShadowScrollArea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled scroll: the Area-styled set. 5 decorative scroll variations (ThinScrollArea, RoundedScrollArea, ColoredScrollArea, OverlayScrollArea, BothScrollArea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled combobox: the Async set. 5 decorative combobox variations (LoadingCombobox, EmptyCombobox, ErrorCombobox, RecentCombobox, SuggestCombobox) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled textarea: the Autosize set. 5 decorative textarea variations (GrowTextarea, MaxTextarea, MinTextarea, FluidTextarea, FixedTextarea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Avatar on radix-ui with 5 sizes (xs-xl) and 2 shapes (circle, rounded), plus AvatarGroup for overlapping stacks with an optional max that collapses the rest into a +N tile. Exports Avatar, AvatarImage, AvatarFallback, AvatarGroup.
Usage example for the ai2 avatar component.
Styled avatars: the essentials set. 5 decorative avatars variations (RingAvatar, StatusAvatar, GradientRingAvatar, GlowAvatar, SquircleAvatar) 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 Avatar set. 5 decorative skeleton variations (AvatarCircleSkeleton, AvatarSquareSkeleton, StackSkeleton, InlineSkeleton, DetailSkeleton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Badge with a variant x tone x size matrix: 3 variants (solid, soft, outline), 6 tones, 3 sizes (sm, md, lg). Icons work with both lucide svg and remixicon i children. Supports asChild for links.
Styled avatars: the Badge set. 5 decorative avatars variations (NotifyAvatar, StatusRingAvatar, TypingAvatar, NewAvatar, VerifiedAvatar) 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 badge component.
Styled label: the Badge set. 5 decorative label variations (CountLabel, StatusLabel, NewLabel, BetaLabel, TagLabel) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled badges: the essentials set. 5 decorative badges variations (DotBadge, GradientBadge, GlowBadge, PulseBadge, OutlineBadge) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled tabs: the Badge set. 5 decorative tabs variations (CountTabs, DotTabs, StatusTabs, IconBadgeTabs, AlertTabs) 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 Banner set. 5 decorative alert variations (TopAlert, InlineAlert, StickyAlert, CompactAlert, BarAlert) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled breadcrumb: the Bar set. 5 decorative breadcrumb variations (BarBreadcrumb, CardBreadcrumb, OutlineBreadcrumb, FilledBreadcrumb, StickyBreadcrumb) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled dialog: the Blur set. 5 decorative dialog variations (SoftBlurDialog, HeavyBlurDialog, DarkBlurDialog, TintBlurDialog, GradientBlurDialog) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled drawer: the Blur set. 5 decorative drawer variations (SoftBlurDrawer, HeavyBlurDrawer, DarkBlurDrawer, TintBlurDrawer, GradientBlurDrawer) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled sheet: the Blur set. 5 decorative sheet variations (SoftBlurSheet, HeavyBlurSheet, DarkBlurSheet, TintBlurSheet, GradientBlurSheet) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.