Built to endure.
Toegankelijk van nature. Één bron van waarheid voor alles wat visueel is.
Aan de slag in twee stappen.
Pakket installeren
Voeg @byzantium-design-system/core toe aan je project.
pnpm add @byzantium-design-system/coreImporteer en gebruik
Importeer componenten en stijlen in je Vue-bestand.
import { ByzButton, ByzCard, useTheme } from '@byzantium-design-system/core'
import '@byzantium-design-system/core/styles'<ByzButton variant="primary">
Aan de slag
</ByzButton>
<ByzCard padding="md" :elevated="true">
Inhoud van de card
</ByzCard>Drie lagen, één systeem.
Enkelvoudige bouwstenen zonder afhankelijkheden.
- ByzButton
- ByzInput
- ByzSelect
- ByzCheckbox
- ByzRadio
- ByzSwitch
- ByzBadge
- ByzAvatar
- ByzTag
- + 7 meer →
Samengestelde componenten met logica.
- ByzModal
- ByzDrawer
- ByzTabs
- ByzAccordion
- ByzTable
- ByzStepper
- ByzDropdown
- ByzToast
- ByzPopover
- + 5 meer →
Volledige pagina-patronen klaar voor productie.
- ByzHero
- ByzNavbar
- ByzFooter
- ByzSidebar
- ByzPageHeader
- ByzEmptyState
Gebouwd voor de lange termijn.
Semantische tokens
60+ design tokens als CSS custom properties — --byz-* variabelen voor kleur, spacing, typografie, motion, schaduwen en z-index.
Accessibility first
ARIA-patronen, toetsenbordnavigatie, focus trap, live regions en touch targets van 44px ingebakken in elk component.
Dark & light mode
Imperial Dark als standaard. Schakel naar licht via useTheme(). Voorkeur opgeslagen in localStorage.
TypeScript native
Volledige TypeScript strict mode. Typed props, emits en composables. Automatisch gegenereerde .d.ts declaraties.
Vue 3 & Vite
Composition API, script setup, Teleport en Transition. Gebouwd met Vite voor snelle HMR.
Prefers-reduced-motion
Alle animaties respecteren prefers-reduced-motion via CSS media queries.