Pricing

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Pricing

Documentation for the Pricing component.

Installation

bash

deno run -A jsr:@lockness/ui add pricing

Usage

tsx

import {
  PricingSection,
  PricingCard,
  PricingCardHeader,
  PricingCardPrice,
  PricingCardFeatures,
  PricingCardFeature,
  PricingCardAction
} from '@lockness/ui/components'

<PricingSection columns={2}>
  <PricingCard>
    <PricingCardHeader title="Starter" />
    <PricingCardPrice price={0} description="Free forever" />
    <PricingCardFeatures>
      <PricingCardFeature>Up to 3 projects</PricingCardFeature>
      <PricingCardFeature>1 GB storage</PricingCardFeature>
    </PricingCardFeatures>
    <PricingCardAction href="/signup" variant="outline">
      Get Started Free
    </PricingCardAction>
  </PricingCard>

  <PricingCard featured>
    <PricingCardHeader title="Pro" badge="Popular" />
    <PricingCardPrice price={29} period="month" />
    <PricingCardFeatures>
      <PricingCardFeature>Unlimited projects</PricingCardFeature>
      <PricingCardFeature>50 GB storage</PricingCardFeature>
    </PricingCardFeatures>
    <PricingCardAction href="/signup">Start Free Trial</PricingCardAction>
  </PricingCard>
</PricingSection>

Props

PricingCard

Prop	Type	Default	Description
children	`unknown`	-	Card content (PricingCardHeader, PricingCardPrice, etc.)
class	`string`	-	Additional CSS class names
featured	`boolean`	`false`	Whether this tier is emphasized/featured

PricingCardHeader

Prop	Type	Default	Description
title	`string`	required	Tier name displayed as the card title
badge	`string`	-	Optional badge text displayed above the title
badgeVariant	`BadgeProps['variant']`	`'default'`	Visual variant for the badge
class	`string`	-	Additional CSS class names

PricingCardPrice

Prop	Type	Default	Description
price	`number \| string`	required	Price amount to display
currency	`CurrencySymbol`	`'$'`	Currency symbol displayed before the price
period	`BillingPeriod`	-	Billing period displayed after the price
originalPrice	`number \| string`	-	Original price for showing discounts (with strikethrough)
description	`string`	-	Additional description text below the price
class	`string`	-	Additional CSS class names

PricingCardDescription

Prop	Type	Default	Description
children	`unknown`	-	Description text content
class	`string`	-	Additional CSS class names

PricingCardFeatures

Prop	Type	Default	Description
children	`unknown`	-	Feature items (PricingCardFeature components)
class	`string`	-	Additional CSS class names

PricingCardFeature

Prop	Type	Default	Description
children	`unknown`	-	Feature text content
included	`boolean`	`true`	Whether the feature is included (check icon if true, cross if false)
class	`string`	-	Additional CSS class names

PricingCardAction

Prop	Type	Default	Description
children	`unknown`	-	Button text content
href	`string`	-	Button href (renders as link with up-follow if provided)
variant	`ButtonProps['variant']`	`'primary'`	Button visual variant
class	`string`	-	Additional CSS class names

PricingToggle

Prop	Type	Default	Description
selected	`'monthly' \| 'yearly'`	`'monthly'`	Currently selected billing period
monthlyLabel	`string`	`'Monthly'`	Label for monthly option
yearlyLabel	`string`	`'Yearly'`	Label for yearly option
yearlyBadge	`string`	-	Optional badge text for yearly option (e.g., "Save 20%")
class	`string`	-	Additional CSS class names

TWO-TIER LAYOUT

Starter

Free forever

Perfect for individuals and small projects

Up to 3 projects
1 GB storage
Community support
Advanced analytics
Priority support

Get Started Free

Popular

Pro

$29/month

For professionals and growing teams

Unlimited projects
50 GB storage
Email support
Advanced analytics
Priority support

Start Free Trial

tsx

import {
  PricingSection,
  PricingCard,
  PricingCardHeader,
  PricingCardPrice,
  PricingCardDescription,
  PricingCardFeatures,
  PricingCardFeature,
  PricingCardAction,
} from '@lockness/ui/components'

