Component Library
A comprehensive collection of 30 reusable components built with the Festa Design System. Each component follows atomic design principles and includes full accessibility support, dark mode, and responsive behavior.
Atoms
17 componentsBasic building blocks that cannot be broken down further. These are the foundation of our design system.
Button
Versatile button component with 4 variants (primary, secondary, outline, ghost) and 3 sizes.
Logo
Festa Design Studio logo with light and dark variants, responsive sizing.
Callout
Highlighted content boxes with 5 types: info, warning, danger, success, and tip.
Code Block
Syntax-highlighted code display with copy-to-clipboard functionality.
Dark Mode Toggle
Sun/moon toggle button for switching between light and dark themes.
Icon
SVG icon component with customizable size and color from Festa palette.
Badge
Small status indicators with variants and sizes for labels and tags.
Label
Form labels with required indicator and Festa typography styling.
Image
Responsive image component with lazy loading and optional captions.
Blockquote
Styled quotation block with citation and author attribution.
Divider
Horizontal separator with solid and dashed variants.
Task List
Checkbox list items with Festa color styling and hover states.
Mermaid Diagram
Wrapper for Mermaid.js diagrams with Festa color theming.
Link
Styled links with variants (inline, card, button) and external indicators.
Alert
Dismissible notification component with 5 variants, titles, and custom icons.
Skeleton
Loading placeholder with 5 shape variants and pulse animation.
Spinner
Animated loading spinner with 4 sizes and 3 color variants.
Molecules
10 componentsCombinations of atoms working together as a cohesive unit with specific functionality.
Nav Item
Navigation list item with active state, icons, and nested child support.
Search Box
Search input with Alpine.js functionality and keyboard shortcuts (Cmd+K).
Mobile Menu Button
Hamburger menu toggle with animated open/close states.
Breadcrumbs
Hierarchical navigation trail with structured data for SEO.
Page Navigation
Previous/next page links with arrow icons and disabled states.
Table of Contents
Auto-generated TOC with active section tracking and smooth scrolling.
Collapsible
Expandable content section with Alpine.js toggle and animations.
Definition List
Term and definition pairs with horizontal and vertical layouts.
Table
Responsive data table with hover states and striped rows option.
Video Embed
Responsive video player for Vimeo/YouTube with 16:9 aspect ratio.
Organisms
3 componentsComplex components composed of molecules and atoms, forming distinct sections of the interface.