Blocks

Composed UI sections (hero, pricing, cards) that bake good design into your app — install one command, no props to wire up.

What blocks are

Primitives (Button, Card, Input) are unstyled toolkit pieces. They give you flexibility but no opinion. Blocks are the missing layer on top — composed sections with hardcoded copy, layout, and typography rhythm. Drop one in, then edit the copy in place.

Blocks follow the shadcn philosophy: copy-paste source, no runtime configuration, you own the file.

Layers

Primitives  →  Blocks  →  Pages
(Button)       (FeatureCard)   (Landing)

Install

bun x bosia@latest add block cards/feature

Files land in src/lib/blocks/<category>/<name>/. Primitive dependencies (Card, Button, etc.) install automatically.

Page blocks don't include a navbar

Page-level blocks (heros, cards, sections) don't carry their own site navbar — that's deliberate. The navbar, footer, and sidebar belong in your +layout.svelte so they render once across every route. Pair a page block with a navbar block placed in the layout; dropping a hero on a page and a navbar in the layout gives you exactly one navbar, not two.

Available blocks

100+ blocks across six categories. Install any with bun x bosia@latest add block <category>/<name>.

Heros (17)

Full-bleed landing hero sections, one per vertical: agency · app · apparel · bags · bookstore · campus · consulting · course · delivery · home-goods · lookbook · new-drop · product · restaurant · sale · shop-split · toys

  • Standard — classic light layouts: centered, split, search-led, minimal, two-tier
  • App & Interactive — dashboard, e-commerce, docs, mega-menu, announcement, mobile
  • Themes — dark, glass, brutalist, floating pill, gradient, brand bar, overlay

Cards (29)

Storefront (36)

The Mercato commerce blocks: Layout · Home Sections · Catalog & Cart · Listing · Product · Cart & Wishlist · Checkout · Account

Auth (9)

Shared auth blocks — brand, shell, card, social row, divider, field, password strength, OTP input, form messages.

Files (3)

Upload Area · Crop Image · Image Dialog

Theming

Blocks consume semantic tokens onlybg-card, text-foreground, font-display. Swap themes without touching the block:

bun x bosia@latest add theme editorial

See Themes.