documentation
every component, live. pick a section on the left.
everything in one place
all components live, with props and examples. scroll or jump via the sidebar.
separate density and motif
switch weights and themes to see how components and tokens respond. weights shift density and voice. themes shift palette, motion, and ornament.
apply weight and theme independently. no component changes required. tokens do the work. hextech and arcane require their respective css imports.
import '@hyvnt/hyvui/tokens/hextech.css' import '@hyvnt/hyvui/tokens/arcane.css'type, tone, and base surfaces
heading tier
body text. short lines, deliberate spacing. nothing squeezed together.
italics are for the quieter line.
caption register
label + divider primitives
surface
surface
surface
stack, grid, card, panel
contained surfaces. good for repeatable rows and grid items.
column-based layouts. pass a number for equal columns or a full template string.
flexbox with a gap. vertical or horizontal, no visual treatment.
full-section container for forms, data tables, and anything that needs room.
data, status, narrative
the interface is a quiet contract between what's there and what's needed.
| component | role | status |
|---|---|---|
| Button | primary action | stable |
| Panel | section container | stable |
| StatusLine | system voice | calibrated |
| DepthStage | spatial stack | active |
<script lang="ts">
import { Button, Card, Text } from '$lib';
</script>
<Card>
<Text variant="heading" as="h2">calm surface</Text>
<Button variant="primary">activate</Button>
</Card>controlled fields and actions
status, alerts, and system voice
no entries
awaiting first signal.
signal deferred
retry from stable ground.
modal, drawer, popover, action bar
ornament and atmosphere
layered spatial system
move the pointer over it.
full-page compositions
centered register
one thing to say. centered. no distractions.
narrative scene
narrow copy on the left, open canvas on the right. good for about pages and story sections.
archive
archive item one
archive item two