Sections

Pricing

A plan comparison table built out of `Card`s.

Server safeSource

Import

import { Pricing } from '@the_viveksingh/vivek-ui'

Plan comparison

highlighted lifts one plan and badge flags it. cta takes a node, so each plan can link wherever it needs to. Give every plan a stable id once the data is dynamic.

Pricing

Every plan is the same plan

It is free software. The table exists to show the component, not to sell you anything.

  • Hobby

    Free

    For side projects and prototypes.

    • All 83 components
    • All 6 charts
    • Design tokens
    • Community support

  • Team

    Most popular
    Free/forever

    The same library. There is no paid tier.

    • Everything in Hobby
    • Commercial use under MIT
    • No seat limits
    • No attribution required

  • Enterprise

    Free

    Audit it, fork it, vendor it.

    • Zero runtime dependencies
    • Readable source
    • Semantic versioning
    • MIT licence
<Pricing
  eyebrow="Pricing"
  title="Every plan is the same plan"
  plans={[
    {
      id: 'hobby',
      name: 'Hobby',
      price: 'Free',
      description: 'For side projects and prototypes.',
      features: ['All 83 components', 'All 6 charts', 'Design tokens'],
      cta: <Button variant="outline">Start building</Button>,
    },
    {
      id: 'team',
      name: 'Team',
      price: 'Free',
      period: '/forever',
      features: ['Everything in Hobby', 'Commercial use under MIT', 'No seat limits'],
      cta: <Button>Install it</Button>,
      highlighted: true,
      badge: 'Most popular',
    },
  ]}
  columns={{ base: 1, md: 3 }}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Pricing
PropTypeDefaultDescription
plansPricingPlan[]——
columnsnumber | ResponsiveCols—Omit for an auto-fitting grid, which reflows at every width.
minItemWidthstring—Auto-fit track floor when `columns` is omitted. Defaults to `18rem`.
eyebrowReactNode—A plain string becomes a pill `Badge`; a node is rendered as given.
titleReactNode——
descriptionReactNode——
headingLevelHeadingLevel—Level of the section's own `title`, defaulting to `2`. Plan names render one level below it — or at this level when the section has no title of its own.

Rendering

Server safe

Pricing carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.