# CTA group

> A row of call-to-action links styled as buttons. Because they are links, people can open them in a new tab.

Facade UI item `cta-group` (ui, atom).
Docs page: https://facadeui.dev/components/cta-group · Registry JSON: https://facadeui.dev/r/cta-group.json

## Install

```bash
npx shadcn@latest add @facade/cta-group
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/cta-group.json`. The CLI also installs what it needs: @facade/button, @facade/types, @facade/utils.

Files: `components/ui/cta-group.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/cta-group-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { CtaGroup } from "@/components/ui/cta-group"

export function Demo() {
  return (
    <div className="flex flex-col gap-8">
      <CtaGroup
        items={[
          { label: "Start building", href: "#start" },
          { label: "Read the docs", href: "#docs" },
        ]}
      />
      <CtaGroup
        align="center"
        size="lg"
        items={[
          { label: "Get a demo", href: "#demo" },
          { label: "View on GitHub", href: "https://github.com", external: true },
        ]}
      />
    </div>
  )
}
```

## Props

### CtaGroupProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `CtaItem[]` |  |  |
| `link` | `LinkComponent` |  | Your link component, such as `next/link`. Defaults to `"a"`. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |  |
| `align` | `"start" \| "center" \| "end"` | `"start"` |  |
| `stackOnMobile` | `boolean` | `false` | Stacks the buttons at full width on small screens. Common inside a hero. |
| `className` | `string` |  |  |