Staaarter

Numbered Services List

Ruled, full-width list of studio services, each row numbered with a short description and a capability tag. Fully static, unlike the Capabilities Accordion block, nothing in this list collapses.

By Staaarter Team
Agency
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/numbered-services-list.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/agency/agency23.tsx instead.

Usage

The file also exports agency23Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Agency23, agency23Demo } from "@/components/blocks/agency/agency23";

export default function Page() {
  return <Agency23 {...agency23Demo} />;
}

Props

PropTypeDefaultDescription
headingReactNodenoneSection heading above the service list.
descriptionstringnoneOptional supporting copy under the heading.
servicesService[]noneOrdered services, each numbered by its position in the array.
classNamestringnoneExtra classes for the outer section element.

Types

type Service = { title: string; description: string; tag: string };

Behavior notes

  • The numeral prefix ("01", "02", ...) is derived from each service's array position at render time, not stored per item, so reordering the services array reorders the numbers automatically.
  • This list is fully static and always fully visible; unlike Agency21's Capabilities Accordion, no row expands or collapses.
  • The tag on the right is a single outline Badge per row, not a free-form list of chips.