# App download footer

A shadcn/ui footer for app sites: a red download panel with store badges and an app diagram, link columns, a pinned post and socials.

> 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:** Mobile app and music streaming websites; SaaS sites that end with an app download call; Product landing pages with store badges; Startup sites that need a full footer with socials
- **Category:** Marketing · **Type:** Footer · **Style:** Motion, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/footer-section) · [Screenshot](https://www.craftui.space/llms.md/preview/footer-section.50d0cbd1.jpg)

![App download footer](https://www.craftui.space/llms.md/preview/footer-section.50d0cbd1.jpg)

## Install

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

This is a paid item (SEC-QBM5R1): 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 FooterSection from "@/components/blocks/footer-section";

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` | `"Clova"` | The brand's name, in the post and the copyright line ("Clova"). |
| `mark` | `ReactNode` | `<BeatMark />` | The brand's mark (an SVG using currentColor), shown in the app tile, the post and the bottom bar. Default: five equaliser bars, which pulse in the app tile. |
| `heading` | `ReactNode` | `"Connect."` | The headline's first line, in white ("Connect."). |
| `subheading` | `ReactNode` | `"Don't Just Listen"` | Its second line, softer ("Don't Just Listen"). |
| `description` | `ReactNode` | `"Join millions of other music lovers! Download the app now and experience limit…` | The line under the headline, up to about 140 characters. |
| `appStoreHref` | `string \| null` | `"#app-store"` | The App Store link, or null to hide the badge. |
| `googlePlayHref` | `string \| null` | `"#google-play"` | The Google Play link, or null to hide the badge. |
| `columns` | `FooterColumn[]` | `built-in demo content` | The link columns, up to 4. |
| `post` | `FooterPost \| null` | `built-in demo value` | The pinned post on the right, or null to hide it. |
| `socials` | `FooterSocial[]` | `built-in demo content` | The social links in the bottom bar. |
| `copyright` | `ReactNode` | — | The copyright line. Default "{brand}, {this year}." |
| `tone` | `string` | `"#D9262C"` | The panel's colour (any CSS colour). Default a warm red, #D9262C. |
| `className` | `string` | — | Classes for the outer section. |

### `FooterColumn`

| Field | Type | Description |
| --- | --- | --- |
| `title` (required) | `string` | The column's heading, one or two words ("Platform"). |
| `links` (required) | `FooterLink[]` | Its links, ideally 3 to 5. |

### `FooterPost`

| Field | Type | Description |
| --- | --- | --- |
| `name` (required) | `string` | The account's display name ("Clova"). |
| `handle` (required) | `string` | The account's handle ("@clovaapp"). |
| `text` (required) | `string` | The post, up to about 110 characters. |
| `href` (required) | `string` | Link to the post or the profile. |

### `FooterSocial`

| Field | Type | Description |
| --- | --- | --- |
| `network` (required) | `FooterSocialNetwork` | Which network's mark to show. |
| `href` (required) | `string` | Where it goes. |
| `label` (required) | `string` | Its accessible name ("Clova on Instagram"). |

### `FooterLink`

| Field | Type | Description |
| --- | --- | --- |
| `label` (required) | `string` | The link's text, up to about 24 characters. |
| `href` (required) | `string` | Where it goes. |

## Files

The install adds:

- `components/blocks/footer-section.tsx`

npm dependencies (installed for you): `@hugeicons/core-free-icons`, `@hugeicons/react`.