Navigation Components
Components for navigation and wayfinding
Tabs
Tabbed navigation interface
Home content goes here
Profile content goes here
Settings content goes here
Disabled content
Breadcrumbs
Hierarchical navigation trail
Skip Link
Accessibility navigation helper
Skip to main content
Main content area
Feedback Components
Components for user feedback and status indication
Alerts
Contextual feedback messages
This is an informational alert
Operation completed successfully!
Please check your input
An error occurred
Progress Indicators
Linear and circular progress bars
Tooltip
Contextual information on hover
Layout Components
Structural components for page layout
Container
Responsive container with max-width
This content is inside a container component
Grid
Responsive grid system
Grid Item 1
Grid Item 2
Grid Item 3
Card
Card container for content grouping
Card Title
This is the card content area with some example text.
Action
Accordion
Expandable content panels
Content for section 1
Content for section 2 (expanded by default)
Content for section 3
Data Display Components
Components for displaying data and information
Avatar
User avatar with image or initials
Badge
Small status indicators and labels
Primary
Success
Warning
Danger
Info
Overlay Components
Modal dialogs and dropdown menus
Modal
Dialog overlay for focused content
Open Modal
Modal Title
This is the modal content area.
Cancel
Confirm
Dropdown
Dropdown menu component
Open Menu
Option 1
Option 2
Option 3
Utility Components
Helper components for accessibility and functionality
Theme Toggle
Switch between light and dark themes
Visually Hidden
Hide content visually but keep it accessible to screen readers
This text is hidden but accessible to screen readers
The text above is hidden visually but announced by screen readers
Focus Trap
Trap focus within a container for modals and dialogs
Focus is trapped within this area
Button 1
Button 2