# Security features with device

A shadcn/ui features section for crypto wallets and fintech apps that need to earn trust: a phone mockup beside five security features with icon tiles.

> 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:** Crypto wallet and fintech app websites; Security and privacy feature pages; Mobile app landing pages with a device mockup
- **Category:** Finance, Marketing · **Type:** Features · **Style:** Minimal
- **See it:** [Live preview](https://www.craftui.space/docs/templates/feature-section-04) · [Screenshot](https://www.craftui.space/llms.md/preview/feature-section-04.a1e7f7a6.jpg)

![Security features with device](https://www.craftui.space/llms.md/preview/feature-section-04.a1e7f7a6.jpg)

## Install

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

This is a paid item (SEC-0012): 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 FeatureSection04 from "@/components/blocks/feature-section-04";

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `ReactNode` | `( <> Secure{" "} <span className="whitespace-nowrap text-[1.15em] text-(--fs4-i…` | The headline. Wrap the words to mute in a `<span>` with a muted colour, as the default does with "by design.". Defaults to "Secure by design." |
| `intro` | `ReactNode` | `"Your funds are completely under your control and secured by your biometrics. N…` | The paragraph under the headline: the promise the features back up, in one or two sentences. |
| `image` | `string` | `"https://pub-52b0d9cec7c64f638ba3f33a29718fa6.r2.dev/section-assets/feature-sec…` | The photo behind the device, shown blurred: a calm landscape works best; 1200px wide is plenty. Defaults to a misty dawn. |
| `visual` | `ReactNode` | `<FeatureWalletPhone />` | What stands in the panel, over the photo. Defaults to `FeatureWalletPhone`, a phone on a wallet's setup screen. |
| `features` | `FeatureSection04Item[]` | `built-in demo content` | The features: the first two fill the left column, the rest the right (one column on phones). Five read best, as in the default. |
| `headingLevel` | `1 \| 2 \| 3` | `2` | The headline's level: 1 when this is the page's main heading, 2 or 3 to fit under the page's own. The feature titles take the next level. Defaults to 2. |

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

### `FeatureSection04Item`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique id: the list keys on it. |
| `title` (required) | `string` | The feature's title, a few words: "Biometric authentication". |
| `description` (required) | `string` | One or two short sentences under the title. |
| `icon` (required) | `ReactNode` | The glyph on the feature's plate, drawn in white (`currentColor`). Use `FeatureFingerprintGlyph`, `FeaturePasskeyGlyph`, `FeatureWalletGlyph`, `FeatureRecoveryGlyph` or `FeatureHardwareKeyGlyph` from this file, or any square line icon. |
| `tone` (required) | `keyof typeof TONES` | The plate's colour: "orange", "blue" or "violet". |
| `size` | `"tall" \| "medium" \| "short"` | The tile's height in its column: "tall" and "medium" stack the plate above the text, "short" sets it beside the text. Defaults to "medium". |

## Files

The install adds:

- `components/blocks/feature-section-04.tsx`

No npm dependencies beyond React and Tailwind CSS.

shadcn/ui components it uses (the shadcn CLI adds any that are missing): `card`.