Storybook

The UI kit is built inside the Flexprice dashboard repository, flexprice/flexprice-front, which carries a Storybook. Today that Storybook covers dashboard internals; the kit’s own components do not have stories yet. Until they do, the component pages in these docs are the interactive gallery.

Component previews in the docs

Every page under Components embeds the real component with realistic props, next to the code that produces it, with a light and dark toggle:

Component	Page
`PricingTable`	Pricing Table
`PricingCard`	Pricing Card
`MetricCards`	Metric Cards
`UsageTrendChart`	Usage Trend Chart
`UsageBreakdown`	Usage Breakdown
`UsageQuota`	Usage Quota
`CreditBalance`	Credit Balance
`CreditHistory`	Credit History

The props behind each preview are a valid fixture. Copy them into a test or a static JSON file to render a component before your data pipeline exists.

Run the repository Storybook

Clone the dashboard repository

git clone https://github.com/flexprice/flexprice-front
cd flexprice-front
npm install

Start Storybook

npm run storybook

It serves on http://localhost:6006. Stories are discovered from src/**/*.stories.tsx.

Build the kit

npm run build:ui

This emits the installable package into packages/flexprice-ui/dist from the umbrella entry src/exportable/index.ts, the same artefact that is published as @flexprice/ui.

Add a story for a kit component

Stories for the kit belong next to the component source under src/pricing, src/usage, or src/credits. A minimal one:

// src/credits/components/CreditBalance.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import CreditBalance from './CreditBalance';

const meta: Meta<typeof CreditBalance> = { title: 'UI kit/CreditBalance', component: CreditBalance };
export default meta;

export const Active: StoryObj<typeof CreditBalance> = {
  args: { wallet: { id: 'wallet_1', name: 'Main Wallet', status: 'active', creditBalance: 4200, balance: 42, currency: 'USD' } },
};

export const Empty: StoryObj<typeof CreditBalance> = { args: { wallet: null } };

Open a pull request against flexprice-front with it; the contributing guide covers the frontend setup.

Developers

Component previews in the docs

Run the repository Storybook

Add a story for a kit component

UI kit overview

flexprice/flexprice-front

​Component previews in the docs

​Run the repository Storybook

​Add a story for a kit component

UI kit overview

flexprice/flexprice-front

Component previews in the docs

Run the repository Storybook

Add a story for a kit component