Sections
Services index
View in FigmaA-Z services directory that sorts flat link records into responsive letter groups. CMS-serializable.
Install
npx shadcn@latest add @alix/servicesIndexPreview
Usage
import ServicesIndex, { type ServicesIndexProps } from "@/components/servicesIndex";
const fromCMS: ServicesIndexProps = await getServicesIndex();
<ServicesIndex {...fromCMS} />
<ServicesIndex
title="A-Z"
items={[
{ text: "Artificial intelligence", href: "/services/artificial-intelligence" },
{ text: "Corporate finance", href: "/services/corporate-finance" },
{ text: "Financial restructuring", href: "/services/financial-restructuring" },
]}
/>Examples
01
With a subtitle
A sub-label under the title names what the directory covers, without adding an eyebrow above it.
<ServicesIndex
title="A-Z"
subtitle="Services and industries"
items={items}
/>02
A short index
The block sorts and buckets whatever it's given — a handful of entries still groups cleanly under its letters.
<ServicesIndex
title="A-Z"
items={[
{ text: "Corporate finance", href: "/services/corporate-finance" },
{ text: "Cybersecurity", href: "/services/cybersecurity" },
{ text: "Data analytics", href: "/services/data-analytics" },
{ text: "Valuation", href: "/services/valuation" },
]}
/>03
On a tinted surface
The index has no surface of its own — wrap it in a Surface to seat the directory in a sand footer band.
<Surface bgColor="sand" className="p-10">
<ServicesIndex title="A-Z" subtitle="Services and industries" items={items} />
</Surface>When to use it
Use it for
- A complete A-Z directory of services or industries — pass flat records and let the block sort and letter-group them.
- A footer or index page listing everything the firm does, balanced across responsive columns.
- The static sibling of ServicesList when the page needs coverage, not a hover preview.
Reach for something else
- A two-column section where hovering a link previews it — use ServicesList.
- A short, hand-ordered set of links that shouldn't be alphabetized — use List directly.
- Rich or icon-bearing link labels — items sort by first letter, so text must be a plain string.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Heading beside the grouped entries, commonly `A-Z`. |
| subtitle | ReactNode | — | Optional sub-label below the title. |
| items | { text: string; href: string }[] | — | Flat service links. `text` is a string because the block sorts and groups by first letter. |
| grouping | derived | — | The component sorts A-Z and creates letter headings; the CMS should provide only flat records. |