Pairs over primitives
thesisThe middle layer between primitives and full templates. Components that always ship together, glued in the way they actually appear in real products. The unit of reuse that other libraries ignore.
Why pairs?
Every UI library ships primitives — Button, Input, Card. Every product composes them by hand, badly, the same way, in every codebase, forever. A label paired with an input paired with a hint is the unit you actually ship. Documenting components in isolation lies about how they get used.
// What every other library ships:
import { Button } from "ui/button";
import { Input } from "ui/input";
// What you compose by hand, every project, every time:
<div className="flex flex-col gap-1.5">
<label className="text-xs uppercase tracking-wider">Email</label>
<input className="..." />
<span className="text-xs text-muted">We'll never share it.</span>
</div>
// What disenio.studio ships instead:
<FormField label="Email" hint="We'll never share it.">
<Input placeholder="hola@disenio.studio" />
</FormField>FormField
Label + control + hint/error, with proper a11y wiring (aria-describedby, aria-invalid) forwarded to the wrapped control automatically.
$pnpm dlx disenio add form-fieldToolbar
Search + filters + actions, auto-arranged. Slots are Toolbar.Search, Toolbar.Filters, Toolbar.Actions.
$pnpm dlx disenio add toolbarEmptyState
The placeholder you ship instead of a blank screen. Default illustration is theme-aware; pass art to override.
$pnpm dlx disenio add empty-stateStatCard
The dashboard pair. Label + big value + delta, with auto-tint based on the leading sign.
$pnpm dlx disenio add stat-cardFilterBar
Active-filter chips with a clear-all action. Drop above any list view.
$pnpm dlx disenio add filter-barAuthCard
The canonical sign-in form: title, providers, divider, fields, primary action, footer.
Welcome back
Sign in to continue.
$pnpm dlx disenio add auth-cardPageHeading
Eyebrow + title + description + actions. The header you put at the top of every page.
Workspace
Manage members, billing, and integrations.
$pnpm dlx disenio add page-headingPriceCard
Pricing-table cell. Name + price + features + CTA, with a featured variant for the popular tier.
Open
MIT components, layouts, pairs, CLI.
- 11 components
- 8 layouts
- 9 pairs
- 6 Feels
Pro
popularAll premium kits.
- Marketing Kit
- 30+ themes
- Figma file
- Priority support
Studio
Hosted CMS for your project.
- Theme presets
- Blog + changelog
- Custom domain
$pnpm dlx disenio add price-card
CommentRow
Avatar + author + meta + body, with optional badge and actions row.
$pnpm dlx disenio add comment-row