Inset
A sunken, padded area that sets something apart inside a page or card.
Preview
tsx
import { Grid, Inset } from '@kerf-js/veneer'export function Pads() { return ( <Grid min="sm" cols={2} gap="group" > <Inset> <Box>pad="group", the default</Box> </Inset> <Inset pad="section"> <Box>pad="section"</Box> </Inset> </Grid> )}type Status = | 'Live' | 'Building' | 'Failed' | 'Paused'const PROJECTS: { id: string name: string owner: string region: string status: Status deploys: number uptime: number latency: number cost: number updated: string}[] = [ { id: 'storefront', name: 'storefront', owner: 'Priya Raman', region: 'eu-west', status: 'Live', deploys: 412, uptime: 99.98, latency: 84, cost: 1240, updated: '2026-10-31', }, { id: 'checkout', name: 'checkout', owner: 'Tomás Oliveira', region: 'eu-west', status: 'Live', deploys: 288, uptime: 99.95, latency: 112, cost: 980, updated: '2026-10-31', }, { id: 'search-api', name: 'search-api', owner: 'Lena Fischer', region: 'us-east', status: 'Building', deploys: 196, uptime: 99.91, latency: 146, cost: 1610, updated: '2026-10-30', }, { id: 'billing', name: 'billing', owner: 'Mara Lindqvist', region: 'us-east', status: 'Live', deploys: 154, uptime: 99.99, latency: 73, cost: 720, updated: '2026-10-29', }, { id: 'mobile-bff', name: 'mobile-bff', owner: 'Sam Okafor', region: 'ap-south', status: 'Failed', deploys: 233, uptime: 99.42, latency: 208, cost: 860, updated: '2026-10-29', }, { id: 'notifier', name: 'notifier', owner: 'Jun Tanaka', region: 'eu-north', status: 'Live', deploys: 97, uptime: 99.97, latency: 58, cost: 310, updated: '2026-10-27', }, { id: 'reports', name: 'reports', owner: 'Noor Haddad', region: 'us-west', status: 'Paused', deploys: 41, uptime: 99.8, latency: 321, cost: 190, updated: '2026-10-22', }, { id: 'edge-cache', name: 'edge-cache', owner: 'Jun Tanaka', region: 'global', status: 'Live', deploys: 318, uptime: 100, latency: 21, cost: 1430, updated: '2026-10-31', }, { id: 'auth', name: 'auth', owner: 'Mara Lindqvist', region: 'eu-west', status: 'Live', deploys: 176, uptime: 99.99, latency: 66, cost: 540, updated: '2026-10-28', }, { id: 'ingest', name: 'ingest', owner: 'Lena Fischer', region: 'us-east', status: 'Live', deploys: 264, uptime: 99.93, latency: 131, cost: 2120, updated: '2026-10-30', },]const min = 60_000const BOX = 'display:grid;align-content:center;' + 'gap:2px;' + 'padding:var(--veneer-space-related);' + 'border:var(--veneer-border-hairline) ' + 'solid var(--veneer-color-border);' + 'border-radius:' + 'var(--veneer-radius-surface);' + 'background:var(--veneer-color-surface);' + 'color:var(--veneer-color-text);' + 'font-size:var(--veneer-text-caption-size);' + 'min-inline-size:0'const projectOf = (c: unknown) => { const n = Number(typeof c === 'function' ? c() : c) return Number.isInteger(n) && n > 0 ? PROJECTS[(n - 1) % PROJECTS.length] : undefined}function Box({ tall, children, ...rest}: { tall?: number children?: unknown [attr: string]: unknown}) { return ( <div style={ tall ? `${BOX};min-block-size:${tall}px` : BOX } {...rest} > {projectOf(children) ? ( <> <strong>{projectOf(children)!.name}</strong> <span style={ 'color:var(--veneer-color-text-subtle)' } > {projectOf(children)!.region} </span> </> ) : ( children )} </div> )}Installation
npm install @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Pad
Codeupdates as you change the controls
import { Inset } from '@kerf-js/veneer'<Inset> <Box>The sunken area is the Inset</Box></Inset>Usage
tsx
import { Inset } from '@kerf-js/veneer'Build output
Use Inset to set a block of output apart inside a card.
tsx
import { Card, Inset, Stack, Text } from '@kerf-js/veneer'export function BuildLog() { return ( <Card title="Build output"> <Inset> <Stack gap="hair"> {LOG.map((line) => ( <Text key={line} role="code" > {line} </Text> ))} </Stack> </Inset> </Card> )}const LOG = [ '16:42:01 Cloning 9f3ac21', '16:42:09 Installing dependencies', '16:42:48 Building storefront', '16:44:03 Live in eu-west',]An invoice summary
Use Inset to set a summary apart from the text around it.
tsx
import { Inset, Row, Stack, Text } from '@kerf-js/veneer'export function InvoiceTotal() { return ( <Stack gap="related"> <Text role="heading">Next invoice</Text> <Text subtle> Billed on 1 November to the card ending 4242. </Text> <Inset> <Stack gap="tight"> <Row justify="between"> <Text subtle>Compute</Text> <Text>$7,410</Text> </Row> <Row justify="between"> <Text subtle>Bandwidth</Text> <Text>$1,120</Text> </Row> <Row justify="between"> <Text subtle>Seats</Text> <Text>$400</Text> </Row> <Row justify="between"> <Text role="label">Total</Text> <Text role="label">$8,930</Text> </Row> </Stack> </Inset> </Stack> )}When to use
Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | unknown | — | What it contains. |
as | "div" | "section" | "article" | "main" | "header" | "footer" | "nav" | "… | — | The element it renders as. |
gap | "section" | "none" | "hair" | "tight" | "related" | "group" | "page" | — | The space between children, from veneer's space scale. |
pad | "section" | "group" | — | The padding: group, or section for more. |