Inset

A sunken, padded area that sets something apart inside a page or card.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { Grid, Inset } from '@weft-js/warp'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(--warp-space-related);border:var(--warp-border-hairline) solid var(--warp-color-border);border-radius:var(--warp-radius-surface);background:var(--warp-color-surface);color:var(--warp-color-text);font-size:var(--warp-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(--warp-color-text-subtle)">{projectOf(children)!.region}</span></> : children}    </div>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { Inset } from '@weft-js/warp'<Grid min="sm" cols={2} gap="group">  <Inset><Box>pad="group", the default</Box></Inset>  <Inset pad="section"><Box>pad="section"</Box></Inset></Grid>

Build output

Use Inset to set a block of output apart inside a card.

tsx

import { Card, Inset, Stack, Text } from '@weft-js/warp'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 '@weft-js/warp'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

Use it for

Logs, code and read-only values
A summary inside a form or a card

Reach for something else

Card, when it should rise above the page
Alert, when it needs attention

Playground

Pad

groupsection

import { Inset } from '@weft-js/warp'<Inset>  <Box>The sunken area is the Inset</Box></Inset>

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp'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 warp's space scale.
`pad`	`"section" \| "group"`	—	The padding: `group`, or `section` for more.

RelatedCard Stack