> Text
Themed terminal-style text with color, font, and CRT/LED display variants. Renders as any of several semantic tags via the tag prop.
PREVIEW
// primary color
// dim color
// danger color
// warn color
// success color
mono font
vt font
heading
<script>
import { Text } from 'mukade-ui';
</script>
<Text tag="h1" color="primary" glow>SYSTEM ONLINE</Text>
<Text color="dim" size="0.8rem">last sync: 04:12</Text>
<Text variant="crt">scanline text</Text> - --mukade-text-accent inherits. Setting it on an ancestor recolors every descendant <Text>.
- Because crt and glow derive from currentColor, the accent flows into the scanline and shadow automatically.
> Avatar
Displays a user's profile image with an optional online-status dot and name/subtitle block. Falls back to the first letter of name when no image is set.
PREVIEW
<script>
import { Avatar } from 'mukade-ui';
</script>
<Avatar profile="/me.png" name="KAEDE" sub="operator" online />
<!-- Custom status indicator via children -->
<Avatar name="K">
<span>●</span>
</Avatar> - The profile area keeps a 1 / 1 aspect ratio at any size.
- --mukade-avatar-accent inherits; scope it to a single avatar via style if needed.
> Badge
A small status indicator. Renders as a standalone tag, or as an overlay anchored to a corner of wrapped content.
PREVIEW
<script>
import { Badge } from 'mukade-ui';
</script>
<!-- Tag form -->
<Badge variant="success" label="ONLINE" />
<!-- Overlay form -->
<Badge count={12} max={9} position="top-right">
<Avatar name="K" />
</Badge> - --mukade-badge-accent inherits — setting it on an ancestor recolors all descendant badges.
- The overlay item has pointer-events: none and never intercepts clicks on wrapped content.
> Divider
A horizontal or vertical separator line, optionally with a centered label.
PREVIEW
<script>
import { Divider } from 'mukade-ui';
</script>
<Divider label="SECTION" />
<Divider orientation="vertical" weight="2px" /> - The vertical form uses writing-mode: vertical-lr for the label; it needs a parent with a defined height to stretch.
> Container
A minimal block wrapper that spans the full width of its parent and centers itself horizontally. Adds no padding or visual styling.
PREVIEW
// Container centers content (margin: 0 auto) and spans full width
<script>
import { Container } from 'mukade-ui';
</script>
<Container style="max-width: 60rem;">
<!-- page content -->
</Container> - Defaults to width: 100% with margin: 0 auto. Constrain it with max-width via style/class.
- Adds no padding or visual styling — it is purely structural.
> Stack
A flexbox layout primitive for arranging children in a row or column with gap, alignment, and wrapping control.
PREVIEW
// direction="row" (default)
// direction="column"
// justify="between"
<script>
import { Stack } from 'mukade-ui';
</script>
<Stack direction="column" gap="0.5rem" align="stretch">
<Button>[A]</Button>
<Button>[B]</Button>
</Stack> - align and justify use friendly keywords that map to the corresponding flexbox values.
> ScrollArea
A vertical overflow container with a custom terminal-style scrollbar and an optional sticky header that can react to scroll direction.
PREVIEW
// LOG
// line 1
// line 2
// line 3
// line 4
// line 5
// line 6
// line 7
// line 8
// line 9
// line 10
// line 11
// line 12
// line 13
// line 14
// line 15
// line 16
// line 17
// line 18
// line 19
// line 20
<script>
import { ScrollArea } from 'mukade-ui';
</script>
<ScrollArea maxHeight="20rem" variant="sticky">
{#snippet header()}
<Text>LOG</Text>
{/snippet}
<!-- long content -->
</ScrollArea> - The native scrollbar is hidden; a synthetic thumb tracks the viewport and updates via a ResizeObserver.
- hide retracts the header as you scroll down and restores it as you scroll up; natural lets it scroll away with the content.
- This very sidebar and the docs pane you're reading are each an independent ScrollArea — scroll one without moving the other.
> Panel
A framed card container with optional header/footer regions and a row of status dots. The staple building block for terminal-style windows.
PREVIEW
SYSTEM
// header + footer snippet
PROGRESS
// header with dots indicator
// soft-line variant
<script>
import { Panel } from 'mukade-ui';
</script>
<Panel width="20rem" dots={{ index: 2, max: 3 }}>
{#snippet header()}
<span>SESSION</span>
{/snippet}
<!-- body -->
{#snippet footer()}
<Button>[CONFIRM]</Button>
{/snippet}
</Panel> - dots only render when a header snippet is present.
- Header/footer tint blends --mukade-panel-accent into --mukade-panel-bg, so both hooks compose cleanly.
> Section
A semantic content block with an optional terminal-style title row, prefixed with a > marker.
PREVIEW
TITLE
// Section renders a semantic block with an optional title
<script>
import { Section } from 'mukade-ui';
</script>
<Section>
{#snippet title()}
<Text tag="h2">DIAGNOSTICS</Text>
{/snippet}
<!-- section body -->
</Section> - The > prefix bar uses --mukade-primary for its accent border and text.
> Button
A clickable button with five color variants and independent size/width control. Extends all native button element attributes.
PREVIEW
<script>
import { Button } from 'mukade-ui';
</script>
<Button variant="primary" onclick={submit}>[CONFIRM]</Button>
<Button variant="ghost" disabled>[CANCEL]</Button>
<Button width="100%" size="1.5rem">[BIG]</Button> - size controls font size (element scale); width controls horizontal length. They are separate axes.
- disabled dims the button and blocks the active-press transform.
- Every variant presses with a subtle scale(0.94) on :active.
> Checkbox
A boolean checkbox with an indeterminate state and optional label. Two-way bindable via checked.
PREVIEW
<script>
import { Checkbox } from 'mukade-ui';
let agreed = $state(false);
</script>
<Checkbox label="ACCEPT" bind:checked={agreed} />
<Checkbox label="PARTIAL" indeterminate /> - Keyboard focus is shown via :focus-visible on the hidden input, drawn as an outline on the styled box.
- size is remapped from the native size attribute (meaningless for checkboxes) to a CSS dimension.
> Input
A single-line text input with outlined, filled, or borderless variants. Two-way bindable via value.
PREVIEW
<script>
import { Input } from 'mukade-ui';
let name = $state('');
</script>
<Input placeholder="username" bind:value={name} />
<Input variant="filled" type="password" placeholder="password" /> - :focus brightens the border via --mukade-bright; :disabled mutes background and border.
> Textarea
A multi-line text input with configurable size, an optional resize handle, and a custom scrollbar.
PREVIEW
<script>
import { Textarea } from 'mukade-ui';
let note = $state('');
</script>
<Textarea placeholder="log entry..." bind:value={note} width="24rem" height="8rem" resizing /> - resizing defaults to false (fixed size); set it to allow manual resizing.
> Toggle
A switch-style boolean input with an optional label. Two-way bindable via checked.
PREVIEW
<script>
import { Toggle } from 'mukade-ui';
let power = $state(true);
</script>
<Toggle label="POWER" bind:checked={power} />
<Toggle label="SCALED" size="1.5rem" /> - Keyboard focus is shown via :focus-visible on the hidden input, drawn as an outline on the track.
> TextField
A labeled text input with a floating, terminal-style animated label. Comes in outlined and filled variants.
PREVIEW
<script>
import { TextField } from 'mukade-ui';
let email = $state('');
</script>
<TextField label="EMAIL" type="email" bind:value={email} name="email" required />
<TextField variant="filled" label="PASSWORD" type="password" width="20rem" /> - Supplying id is honored and kept in sync with the label's for; otherwise a stable SSR-safe id is generated.
- User onfocus/onblur handlers are preserved — internal focus tracking composes with, not replaces, yours.
- The label "types" one character at a time when it floats; unlabeled fields show the placeholder immediately.
> Select
A dropdown selector. Compose it with SelectOption children. Closes on outside click or the Escape key.
PREVIEW
<script>
import { Select, SelectOption } from 'mukade-ui';
let region = $state('');
</script>
<Select bind:selected={region} placeholder="region">
<SelectOption key="kr" label="KOREA" />
<SelectOption key="jp" label="JAPAN" />
</Select> - Provides context to child SelectOptions; use them rather than raw options.
- Outside-click and Escape listeners are attached only while open, and removed on close.
- Raise --mukade-select-z-index when the dropdown must sit above other stacked layers (e.g. inside a modal).
- SelectOption is required inside a Select — it registers its key/label on mount and follows the parent's accent/bg colors.
> Alert
A status message box with an icon, title, and optional body. Four status variants convey severity.
PREVIEW
<script>
import { Alert } from 'mukade-ui';
</script>
<Alert variant="success" title="SYNC COMPLETE" />
<Alert variant="danger" title="CONNECTION LOST">
retrying in 5s...
</Alert> - Each variant maps to a semantic status color; info/success render with role="status", warn/danger with role="alert".
- danger uses a filled scanline background and bold text so a lone danger alert reads as severe.
- An auto-selected icon (i, ✓, ⚠, !) precedes the title per variant.
> Table
A data table. Provide column headers via columns, and rows by composing TableRow / TableCell children.
PREVIEW
| id | name | status |
|---|---|---|
| 01 | mukade-core | online |
| 02 | mukade-ui | online |
| 03 | mukade-net | idle |
<script>
import { Table, TableRow, TableCell } from 'mukade-ui';
</script>
<Table columns={['ID', 'NAME', 'STATUS']} width="30rem">
<TableRow>
<TableCell>01</TableCell>
<TableCell>KAEDE</TableCell>
<TableCell>ONLINE</TableCell>
</TableRow>
</Table> - When width is set, the table clips overflow and uses a fixed layout; otherwise it scrolls horizontally up to --mukade-table-max-size.
- The native scrollbar is hidden for a cleaner terminal look.
- TableRow renders a bottom border between rows; the last row's border is removed automatically.
- TableCell overflow is clipped with an ellipsis and white-space: nowrap; set width to control truncation.