Components

Inset

A faint box set into a card: a tile for one figure, or a bordered panel for a result, tinted for good or bad news.

Car loan

$32,000 at 8.5% · 5 years

Next payment: $656
Debt-free: Mar 2031

Paying $200 more a month saves $2,140 in interest.

Import

import { Inset } from '@rinzai/zen';

API reference

<Inset>

A faint box set into a card or dialog: a small tile for one figure (e.g. "Next EMI"), or with bordered, a panel for a result or a note. tone tints it for good or bad news. With asChild, your own element (a <p>, a status region) gets its look.

Prop	Type	Default
`asChild` Put the look on your single child element instead of a <div>.	`boolean`	`—`
`bordered` A bordered panel instead of a small tile.	`boolean`	`false`
`tone`	`"default" \| "negative" \| "positive"`	`default`