Sections

What a section is

A section is a server component in one file, <name>.tsx, installed into components/sections/<category>/. Beside it, when it has them, go its <name>.data.ts — the words and the rows it shows — and its <name>.client.tsx, the island that holds its state. It is drawn from the same primitives and tokens as everything else here, so it takes your palette and dark mode without asking.

Install one

Every section installs by its name. hero-01 lands as components/sections/hero/hero-01.tsx and components/sections/hero/hero-01.data.ts.

npx shadcn@latest add @vibra/hero-01

The command uses the @vibra namespace: register it once, as Installation shows, and answer yes — or pass --overwrite — when the CLI asks to replace shadcn’s primitives with Vibra’s.

Then render it where it belongs on a page. Each file exports its section by name as well as by default:

import { Hero01 } from "@/components/sections/hero/hero-01"

export default function Page() {
  return <Hero01 />
}

Its data file

What a section shows lives in its .data.ts — a marketing section’s copy, an ecommerce or application section’s rows — so making one yours starts in that one file. hero-01.data.ts holds PRODUCT, ANNOUNCEMENT, HEADLINE, LEDE, PRIMARY_ACTION, SECONDARY_ACTION, REASSURANCE and CUSTOMERS. An ecommerce or application section’s rows come from db through selectors — swap the store as the dashboards guide shows, and the section follows. The data file is each section’s own, so installing a second section never overwrites the first one’s.

Headings

How a section opens is written into its file, and you change it there. There are three ways:

<h1>

The band is named by the page’s one h1: Hero. Use one per page, on a page with no h1 of its own.

<h2>

An h2 names the band, under your page’s h1: every other section, in 42 categories.

<header> or <footer>

The band is a landmark instead — a header holding a named nav, or a footer: Navbar, Footer and Store navigation.

Every id inside a section comes from useId, so two on one page never share one.

The three groups

• Marketing

  The bands of a landing page: what the product is, what it costs, who uses it and how to reach the people behind it.

  117 sections in 16 categories

• Ecommerce

  The bands of a storefront: products as cards, lists and detail pages, the cart, the checkout and what buyers said.

  58 sections in 11 categories

• Application UI

  The pieces of a product's own screens: metrics, charts, tables, dialogs, forms and the shell around them.

  110 sections in 19 categories