Components — Svelte
Svelte component library.
Component library
These components are built with Svelte and use the same Rizzo CSS classes and variables. Each page includes live examples and usage snippets.
Every framework: Each component also has an Astro doc page (live demos + “Using classes” HTML). Vanilla uses the same HTML and BEM from the Astro Usage sections. Use the framework switcher at the top to toggle between Astro and Svelte docs.
Available components
Accordion
Expandable panels with single or multiple open
Alert
Alert with variants, dismissible and auto-dismiss
Avatar
Avatar with image or initials, sizes and shapes
Badge
Small labels and tags with variants and pill option
Breadcrumb
Breadcrumb navigation with separator options
Button
Semantic button with variants using theme variables
Cards
Flexible card with variants and sections
Copy to Clipboard
Copy text with visual feedback
Divider
Horizontal or vertical divider with optional label
Dropdown
Menu with items, links, submenus, and actions
Forms
FormGroup, Input, Checkbox, Textarea, Select, Radio
Icons
Reusable SVG icon components (Tabler, Devicons); Astro reference, same CSS in Svelte
Modal
Dialog with overlay, focus trap, and sizes
Navbar
Responsive navigation with dropdowns and search; Astro reference, same BEM in Svelte
Pagination
Page navigation with first/last and ellipsis
Progress Bar
Progress bar with variants and indeterminate state
Search
Search with Algolia; Cmd+K/Ctrl+K to open or close; Astro reference
Settings
Theme, font size, and accessibility panel; Astro reference, same CSS
Spinner
Loading spinner with variants and sizes
Table
Data table with sorting and optional filter
Tabs
Tabs with default, pills, and underline variants
Theme Switcher
Theme dropdown with Preference (System), Dark/Light groups, preview panel (current theme by default, hover to preview); Astro reference
Toast
Positioned alerts with dismiss and auto-dismiss
Tooltip
Tooltip with positioning options
Component features
All components share: semantic theming, accessibility (keyboard + ARIA), BEM naming, responsive design, and WCAG AA compliance.