Components — Astro

Component library with usage examples and live demos

Component Library

Rizzo CSS includes a comprehensive set of accessible, theme-aware components. Each component is built with semantic variables, follows BEM naming conventions, and includes full keyboard navigation and ARIA support.

Documentation for every framework: Each component has an Astro page below (live demos + usage), a Svelte page at /docs/svelte/components, and Vanilla at /docs/vanilla/components with copyable HTML and interactive examples. Use the framework switcher to toggle. This site has 24 component doc pages; the CLI and package offer 25 copyable components (form controls are separate files in the scaffold).

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

CopyToClipboard

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 with Algolia integration; Cmd icon + K in trigger (same size as search icon); same live example on Astro, Svelte, and Vanilla

Tooltip

Accessible tooltip component with positioning options and hover states

Dropdown

Accessible dropdown menu with keyboard navigation, nested submenus, separators, and menu items

Tabs

Accessible tabs component with keyboard navigation and ARIA tab pattern

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