.skin

Component Library

Browse and explore all available components in the .skin design system

Showing 41 of 41 components

Input
Tier 1
A text input field for user data entry.
Forms
Textarea
Tier 1
A multi-line text input field.
Forms
Select
Tier 2
A dropdown select component for choosing from options.
Forms
Checkbox
Tier 2
A checkbox input for boolean selections.
Forms
Radio Group
Tier 2
A group of radio buttons for single selection.
Forms
Switch
Tier 1
A toggle switch for boolean values.
Forms
Label
Tier 1
A label component for associating text with form inputs.

We'll never share your email.

Forms
Form
Tier 2
A form component with validation and error handling.

Your public display name.

We'll never share your email.

Forms
Input OTP
Tier 4
An input component for one-time passwords.
Preview placeholder
Forms
Button
Tier 1
A versatile button component with multiple variants and sizes.
Buttons & Actions
Badge
Tier 1
A badge component for labels and status indicators.
DefaultSecondaryDestructiveOutline
Buttons & Actions
Dialog
Tier 2
A modal dialog component for important content.
Overlays
Alert Dialog
Tier 2
A dialog component specifically for alerts and confirmations.
Overlays
Popover
Tier 2
A popover component for floating content.
Overlays
Tooltip
Tier 2
A tooltip component for contextual information.
Overlays
Hover Card
Tier 3
A card that appears on hover.
Overlays
Sheet
Tier 1
A slide-over panel component.
Overlays
Drawer
Tier 4
A drawer component for mobile navigation.
Preview placeholder
Overlays
Navigation Menu
Tier 1
A navigation menu component for site navigation.
Navigation
Breadcrumb
Tier 2
A breadcrumb navigation component.
Navigation
Menubar
Tier 4
A menubar component for application menus.
Preview placeholder
Navigation
Context Menu
Tier 4
A context menu component for right-click actions.
Preview placeholder
Navigation
Dropdown Menu
Tier 2
A dropdown menu component.
Navigation
Icon Dropdown
Tier 2
A dropdown menu triggered by an icon button. Useful for compact UI patterns like settings menus or action menus.
Buttons & Actions
Table
Tier 2
A table component for displaying structured data.
NameStatusRole
John DoeActiveAdmin
Jane SmithActiveUser
Data Display
Card
Tier 1
A card component for content containers.
Card Title
Card description goes here

Card content goes here.

Data Display
Accordion
Tier 1
An accordion component for collapsible content.

Data Display
Collapsible
Tier 2
A collapsible component for expandable content.
Data Display
Tabs
Tier 2
A tabs component for organizing content.
Account settings
Data Display
Carousel
Tier 4
A carousel component for image/content slideshows.
Preview placeholder
Data Display
Progress
Tier 2
A progress bar component for showing completion status.
Feedback
Skeleton
Tier 1
A skeleton loader component for loading states.
Feedback
Sonner
Tier 2
A toast notification component.
Preview placeholder
Feedback
Dark Mode Toggle
Tier 1
A toggle for switching between light and dark mode. Included in all tiers by default.

Toggle between light and dark mode

The toggle reads from and writes to the global theme context, instantly applying the dark class to the document root.
Feedback
Separator
Tier 1
A separator component for dividing content.
Content above
Content below
Layout
Scroll Area
Tier 2
A scrollable area component.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Layout
Resizable
Tier 3
A resizable panel component.
Preview placeholder
Layout
Calendar
Tier 3
A calendar component for date selection.
February 2026
Specialized
Command
Tier 3
A command palette component for search and actions.
Specialized
Slider
Tier 3
A slider component for range selection.
Specialized
Avatar
Tier 1
An avatar component for user profiles.
JDJS
Specialized