Design system components

Interactive building blocks from shadcn/ui used across Glasspage. Each entry will be replaced with a live demo.

Actions

Primary controls for user actions and state toggles.

Component	Use case	Preview
Button	Primary actions such as submit, save, or confirm.
Icon button	Compact actions in toolbars, tables, and dense layouts.
Citation button	Open design reasoning citations linked to page elements.
Button group	Related actions that belong together, such as copy options.
Toggle	Binary on/off states like bold formatting or view modes.
Toggle group	Exclusive choice among related options like text alignment.

Inputs and controls for collecting user data.

Component	Use case	Preview
Input	Single-line text entry for names, emails, and search queries.
Input group	Inputs with leading icons or trailing metadata, such as search.
Textarea	Multi-line text for comments, descriptions, and longer input.
Label	Accessible field labels paired with inputs and controls.	Email
Checkbox	Single or multiple selections from a short list of options.
Select	Choose one option from a predefined list of values.
Calendar	Pick a single date or range for scheduling and filtering.

Components for moving between views and paginating content.

Component	Use case	Preview
Breadcrumb	Show the current page location within a hierarchy of views.	Home Settings
Tabs	Switch between related views without leaving the page.
Pagination	Move through paginated lists of records or search results.
Sidebar	Primary app navigation with collapsible sections and nested items.

Layered surfaces for contextual actions, details, and help.

Component	Use case	Preview
Dialog	Focused tasks and critical confirmations that need full attention.
Sheet	Secondary details in a side panel without leaving the page.
Popover	Contextual panels anchored to a trigger, such as pickers or menus.
Dropdown menu	Action lists and single-choice menus from buttons or icons.
Hover card	Rich previews on hover before opening a full overlay.
Tooltip	Brief labels and help for icons and compact controls.

Components for presenting structured information.

Component	Use case	Preview
Avatar	Represent people, teams, and assignees with photos or initials.	SPMRJL +4
Badge	Compact labels for status, categories, counts, and metadata.	DraftIn reviewPublished
Card	Group related content, metrics, and actions in a contained surface.
Table	Sortable rows and columns for structured records and comparisons.
Chart	Visualize trends, distributions, and KPIs over time or categories.
Carousel	Cycle through images, cards, or highlights in a limited space.
Empty	Explain missing data and suggest next steps when lists are blank.

Loading and notification patterns.

Component	Use case	Preview
Skeleton	Placeholder shapes while content loads to reduce layout shift.
Sonner	Brief success, error, and info messages that auto-dismiss.

Structural helpers for spacing, scrolling, and resizing.

Component	Use case	Preview
Separator	Visual dividers between grouped content in lists, panels, and forms.	Section A Section B
Scroll area	Custom scrollbars for overflow content in fixed-height containers.	Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8
Collapsible	Expand and collapse sections to save vertical space.
Panel resize handle	Drag to resize adjacent panels such as sidebars and split views.

Enter your details to unlock the remainder of this page, plus the principles, foundations, components and interactions pages in full.