Component

Audience Feature Card

A marketing card for showcasing features by audience segment. Full-height flex-col layout ensures footers align across a row of cards — ideal for pricing tiers, persona callouts, and feature grids.

Basic

Title and body are required. The card fills its container height so a row of cards stays flush at the bottom.

For individuals

Ship ideas faster

Everything you need to go from concept to production — in a single, cohesive toolkit.

With footer badge

Pass a footer node to anchor an action or label at the bottom — a link, badge, or price tag all work here.

For startups

Scale without limits

Built-in auth, analytics, and theming so your team can focus on the product, not the plumbing.

Free during beta

Three-card row

Cards are full-height by default, so footers naturally align in a CSS grid or flex row — no extra height wrangling needed.

Individuals

Move fast

Prototype, iterate, and ship with a toolkit designed for solo builders.

Free forever

Teams

Collaborate

Share components and design tokens across your whole engineering org.

See team plans →

Enterprise

Scale with confidence

SSO, audit logs, SLAs, and dedicated support for mission-critical apps.

Contact sales →

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { AudienceFeatureCard } from '@refraction-ui/react'

export function MyPage() {
  return (
    <AudienceFeatureCard
      kicker="For teams"
      title="Collaborate in real time"
      body="Invite your whole team, share workspaces, and ship together."
      footer={<a href="/pricing">See team plans →</a>}
    />
  )
}

Props

Prop	Type	Default	Description
`title`	`React.ReactNode`	--	Main title — required.
`body`	`React.ReactNode`	--	Body copy.
`kicker`	`React.ReactNode`	--	Small label displayed above the title (e.g. "For teams").
`footer`	`React.ReactNode`	--	Footer slot — pushed to the bottom of the card via mt-auto.
`className`	`string`	--	Additional CSS classes to apply.