Design System · v0.5.0

Built to endure.

Toegankelijk van nature. Één bron van waarheid voor alles wat visueel is.

36Componenten
60+Design tokens
4Composables
A11YAccessibility first
Installatie

Aan de slag in twee stappen.

01

Pakket installeren

Voeg @byzantium/core toe aan je project.

pnpm add @byzantium/core
02

Importeer en gebruik

Importeer componenten en stijlen in je Vue-bestand.

import { ByzButton, ByzCard, useTheme } from '@byzantium/core'
import '@byzantium/core/styles'
<ByzButton variant="primary">
  Aan de slag
</ByzButton>

<ByzCard padding="md" :elevated="true">
  Inhoud van de card
</ByzCard>
Architectuur

Drie lagen, één systeem.

Primitives
16

Enkelvoudige bouwstenen zonder afhankelijkheden.

  • ByzButton
  • ByzInput
  • ByzSelect
  • ByzCheckbox
  • ByzRadio
  • ByzSwitch
  • ByzBadge
  • ByzAvatar
  • ByzTag
  • + 7 meer →
Patronen
6

Volledige pagina-patronen klaar voor productie.

  • ByzHero
  • ByzNavbar
  • ByzFooter
  • ByzSidebar
  • ByzPageHeader
  • ByzEmptyState
Kenmerken

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.

Componenten

Klaar om te gebruiken.

Button
Input
Gebruik een geldig e-mailadres
Badge & Progress
DefaultSuccessError
Voortgang72%
Alert