Sections

PricingSection

A three-column learning-track comparison with feature checklists, a highlighted recommended path, and CTA buttons

Quick Preview

Choose your learning track

Start with fundamentals, move into production patterns, and grow into system-level frontend thinking.

Foundation

Start with the mental models, file conventions, and workflow you actually need.

Beginner

Routing and layout fundamentals
Server vs Client Components
Tailwind v4 basics
Readable component examples
Architecture tradeoffs
Team-scale workflow guidance

Start with foundation

Recommended next step

Production

Turn working demos into maintainable, professional frontend systems.

Intermediate

Production-ready component patterns
Forms, actions, and validation
Design tokens and UI systems
Testing and code-quality habits
Architecture reasoning
Team-scale systems thinking

Study production track

Professional Systems

Think in architecture, scale, design systems, and team-grade delivery.

Advanced

Architecture and project structure
Scalable design system thinking
Professional frontend tradeoffs
Team workflows and review standards
Implementation guidance
Leadership-level systems context

See advanced track

Installation

# lucide-react is required
npm install lucide-react

// Add plan data to
src/lib/constants.ts  →  PRICING_PLANS
src/types/index.ts    →  PricingPlan, PricingFeature

// Copy the component from
src/components/sections/PricingSection.tsx

Usage

import { PricingSection } from '@/components/sections/PricingSection'

// Default — uses PRICING_PLANS from constants
export default function PricingPage() {
  return <PricingSection />
}

// Custom plans
const myPlans = [
  {
    id: 'basic',
    name: 'Basic',
    price: '$9',
    period: '/ month',
    description: 'For individuals.',
    features: [
      { text: '10 projects', included: true },
      { text: 'Team collaboration', included: false },
    ],
    cta: { label: 'Get started', href: '/signup' },
  },
]

export default function PricingPage() {
  return <PricingSection plans={myPlans} title="Our plans" />
}

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 sections component named PricingSection in React/Next.js.
Goal: recreate the same overall UI and behavior as the PricingSection reference from a component gallery.
What it needs to communicate: A three-column learning-track comparison with feature checklists, a highlighted recommended path, and CTA buttons.

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:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Existing documented dependencies: lucide-react, @/lib/constants (PRICING_PLANS), @/types (PricingPlan)
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- plans: PricingPlan[] — Array of learning tracks (defaults to PRICING_PLANS from constants)
- title: string — default "Choose your learning track" — Section heading
- subtitle: string — Sub-heading copy below the title
- className: string — Additional CSS classes for the section wrapper

Reference usage patterns:
- Default

```tsx
<PricingSection />
```

- Custom title

```tsx
<PricingSection title="Compare the tracks" subtitle="Move from fundamentals to system-level frontend thinking." />
```

Feature expectations:
- 3-column responsive grid (stacks on mobile)
- Highlighted recommended path with ring + shadow
- Feature checklist with Check / X icons
- Configurable CTA per plan
- Data-driven: edit PRICING_PLANS in constants.ts

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
`plans`	`PricingPlan[]`	-	Array of learning tracks (defaults to PRICING_PLANS from constants)
`title`	`string`	`"Choose your learning track"`	Section heading
`subtitle`	`string`	-	Sub-heading copy below the title
`className`	`string`	-	Additional CSS classes for the section wrapper

Features

✓3-column responsive grid (stacks on mobile)
✓Highlighted recommended path with ring + shadow
✓Feature checklist with Check / X icons
✓Configurable CTA per plan
✓Data-driven: edit PRICING_PLANS in constants.ts