# Word wheel

A shadcn/ui hero headline block for startups and SaaS: words roll like a picker wheel to complete “Built for founders”, centred, in your own type.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** SaaS and startup landing page heroes; Products sold to several kinds of customers; Enterprise sites with a page per industry; Agency and studio home pages
- **Category:** Marketing · **Type:** Hero · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/blocks/word-wheel) · [Screenshot](https://www.craftui.space/llms.md/preview/word-wheel.3a2569b5.jpg)

![Word wheel](https://www.craftui.space/llms.md/preview/word-wheel.3a2569b5.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/word-wheel.json
```

This is a paid item (BLK-6M6Y39): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import WordWheel from "@/components/blocks/word-wheel";

export default function Page() {
  return <WordWheel />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `WordWheelItem[]` | `built-in demo content` | Your audiences, in order; they loop. Four to eight read best. Defaults to `wordWheelItems`. |
| `lead` | `ReactNode` | `"Built for"` | The words each audience completes, e.g. "Built for" or "The CRM for". Pass `null` for the audiences alone. Defaults to "Built for". |
| `rows` | `3 \| 5` | `3` | Rows in view: 3 (one audience above and below) or 5 (two each side). Defaults to 3. |
| `align` | `"start" \| "center"` | `"center"` | "center" splits the headline on the centre line (it stacks, centred, on phones); "start" sets it flush left. Defaults to "center". |
| `dwell` | `number` | `2` | Seconds each audience holds before the list rolls on. Defaults to 2. |
| `loops` | `number` | — | How many times it goes round before settling on the first audience; leave it out to keep rolling. Defaults to no limit. |
| `autoPlay` | `boolean` | `true` | Whether it rolls on its own when it comes into view. It never does with reduced motion. Defaults to `true`. |
| `linkAs` | `ElementType` | `"a"` | The component used for linked audiences, for client-side routing: pass Next.js `Link`. Defaults to a plain `a`. |

It also accepts every `<div>` attribute (`className`, `id`, `aria-*` and so on).

### `WordWheelItem`

| Field | Type | Description |
| --- | --- | --- |
| `label` (required) | `string` | The audience that completes the lead, e.g. "founders" for "Built for founders". Up to about 12 characters reads best. |
| `href` | `string` | Makes the audience a link, e.g. to its solutions page. Optional. |

## Files

The install adds:

- `components/blocks/word-wheel.tsx`

No npm dependencies beyond React and Tailwind CSS.