⚠️ 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 pagination: the Glass set. 5 decorative pagination variations (FrostPagination, TintPagination, SmokePagination, CrystalPagination, DepthPagination) 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 Glass set. 5 decorative table variations (FrostTable, TintTable, SmokeTable, CrystalTable, DepthTable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled tabs: the Glass set. 5 decorative tabs variations (FrostTabs, TintTabs, SmokeTabs, CrystalTabs, DepthTabs) 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 Glass set. 5 decorative textarea variations (FrostTextarea, TintTextarea, SmokeTextarea, CrystalTextarea, DepthTextarea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled buttons: the Glow set. 5 decorative buttons variations (GlowButton, PulseGlowButton, AuraButton, NeonButton, EmberButton) 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 Gradient set. 5 decorative buttons variations (FlowButton, ConicButton, DuotoneButton, AuroraButton, SunsetButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled input: the Group-action set. 5 decorative input variations (CopyGroup, PasteGroup, RevealGroup, GenerateGroup, LoadingGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled field: the Group set. 5 decorative field variations (RowField, SplitField, GridField, SectionField, FieldsetField) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled button: the Group-glass set. 5 decorative button variations (FrostButtonGroup, TintButtonGroup, SmokeButtonGroup, CrystalButtonGroup, DepthButtonGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled input: the Group-glass set. 5 decorative input variations (FrostGroup, TintGroup, SmokeGroup, CrystalGroup, DepthGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled radio: the Group-glass set. 5 decorative radio variations (FrostRadio, TintRadio, SmokeRadio, CrystalRadio, DepthRadio) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled toggle: the Group-glass set. 5 decorative toggle variations (FrostToggleGroup, TintToggleGroup, SmokeToggleGroup, CrystalToggleGroup, DepthToggleGroup) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled button: the Group-icon set. 5 decorative button variations (IconButtonGroup, LabelButtonGroup, MixedButtonGroup, CompactIconButtonGroup, TooltipButtonGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled radio: the Group-image set. 5 decorative radio variations (SwatchRadio, ThumbRadio, ColorRadio, AvatarRadio, TileRadio) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled radio: the Group-list set. 5 decorative radio variations (RowRadio, DividedRadio, GroupedRadio, InlineRadio, DenseRadio) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled button: the Group-motion set. 5 decorative button variations (SlideButtonGroup, PopButtonGroup, FadeButtonGroup, SpringButtonGroup, MorphButtonGroup) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled radio: the Group-motion set. 5 decorative radio variations (SlideRadio, PopRadio, FadeRadio, SpringRadio, MorphRadio) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled toggle: the Group-motion set. 5 decorative toggle variations (SlideToggleGroup, PopToggleGroup, FadeToggleGroup, SpringToggleGroup, MorphToggleGroup) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled toggle: the Group-multi set. 5 decorative toggle variations (MultiToggleGroup, CountToggleGroup, ChipsToggleGroup, AllToggleGroup, MixedToggleGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled input: the Group-search set. 5 decorative input variations (SearchGroup, ClearGroup, SubmitGroup, FilterGroup, VoiceGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled button: the Group-styled set. 5 decorative button variations (AttachedGroup, SplitGroup, ToolbarGroup, PillGroup, StepperGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled input: the Group-styled set. 5 decorative input variations (PrefixGroup, SuffixGroup, IconGroup, ButtonGroup, SegmentGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled radio: the Group-styled set. 5 decorative radio variations (SegmentedRadio, CardRadio, PillRadio, DotRadio, IconRadio) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled toggle: the Group-styled set. 5 decorative toggle variations (SegmentedToggleGroup, PillToggleGroup, IconToggleGroup, OutlineToggleGroup, GhostToggleGroup) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled button: the Group-tone set. 5 decorative button variations (InfoButtonGroup, SuccessButtonGroup, WarningButtonGroup, DangerButtonGroup, MutedButtonGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled input: the Group-tone set. 5 decorative input variations (InfoGroup, SuccessGroup, WarningGroup, DangerGroup, MutedGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled radio: the Group-tone set. 5 decorative radio variations (InfoRadio, SuccessRadio, WarningRadio, DangerRadio, MutedRadio) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled toggle: the Group-tone set. 5 decorative toggle variations (InfoToggleGroup, SuccessToggleGroup, WarningToggleGroup, DangerToggleGroup, MutedToggleGroup) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled input: the Group-unit set. 5 decorative input variations (UnitGroup, CurrencyGroup, PercentGroup, SelectUnitGroup, StepperGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled button: the Group-vertical set. 5 decorative button variations (StackButtonGroup, RailButtonGroup, CardButtonGroup, CompactButtonGroup, ListButtonGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled toggle: the Group-vertical set. 5 decorative toggle variations (StackToggleGroup, RailToggleGroup, CardToggleGroup, CompactToggleGroup, ListToggleGroup) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled dialog: the Header set. 5 decorative dialog variations (AccentHeaderDialog, IconHeaderDialog, GradientHeaderDialog, StickyHeaderDialog, DividerHeaderDialog) 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 Header set. 5 decorative drawer variations (TitleDrawer, StickyDrawer, FooterDrawer, HandleDrawer, DividerDrawer) 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 Header set. 5 decorative sheet variations (TitleSheet, StickySheet, FooterSheet, DividerSheet, AccentSheet) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Styled field: the Help set. 5 decorative field variations (HintHelpField, TooltipField, CounterField, DescriptionField, LinkField) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled label: the Help set. 5 decorative label variations (TooltipLabel, HintLabel, InfoHelpLabel, OptionalLabel, DescriptionLabel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Rich hover preview on radix-ui with portal, directional slide/zoom animations and 3 content sizes (sm, md, lg). Exports HoverCard, HoverCardTrigger, HoverCardContent.
Usage example for the ai2 hover-card component.
Styled breadcrumb: the Icon set. 5 decorative breadcrumb variations (HomeBreadcrumb, FolderBreadcrumb, StepBreadcrumb, BadgeBreadcrumb, MixedBreadcrumb) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Styled checkbox: the Indeterminate set. 5 decorative checkbox variations (MixedCheckbox, ParentCheckbox, TreeCheckbox, PartialCheckbox, AllCheckbox) 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 Indeterminate set. 5 decorative progress variations (BarSweepProgress, DualBarProgress, PulseTrackProgress, MarchProgress, CometProgress) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
Text input with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) for validation states via border and focus ring color. Invalid state also via aria-invalid.
Styled file: the Input-compact set. 5 decorative file variations (InlineFile, MinimalFile, NarrowFile, RowFile, BareFile) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.
Usage example for the ai2 input component.
Composable input shell: InputGroup carries the field appearance with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger); InputGroupInput/InputGroupTextarea render transparent controls inside; InputGroupAddon places icons, text or buttons at inline-start, inline-end, block-start or block-end; InputGroupText and InputGroupButton for addon content.
Usage example for the ai2 input-group component.
Styled file: the Input-motion set. 5 decorative file variations (DragFile, PopFile, FadeFile, SlideFile, PulseFile) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.
One-time-passcode input on input-otp with individual slots, a blinking fake caret, active-slot ring and aria-invalid danger styling. Exports InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator.