Pricing
Two-tier pricing
Free and paid, side by side, with a note under the grid. Two columns are easier to choose between than three.
Live demo
Full width · the frame has its own viewport, so the breakpoints are real
What it uses
Imports
import { Button, Container, Pricing, Text } from '@the_viveksingh/vivek-ui'The block
This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.
import { Button, Container, Pricing, Text } from '@the_viveksingh/vivek-ui'
const PLANS = [
{
id: 'free',
name: 'Personal',
price: '$0',
period: 'forever',
description: 'For one person and one device.',
features: ['Unlimited notes', 'Sync on one device', 'Export to Markdown'],
cta: (
<Button fullWidth variant="outline">
Download
</Button>
),
},
{
id: 'plus',
name: 'Plus',
price: '$6',
period: '/month',
description: 'For every device you own.',
features: ['Everything in Personal', 'Sync everywhere', 'Version history', 'Shared notebooks'],
cta: <Button fullWidth>Upgrade</Button>,
highlighted: true,
},
]
export default function PricingTwo() {
return (
<>
<Pricing title="Two plans, no tiers to decode" plans={PLANS} columns={{ base: 1, sm: 2 }} />
<Container size="md" style={{ paddingBlockEnd: '2rem', textAlign: 'center' }}>
<Text size="sm" tone="muted">
Students and teachers get Plus free. Prices exclude VAT where it applies.
</Text>
</Container>
</>
)
}