documentation
components, props, and live specimens. choose a section.
start here
install the floor, place the smallest composition, then add state and a real relation. the catalog below keeps the full component surface available when you need it.
one stylesheet. one public barrel.
npm install @hyvnt/hyvui
import "@hyvnt/hyvui/styles.css";a surface gives the parts somewhere to work.
<Card>
<Text variant="heading" as="h2">operator panel</Text>
<Button variant="primary">activate</Button>
</Card>use the component props for variants. use native attributes for identity, form behavior, and accessibility.
read input statesthe index
choose a section. examples and props sit beside the specimen.
change the weight. keep the theme.
weight changes density and voice. theme changes palette, motion, and ornament. try both.
set weight and theme separately. components stay the same. import the theme tokens before using hextech or arcane.
import '@hyvnt/hyvui/tokens/hextech.css' import '@hyvnt/hyvui/tokens/arcane.css'text and surfaces
heading tier
body text. short lines. leave room between them.
use italics for a side note.
caption register
label + divider primitives
surface
surface
surface
stack, grid, card, panel
use card for a repeated item or a small group.
use grid for columns. pass equal column count or a template.
stack places children in a row or column and applies the gap.
use panel for a large section, form, or table.
data, status, narrative
show the state the user needs. hide the rest.
| 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">operator panel</Text>
<Button variant="primary">activate</Button>
</Card>controlled fields and actions
status, alerts, and system voice
no entries
no records yet.
signal deferred
try again when the channel is steady.
modal, drawer, popover, action bar
ornament and atmosphere
layers in depth
move the pointer over the card.
scene patterns
centered register
one message. centered. no side rail.
narrative scene
copy stays narrow. the open side holds an image or specimen.
archive
archive item one
archive item two