Components
Browse accessible, themeable components built with Rizzo design tokens and BEM.
Components
Browse the collection of accessible, themeable components. Copy and paste into your app—same CSS and BEM for Astro, Svelte, and Vanilla.
Browse by category
Layout
Navbar
Responsive, accessible navigation bar with Search and Settings
Docs Sidebar
Documentation sidebar navigation with grouped links and active state
Dashboard
Layout with sidebar and main content area for app dashboards
Resizable
Resizable panel groups with drag handles (horizontal or vertical)
Footer
Site footer with copyright, optional site name, and optional link list (role="contentinfo")
Forms & inputs
Button
Semantic button component with variants using theme variables
Button Group
Group of buttons attached together (horizontal or vertical)
Forms
Comprehensive set of accessible form components with validation states
Input Group
Input with optional prefix and suffix addons (e.g. icon, currency, domain)
Input Otp
One-time code input: multiple digit boxes (e.g. 4–6) with auto-focus and paste support
Switch
Accessible on/off toggle with role="switch" and keyboard support
Slider
Range slider input with themed track and fill
Toggle
Toggle button with pressed/unpressed state
Toggle Group
Group of toggle buttons (single or multiple selection)
Divider
Horizontal or vertical divider line with optional label (e.g. OR)
Separator
Thin separator line (horizontal or vertical)
Label
Standalone form label; use with for/id to associate with inputs
Kbd
Keyboard key styling for shortcuts (e.g. Ctrl+K)
Data display
Cards
Flexible card component with variants, sections, and image support
Carousel
Sliding content with previous/next controls and optional dot indicators; keyboard and screen reader friendly
Chart
Data visualization (e.g. bar chart); theme-aware; integrate with Chart.js or use CSS-only bars
Table
Data table with column sorting and optional filtering
Badge
Small labels and tags for displaying status, categories, or counts
Pagination
Accessible pagination with prev/next, page numbers, ellipsis, and configurable URLs
Aspect Ratio
Enforces an aspect ratio on content (e.g. 16/9, 1/1)
Empty
Empty state with optional icon, title, description, and action
Scroll Area
Scrollable area with themed scrollbar (vertical or horizontal)
Calendar
Month grid for date display or date picker; prev/next month, keyboard and screen reader accessible
Range Calendar
Date range selection; two clicks set start and end; builds on Calendar; range-calendar-select event
Feedback
Alert
Accessible alert component with variants, dismissible functionality, and auto-dismiss
Skeleton
Loading placeholder with shimmer animation; respects reduced motion
Spinner
Accessible loading spinner with variants and sizes; respects reduced motion
Progress Bar
Progress bar with variants, sizes, optional label, and indeterminate (loading) state
Toast
Fixed position toast notifications with auto-dismiss and programmatic control
Overlay
Modal
Accessible modal/dialog component with focus trapping and keyboard navigation
Alert Dialog
Confirm/cancel dialog for destructive or important actions
Sheet
Slide-out panel (drawer) from top, right, bottom, or left
Popover
Floating panel triggered by a button
Hover Card
Floating panel that opens on hover
Context Menu
Right-click menu with items and separators
Command
Command palette (e.g. Cmd+K): searchable list of actions with keyboard navigation
Dropdown
Accessible dropdown menu with keyboard navigation, nested submenus, and menu items
Tooltip
Accessible tooltip component with positioning options and hover states
Disclosure
Other
Avatar
User avatar with image or initials fallback, sizes and circle/square shape
Copy To Clipboard
Component for copying text values to the clipboard with visual feedback
Direction
RTL/LTR wrapper: sets dir on a container for bidirectional content
Theme Switcher
Accessible theme switcher with theme icons and keyboard navigation
Font Switcher
Font pair (sans + mono) dropdown with preview and keyboard navigation
Settings
Comprehensive settings panel for theme switching and accessibility options
Search
Search with Algolia integration; Cmd+K in trigger
Icons
Reusable SVG icon components (Tabler Icons and Devicons) with interactive card grid
Sound Effects
Toggle for play sound on click (Web Audio); off by default
Component Features
All components in Rizzo CSS share these core features:
- Semantic Theming - All components use semantic CSS variables that adapt to the selected theme
- Accessibility - Full keyboard navigation, ARIA attributes, and screen reader support
- BEM Naming - Consistent class naming convention (block__element--modifier)
- Responsive - Mobile-first design with responsive breakpoints
- Theme-Aware - Automatically adapt to all 14 available themes
- WCAG AA Compliant - Proper contrast ratios and accessible color combinations