Patterns

PricingTable

Three-tier learning-track comparison table with a highlighted recommended path.

Quick Preview

Foundation

Beginner

For developers building strong Next.js fundamentals.

Routing and layout fundamentals
Server vs Client basics
Tailwind workflow habits
Production refactoring instincts
Architecture tradeoff practice
Team-level systems thinking

Recommended next step

Production

Intermediate

For developers turning polished demos into maintainable products.

Forms, actions, and validation flow
Data states and reusable UI structure
Accessibility and quality discipline
Design tokens and theming
Refactoring for clarity
Team-level systems thinking

Professional Systems

Advanced

For developers thinking beyond a single feature or sprint.

Architecture boundaries
Design system governance
Review language and standards
Rendering and abstraction tradeoffs
Scaling work across a team
Mentored application to real codebases

Installation

npm install lucide-react

// Copy from
src/components/patterns/PricingTable.tsx

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a patterns component named PricingTable in React/Next.js.
Goal: recreate the same overall UI and behavior as the PricingTable reference from a component gallery.
What it needs to communicate: Three-tier learning-track comparison table with a highlighted recommended path..

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Build the full multi-part interaction, not just the outer shell.
- Preserve realistic spacing, affordances, and task flow.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- tiers: PricingTier[] — Track tiers to display (uses defaults if omitted)
- className: string — Additional CSS classes

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Featured tier scale
- Feature checklist
- Badge label
- Responsive grid

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`tiers`	`PricingTier[]`	-	Track tiers to display (uses defaults if omitted)
`className`	`string`	-	Additional CSS classes