<PricingSection columns={2}>
  <PricingCard>
    <PricingCardHeader title="Starter" />
    <PricingCardPrice price={0} description="Free forever" />
    <PricingCardDescription>
      Perfect for individuals and small projects
    </PricingCardDescription>
    <PricingCardFeatures>
      <PricingCardFeature>Up to 3 projects</PricingCardFeature>
      <PricingCardFeature included={false}>Priority support</PricingCardFeature>
    </PricingCardFeatures>
    <PricingCardAction href="/signup" variant="outline">
      Get Started Free
    </PricingCardAction>
  </PricingCard>
  
  <PricingCard featured>
    <PricingCardHeader title="Pro" badge="Popular" />
    <PricingCardPrice price={29} period="month" />
    <PricingCardAction href="/signup">Start Free Trial</PricingCardAction>
  </PricingCard>
</PricingSection>

THREE-TIER LAYOUT

Free

No credit card required

Get started with the basics

5 projects
2 GB storage
Community forum
Custom domain
API access

Pro

$49/month

Everything you need to scale

Unlimited projects
100 GB storage
Priority email support
Custom domain
API access

Start Free Trial

Custom

Enterprise

$Custom

Advanced features for large teams

Everything in Pro
Unlimited storage
24/7 phone support
Dedicated account manager
Custom integrations

Contact Sales

tsx

<PricingSection columns={3}>
  <PricingCard>
    <PricingCardHeader title="Free" />
    <PricingCardPrice price={0} description="No credit card required" />
    <PricingCardFeatures>...</PricingCardFeatures>
    <PricingCardAction href="/signup" variant="outline">Sign Up</PricingCardAction>
  </PricingCard>
  
  <PricingCard featured>
    <PricingCardHeader title="Pro" badge="Most Popular" />
    <PricingCardPrice price={49} period="month" />
    <PricingCardFeatures>...</PricingCardFeatures>
    <PricingCardAction href="/signup">Start Free Trial</PricingCardAction>
  </PricingCard>
  
  <PricingCard>
    <PricingCardHeader title="Enterprise" badge="Custom" badgeVariant="secondary" />
    <PricingCardPrice price="Custom" description="Contact us for pricing" />
    <PricingCardFeatures>...</PricingCardFeatures>
    <PricingCardAction href="/contact" variant="outline">Contact Sales</PricingCardAction>
  </PricingCard>
</PricingSection>

MONTHLY/YEARLY TOGGLE

Pro Monthly

$29/month

Unlimited projects
50 GB storage

Best Value

Pro Yearly

$278/year

$348

Save $70 per year

Everything in Monthly
2 months free

Subscribe Yearly

tsx

import { PricingToggle } from '@lockness/ui/components'

<PricingToggle selected="yearly" yearlyBadge="Save 20%" />

<PricingSection columns={2}>
  <PricingCard>
    <PricingCardHeader title="Pro Monthly" />
    <PricingCardPrice price={29} period="month" />
    <PricingCardAction href="/signup">Subscribe</PricingCardAction>
  </PricingCard>
  
  <PricingCard featured>
    <PricingCardHeader title="Pro Yearly" badge="Best Value" />
    <PricingCardPrice 
      price={278} 
      period="year" 
      originalPrice={348}
      description="Save $70 per year"
    />
    <PricingCardAction href="/signup">Subscribe Yearly</PricingCardAction>
  </PricingCard>
</PricingSection>

FEATURE COMPARISON TABLE

Features	Free	Pro	Enterprise
Projects	5	50	Unlimited
Storage	2 GB	100 GB	1 TB
Team Members	1	10	Unlimited
API Access
Custom Domain
Support	Community	Email	24/7 Phone
Analytics	Basic	Advanced	Custom
Integrations	Limited	All	Custom
SSO
SLA		99.9%	99.99%

tsx

import { PricingComparison } from '@lockness/ui/components'

<PricingComparison
  tiers={['Free', 'Pro', 'Enterprise']}
  features={[
    ['Projects', '5', '50', 'Unlimited'],
    ['Storage', '2 GB', '100 GB', '1 TB'],
    ['API Access', false, true, true],
    ['Custom Domain', false, true, true],
    ['Support', 'Community', 'Email', '24/7 Phone'],
    ['SSO', false, false, true],
  ]}
/>

Edit this page