# Agency: Services

> The studio's claim beside its four services as an accordion, each with what it delivers.

A shadcn/ui block from the [@eased](https://eased.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/eased/agency-services).

- Page, with a live preview: https://shadcn.exchange/r/eased/agency-services
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/eased/agency-services-light-8f13b37ac82c3fc0.png
- Registry item: https://eased.dev/r/agency-services.json
- Listed: 2026-10-23, source last changed 2026-10-23

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/eased/agency-services.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `motion`
- Registry items: `https://eased.dev/r/eased-tokens.json`, `https://eased.dev/r/eased-motion.json`, `https://eased.dev/r/agency-core.json`, `https://eased.dev/r/accordion.json`, `https://eased.dev/r/badge.json`

## Files

### `src/registry/eased/templates/agency/services.tsx`

```tsx
"use client";

import { Accordion, AccordionItem } from "../../accordion/accordion";
import { Badge } from "../../badge/badge";
import { services } from "./content";
import { ArrowLink, Reveal, Section } from "./kit";

/**
 * What the studio does: the claim and a line on the left, and the four services as an
 * accordion on the right, the first open, each with what it delivers as badges.
 */
export function Services() {
  return (
    <Section id="services" label={services.label} className="grid gap-group lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-group-lg">
      <Reveal className="flex flex-col items-start gap-pad-base">
        <p className="max-w-md font-display text-display-3xl font-medium tracking-display text-balance text-text">{services.title}</p>
        <p className="max-w-md text-ui-md text-pretty text-text-secondary">{services.body}</p>
        <ArrowLink href={services.link.href} className="mt-in">
          {services.link.label}
        </ArrowLink>
      </Reveal>
      <Reveal index={1}>
        <Accordion defaultValue={[services.items[0].id]} className="border-y border-line-subtle">
          {services.items.map((s, i) => (
            <AccordionItem
              key={s.id}
              value={s.id}
              title={
                <span className="flex items-baseline gap-pad-base py-1">
                  <span className="w-6 shrink-0 text-ui-sm font-normal text-text-muted tabular-nums">{String(i + 1).padStart(2, "0")}</span>
                  <span className="text-display-xl font-medium">{s.title}</span>
                </span>
              }
            >
              <div className="flex flex-col gap-pad-base pb-pad-md pl-[calc(--spacing(6)+var(--spacing-pad-base))]">
                <p className="max-w-xl text-ui-md text-pretty text-text-secondary">{s.body}</p>
                <ul aria-label={`${s.title} includes`} className="flex flex-wrap gap-1.5">
                  {s.deliverables.map((d) => (
                    <li key={d}>
                      <Badge size="md">{d}</Badge>
                    </li>
                  ))}
                </ul>
              </div>
            </AccordionItem>
          ))}
        </Accordion>
      </Reveal>
    </Section>
  );
}
```