Web only — React, from @krizaka/ui/pricing-page. Beta: its API may still change in a minor version.

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { PricingPage } from "@krizaka/ui/pricing-page";

Examples

Props

Accessibility

• The plans are a named list; the comparison a table with a caption and header cells.
• Questions are native disclosures.

Best practices

• Three plans at most; the featured one says why (Most chosen).
• Say what a credit buys in units people know.
• Words and content arrive as props; the motion is the platform's ([data-reveal], still under reduced motion).

Related components

• MeterA measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.
• Glow cardA card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.
• Product pageA product's overview in its brand: split hero with facts and the product alive, the traps it removes as compact argument cards, its decisions with their cost, the promise a bird keeps, the closing call.

Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub