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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | ReactNode | none | Section heading above the service list. |
| description | string | none | Optional supporting copy under the heading. |
| services | Service[] | none | Ordered services, each numbered by its position in the array. |
| className | string | none | Extra 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.
More Agency Blocks
View all →case-study-hero
Case Study Hero
A case study header with project metadata grid, service tags, and featured image.
studio-manifesto
Studio Manifesto
Oversized editorial manifesto statement with emphasized phrases, principle chips and a founder signature.
studio-values
Studio Values
Studio values laid out with oversized ghost numerals, titles, descriptions and keywords.
how-we-think
How We Think
Sticky studio intro with a portrait beside a stack of numbered principles.
studio-team
Studio Team
A studio team grid of member portraits with names and roles.
awards-list
Awards List
Editorial list of studio awards by year with project and recognition details.