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.
Available Components
Navbar
Responsive, accessible navigation bar with integrated settings button
Settings
Comprehensive settings panel for theme switching and accessibility options
Theme Switcher
Accessible theme switcher with theme icons and keyboard navigation
Button
Semantic button component with variants using theme variables
Badge
Small labels and tags for displaying status, categories, or counts
Accordion
Collapsible sections with single/multiple open and keyboard navigation
Breadcrumb
Navigation breadcrumbs with separator customization and responsive truncation
Pagination
Accessible pagination with prev/next, page numbers, ellipsis, and configurable URLs
Progress Bar
Progress bar with variants, sizes, optional label, and indeterminate (loading) state
Spinner
Accessible loading spinner with variants and sizes; respects reduced motion
Avatar
User avatar with image or initials fallback, sizes and circle/square shape
Divider
Horizontal or vertical divider line with optional label (e.g. OR)
Table
Data table with column sorting and optional filtering
Icons
Reusable SVG icon components (Tabler Icons and Devicons) with interactive card grid and copy functionality
Copy to Clipboard
Component for copying text values to the clipboard with visual feedback
Forms
Comprehensive set of accessible form components with validation states
Cards
Flexible card component with variants, sections, and image support
Modal
Accessible modal/dialog component with focus trapping and keyboard navigation
Alert
Accessible alert component with variants, dismissible functionality, and auto-dismiss
Toast
Fixed position toast notifications with auto-dismiss and programmatic control
Search
Search component with Algolia integration and live filtering
Tooltip
Accessible tooltip component with positioning options and hover states
Dropdown
Accessible dropdown menu with keyboard navigation, nested submenus, separators, and menu items (live demos use same Astro component)
Tabs
Accessible tabs component with keyboard navigation and ARIA tab pattern