PricingTable

pattern

Three-tier pricing card layout with feature lists and a highlighted middle card. Composes Card, Stack, Row, Text, Chip, Divider, and Button to build a production-ready pricing comparison section.

"Build a PricingTable pattern from lucent-ui with three tiers (Free, Pro, Enterprise). Use Card, Stack, Text, Chip, Divider, and Button. Highlight the middle tier with accent border and a Popular chip."

Usage

React / JSX

import { Card, Stack, Row, Text, Chip, Divider, Button } from 'lucent-ui'

<PricingTable />

Installation

pnpm add lucent-ui

API Reference

PricingTable props — * required

Prop	Type	Default	Description
`Card`	`component`	—	Surface container for each pricing tier.
`Stack`	`component`	—	Vertical layout inside each tier.
`Row`	`component`	—	Horizontal layout for the three cards.
`Text`	`component`	—	Typography for plan names, prices, and features.
`Chip`	`component`	—	Highlight badge (e.g. Popular) on the featured tier.
`Divider`	`component`	—	Separates price from feature list.
`Button`	`component`	—	CTA buttons — outline for free, primary for featured.

← PreviousSearchFilterBar Next →NotificationFeed