Components
Every component is built on Radix UI primitives for full keyboard navigation, focus management, and ARIA semantics out of the box. All visual styles are driven exclusively by --avila-* CSS custom properties — no hardcoded values, no style overrides needed.
All Components
Select a component to view its props, variants, and usage examples.
Button
Six variants — primary, outline, dark, teal, cobalt, and marigold — with consistent sizing and focus states.
Card
Surface container for grouping related content, available in light and elevated variants.
Input
Text field with label, helper text, and error state — fully keyboard accessible.
Badge
Compact status label in semantic colors: neutral, success, warning, and error.
Data Table
Sortable, paginated table component built for structured data display at any scale.
Want to explore variants and states interactively?
Open live Storybook ↗