SectionNew

One part of a landing page: the room around it, an eyebrow, title, description and buttons, and its content in a Container.

$ pnpm dlx shadcn@latest add @dashral/section

Why teams switch

Everything a dashboard needs, already built

Sign-in, roles, charts and exports are done, so your first week goes into what makes your product different.

Live in minutes

Connect your database and the first dashboard draws itself from your tables.

Charts that read

Numbers count to their new value, and every chart has a table behind it.

Yours to run

Self-host it or deploy it anywhere; your data never leaves your servers.

Installation

$ pnpm dlx shadcn@latest add @dashral/section

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/section.json

When to use

Each part of a landing page: features, pricing, testimonials, a FAQ, the last call to action.

When not to use

A part of a settings page: Form Section.
A page's width alone, with no heading: Container.

Usage

The heading rises into place as it scrolls into view; the content sits under it.

example.tsx

1import { Section } from "@/components/dashral/section"
2
3export default function Features() {
4  return (
5    <Section eyebrow="Why teams switch" title="Everything a dashboard needs" description="Sign-in, roles, charts and exports are done.">
6      <div className="grid gap-4 sm:grid-cols-3">
7        <p>Live in minutes</p>
8        <p>Charts that read</p>
9        <p>Yours to run</p>
10      </div>
11    </Section>
12  )
13}

Using the npm package? Import from @dashral/ui/components/section instead, here and in the examples; the rest is the same.

Examples

At the start, with buttons

align="start" with actions, on tone="muted", a faint band that sets it apart.

Customers

Trusted by teams that ship every day

From two-person studios to support desks of three hundred.

teams on Northwind: 4,800+
uptime this year: 99.98%
median first reply: 2 min

API reference

Section

Also takes every prop of <section>(opens in a new tab).

Prop	Type	Default
`eyebrow`	`ReactNode` A short line above the title: what the part is about.	—
`title`	`ReactNode` The part's heading; it names the section too.	—
`description`	`ReactNode` A sentence or two under the title.	—
`actions`	`ReactNode` Under the description: the part's buttons.	—
`children`	`ReactNode` The part's content, under the heading.	—
`align`	`"center" \| "start"` The heading centred over the content, or at its start.	`"center"`
`titleAs`	`"h1" \| "h2"` The heading's level: h1 for the page's first part.	`"h2"`
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"` The content's width, as Container's.	`"lg"`
`spacing`	`"sm" \| "default" \| "lg"` The room above and below: 48/64px, 64/96px or 96/128px (phone/sm up).	`"default"`
`tone`	`"default" \| "muted"` muted lays a faint band behind it.	`"default"`
`reveal`	`boolean` The heading rises into place the first time it scrolls into view.	`true`
`classNames`	`{ container, header, eyebrow, title, description, actions, content }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

A <section> named by its title (aria-labelledby), so it's a region screen readers can jump to; without a title it's left unnamed.
One h1 per page: give titleAs="h1" to the first part only.

Motion

The heading's lines rise 12px and fade in, a beat apart, the first time it scrolls into view. Before scripts run, and with reduced motion, it's simply there.