Vanilla Components
Interactive examples and copyable HTML for Rizzo CSS components.
Component Library
Each component has a Vanilla page with copyable HTML and, where available, a live demo. Use the same BEM classes in your own HTML once Rizzo CSS is loaded. Interactive behavior (modal, dropdown, tabs, search, copy-to-clipboard, navbar mobile, etc.) is wired by js/main.js when you use the Full scaffold; tooltips use CSS only (:hover and :focus-within).
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
Vanilla HTML + BEM usage.
Resizable
Resizable panel groups (resizable__pane-group, resizable__pane, resizable__handle); JS for drag
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
Vanilla HTML + BEM usage.
Switch
Accessible on/off toggle with role="switch", keyboard support, and themeable track/thumb
Slider
Range slider with slider__input, slider__track, slider__fill; JS to sync fill width
Toggle
Toggle button with aria-pressed; use toggle--pressed when pressed
Toggle Group
Group of toggle buttons (toggle-group, toggle-group--vertical)
Divider
Horizontal or vertical divider line with optional label (e.g. OR)
Separator
Thin separator line (horizontal or vertical); use separator--vertical for vertical
Label
Standalone form label; use 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; JS for prev/next
Chart
Vanilla HTML + BEM usage.
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
Wrapper that enforces an aspect ratio on content (e.g. 16/9)
Empty
Empty state with optional icon, title, description, and action slot
Scroll Area
Scrollable area with themed scrollbar (scroll-area, scroll-area__viewport)
Calendar
Month grid for choosing a date; prev/next month, selection; listen for calendar-select (YYYY-MM-DD)
Range Calendar
Date range selection; two clicks set start and end; listen for range-calendar-select (detail.start, detail.end)
Feedback
Alert
Accessible alert component with variants, dismissible functionality, and auto-dismiss
Skeleton
Loading placeholder with optional shimmer; use skeleton--text, skeleton--circle, skeleton--rect; role="status" and aria-label for a11y
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 (role="alertdialog"); open/close via JS
Sheet
Slide-out panel (drawer); open/close via JS
Popover
Vanilla HTML + BEM usage.
Hover Card
Floating panel that opens on hover; trigger needs data-hover-card-trigger; JS for open/close
Context Menu
Right-click menu; use context-menu__item and context-menu__separator; JS for open/position
Command
Vanilla HTML + BEM usage.
Dropdown
Accessible dropdown menu with keyboard navigation, nested submenus, separators, and menu items (live demos use same Astro component)
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
Vanilla HTML + BEM usage.
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 component with Algolia integration and live filtering
Icons
Reusable SVG icon components (Tabler Icons and Devicons) with interactive card grid and copy functionality
Sound Effects
Toggle for play sound on click (Web Audio); off by default