displaytexulinot agent-emittableapp
Box
box
A panel or region with layout options and token-based surface or color-reference fill.
One token contract, every theme. Display components take color, radius, density and state styling from the --tx-* token contract — the same variables the theme strip below overrides — so a theme swap re-colors them without per-component fixes.
Live examples
Bordered panel
Bordered panel
Loading demo…
Muted region
Muted region
App header (no card chrome)
App header (no card chrome)
Brand logo tile
Brand logo tile
Page canvas
Page canvas
Translucent sticky header
Translucent sticky header
Dashed panel
Dashed panel
In your theme
This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.
Violet
backgroundsurfaceprimaryaccentborder
Monochrome
backgroundsurfaceprimaryaccentborder
Accessible Dark Contrast
backgroundsurfaceprimaryaccentborder
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
as | enum (div, section, article, aside, header, footer) | no | "div" | — |
padding | enum (none, sm, md, lg, xl) | no | "md" | — |
radius | enum (none, sm, md, lg, xl, full) | no | "md" | — |
border | enum (none, default, strong, block-start, block-end, inline-start, inline-end, dashed) | no | "none" | All sides, one logical side (block-start, block-end, inline-start, inline-end), or dashed |
elevation | enum (none, sm, md, lg) | no | "none" | — |
surface | enum (transparent, default, muted, subtle, elevated, canvas, primary, brand, success, warning, destructive, info, primary-soft, translucent) | no | "transparent" | The surface (the variant axis): primary is solid, the semantic tones and primary-soft use soft token fills with AA ink, and translucent is glass for sticky headers |
fill | enum (none, chart-1, chart-2, chart-3, chart-4, chart-5, chart-6, chart-7, chart-8, primary, secondary, success, warning, destructive, info, neutral) | no | "none" | Optional closed token reference (chart-1 through chart-8 or a semantic color role); never a CSS color or arbitrary value |
class | string | no | — | — |
children | slot | no | — | The panel content |
Keyboard
| Key | Action |
|---|---|
a | Not interactive. Use as="section" or "aside" with a heading for a landmark-like region. |
Accessibility
- Not interactive. Use as="section" or "aside" with a heading for a landmark-like region.
Evidence for box
Latest committed gates for box (as of 2026-10-23). Static snapshot — not live CI.
Behavior
n/ano behavior scenario
No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).
Size (gzip)
texuli/box · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Frame a group of content as a bordered or filled panel
- Space and surface a region in a locked prototype, where visual utilities are refused
Don’t use when
Prefer another component
- A clickable surface (use card with href)
- Page layout (use a layout)