Design System

Tyrolium UI

Catalogue of components from the tyrolium-ui library. Each page presents a component with its tag name, properties and an interactive preview.
Brand
Brand GuidelinesTypography & Colourstyrolium.frMedia Kit
Showcase
<tyro-ui-navbar>Navbar<tyro-ui-subnav>Subnav<tyro-ui-footer>Footer<tyro-ui-cta>CTA
Dashboard - Structure
<tyro-ui-dashboard-layout>Dashboard Layout<tyro-ui-page-header>Page Header<tyro-ui-bento-card>Bento Card<tyro-ui-button-bento>Button Bento<tyro-ui-data-table>Data Table
Dashboard - Controls
<tyro-ui-button>Button<tyro-ui-button-group>Button Group<tyro-ui-switch>Switch<tyro-ui-checkbox>Checkbox<tyro-ui-select>Select<tyro-ui-text-field>Text Field
Dashboard - Feedback
<tyro-ui-alert>Alert<tyro-ui-snackbar>Snackbar<tyro-ui-progress-bar>Progress Bar<tyro-ui-chip>Chip<tyro-ui-skeleton>Skeleton
Dashboard - People
<tyro-ui-avatar>Avatar<tyro-ui-avatar-group>Avatar Group<tyro-ui-user-chip>User Chip<tyro-ui-bar-chart>Bar Chart
Modal
<tyro-ui-auth-modal>Auth Modal<tyro-ui-confirm-modal>Confirm Modal
Page
<tyro-ui-not-found>Not Found<tyro-ui-forbidden>Forbidden<tyro-ui-gone>Gone<tyro-ui-login>Login<tyro-ui-auth-card>Auth Card
Other
<tyro-ui-easter-egg>Easter Egg