Data

Card & separator.

A quiet frame for related content.

LIVE PREVIEWTry it. It works.

Interface studiesDraft

One quiet frame for the things that belong together.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/card.json

Registry setup · Open the playground

Usage

<Card><h3>Project details</h3><Separator /><p>One place for the essentials.</p></Card>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Card forwards div props; Separator forwards hr props. Choose heading levels that fit the consuming page. Containers impose no layout or action behaviour.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.