# Call to Action 01

> A centered text block with a title, description, and CTA.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/cta-01).

- Page, with a live preview: https://shadcn.exchange/r/flx/cta-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/cta-01-light-e408e229411a1170.png
- Registry item: https://ui.flexnative.com/r/cta-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/cta-01.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: `react-wrap-balancer`
- Registry items: `@flx/cta`

## Files

### `registry/blocks/cta/cta-01/cta-01.tsx`

```tsx
import Balancer from 'react-wrap-balancer'

import type { CtaProps } from '../../shared/cta'
import { Cta } from '../../shared/cta'

export interface Cta01Props {
  title: string
  description: string
  cta?: CtaProps
}

export function Cta01({ title, description, cta }: Readonly<Cta01Props>) {
  return (
    <div className="bg-muted/50 flex min-h-120 items-center justify-center rounded-xl p-5">
      <div className="flex flex-col items-center space-y-4 self-center">
        <div className="space-y-2">
          {title && (
            <h2 className="text-center text-2xl font-bold md:max-w-200">
              <Balancer balance={0.5}>{title}</Balancer>
            </h2>
          )}
          {description && (
            <p className="text-muted-foreground text-center whitespace-pre-line md:max-w-200">
              <Balancer balance={0.5}>{description}</Balancer>
            </p>
          )}
        </div>
        {cta && <Cta cta={cta} />}
      </div>
    </div>
  )
}
```

### `registry/blocks/cta/cta-01/cta-01-example.tsx`

```tsx
import { Cta01, type Cta01Props } from './cta-01'

export const values = {
  title: 'Simple & Elegant',
  description: 'Display content in a minimal and visually appealing way.',
  cta: {
    ctaEnabled: true,
    text: 'Click here',
    link: '',
    variant: 'default',
  },
} satisfies Cta01Props

export function Cta01Example() {
  return (
    <Cta01
      title={values.title}
      description={values.description}
      cta={values.cta}
    />
  )
}
```