retro
retro
light
dark
cyberpunk
nord
dracula
coffee
autumn
test-org/test-repo
/
test-full
@
abc123
•
View Storybook
•
226.0s
ready
Reject
Accept All
All
898
New
898
▶
block-editor
▶
Molecules
▶
BlockEditor
Default
▶
checkout
▶
Packages
▶
Checkout
Default
With Custom Content
▶
PaymentBarBankTransfer
DEFAULT
▶
feature-subscriptions
▶
InlineEditable
▶
Date
Default
Empty
Future Only
Read Only
Read Only Empty
With Label
With Valid Range
▶
Duration
All Durations
Default
Empty
Long Duration
Mixed Duration
One Year
Read Only
Read Only Empty
Six Months
Two Years
With Editing Callback
▶
Select
Billing Cycle
Currency With Symbol
Default
Empty
No Options
Read Only
With Custom Render
▶
Text
All Variants
Auto Focus
Body Variant
Default
Empty
Empty Solid Variant
Read Only
Solid Variant With Value
Subtitle Variant
Title Variant
With Error
With Tooltip
▶
MRRPreviewPanel
Default
Error
Euro Currency
Loading
No Content
With Breakdown
With Metered Product
▶
features
▶
PriceBooks
▶
Create
▶
PriceBookCreateModal
Default
▶
Drawer
▶
PriceBookCTA
Default
Deleting
With Simulate Button
Without Simulate Button
▶
PriceBookDrawer
Default
Loading
Multi Currency
No Currencies
No Drivers
No Multipliers
No Products
Not Found
▶
Edit
▶
Currencies
▶
CurrenciesSection
Default - Relative Manual
Empty - Base Currency Only
Explicit Pricing Mode
Many Currencies
Relative - Auto FX Rates
▶
CurrencyModal
Add Currency
Add Currency - With Exchange Rate (Auto FX)
Add Currency - With Exchange Rate (Manual)
Edit Currency
▶
CurrencyModeSection
Multi-Currency - Explicit Pricing
Multi-Currency - Relative Auto FX
Multi-Currency - Relative Manual
Multi-Currency - Relative with Precision Rounding
Single Currency
▶
Drivers
▶
DriverModal
Add Driver
Edit Driver
▶
DriversSection
Default
Empty - No Drivers
▶
Multipliers
▶
MultiplierModal
Add Multiplier
Edit Multiplier
▶
MultipliersSection
Default
Empty - No Multipliers
▶
PriceBookEdit
Adding Currency
Adding Product
Auto-saving Price Book
Drivers - Empty State
Drivers Tab
Multi-Currency - Base Currency Selected
Multi-Currency - Explicit Pricing Mode
Multi-Currency - With Configured Tiers
Multipliers - Empty State
Multipliers - With Configured Multipliers
Multipliers Tab
Prices Tab
Prices Tab Editing
Products - Empty State
Products - List View
Products - Product Selected
Products - With Pricing Tiers
Saving
Saving Currency Pricing
Setup - Multi-Currency Explicit Pricing
Setup - Multi-Currency Relative Pricing
Setup Tab
Setup Tab Multi Currency
▶
Pricing
▶
PricingConfigSection
Empty - No Products
Multi-Currency Mode
Single Currency Mode
▶
Products
▶
ProductEditModal
Default
▶
ProductsSection
All Products Added
Default
Empty - No Products
▶
Simulator
▶
PriceSimulator
Debug Mode (Derived + Multipliers)
Debug Mode (Explicit)
Default
Empty State
Floor Price Violation
Loading
Multi-Currency Mode (EUR)
No Drivers Configured
Resolving Prices
Single Product
With Many Drivers
With Multipliers Applied
▶
pricekit
▶
Atoms
▶
Badge
All Customizations
Custom Colors
Custom Font
Default
Rounded Corners
▶
Button
Accessible Button
Custom Colors
Dark
Default
Disabled
Full Width
Large
Loading State
Medium
Outline
Small
With Icons
▶
Divider
Horizontal
Vertical
▶
Icons
Custom Color
Custom Size
Default
With Class Name
▶
Slider
Accessible Slider
Custom Thumb Size
Custom Track Gradient
Default
Dynamic Value Update
Small Thumb
▶
Switch
Controlled Switch
Custom Styles
Default
Disabled
Large Size
Small Size
▶
Text
Accessible Text
Caption
Custom Styles
Default
Heading
Subheading
▶
ToggleSwitch
Accessible Toggle
Default
With Custom Colors
With Custom Size
▶
Tooltip
Bottom Position
Default
Left Position
Right Position
▶
Molecules
▶
AddOns
Accessible Add On
Active State
Default
Informative
With Custom Styles
▶
AgreementInput
Controlled
Custom Colors
Default
Disabled
Disabled Accepted
Large Size
Long Text
Small Size
With Links
▶
Customers
Accessible Carousel
Custom Scroll Speed
Default
Fully Customizable
Grid
Static Carousel
▶
Faqs
Default
Pre Expanded Faqs
With Multiple Expansion
▶
FeatureList
Accessible
Custom Icon
Dark Mode
Default
Fully Customizable
Horizontal Layout
▶
PageHeader
Accessible Header
Custom Background
Default
With Automatic Active Breadcrumb
With Breadcrumbs
With Breadcrumbs Above
With Buttons
▶
ProductUnitSelector
API Requests
Custom Slider
Default
Disabled
Large Numbers
With Validation
Without Input
▶
Organisms
▶
FeatureTable
Default
Mobile View
▶
PricingCard
Custom Styling
Dark Mode
Default
Highlighted
▶
Testimonial
Custom Rotate Interval
Default
Without Auto Rotate
▶
Templates
▶
PricingTable
Dark Mode
Default
Fully Customizable
Highlighted Plan
▶
ui
▶
Atoms
▶
Animated
Animate Enter Story
Animate Exit Story
Enter And Exit
Enter Only
With Delay
▶
AudioWaveform
Animated
Default
Fewer Bars
High Level
Low Level
More Bars
▶
Callout
Default
Size Lg
Size Md
Size Sm
Size Xl
Variant Error
Variant Info
Variant Success
Variant Warning
With Action
With Secondary
Without Icon
▶
Divider
Border
Default
Divider Dark
Variant Border
Variant Default
Variant Divider Dark
▶
Heading
Default
H 1
H 2
H 3
H 4
▶
Icons
All Icons
▶
Label
Basic
Default
▶
LoadingSpinner
Default
Variant Gray
Variant White
▶
Section
Default
Spacing Lg
Spacing Md
Spacing Sm
Spacing Xs
Spacing Xxs
Spacing Xxxs
▶
ShortcutHint
Basic
Default
▶
Skeleton
Default
Size Lg
Size Md
Size Sm
▶
Text
Size Large
Size Medium
Size Medium Link
Size Signature XL
Size Small
Size Tiny
Size Title
Sizes
Variant Error
Variant Informative
Variant Light
Variant Normal
Variant Strong
Variant Success
Variant Warning
Variants
▶
Tooltip
Default
Side Bottom
Side Left
Side Right
Side Top
▶
Molecules
▶
Accordion
Default
Open
▶
ActionCard
Always Show Actions
Create Card
Create Card Disabled
Default
Delete Only
Disabled
Edit Only
Full Example
Integrations Example
Long Title
No Icon
Payment Methods Example
Team Members Example
With Custom Content
With Image Icon
▶
ActionPill
Default
▶
Badge
Default
Size Lg
Size Sm
Size Xs
Variant Blue
Variant Green
Variant Magenta
Variant Neutral
Variant Orange
Variant Pink
Variant Red
Variant Teal
▶
BaseSlider
Default
▶
BasicLoadingPage
Default
▶
BillingPeriodSelector
Default
Disabled
Minimal
Preselected Range
With Custom Click Handler
▶
BreadCrumb
Default
▶
Button
Default
Loading
Size Default
Size Icon
Size Large Icon
Size Sm
Size Xs
State Active
State Disabled
State Focus
State Hover
State Loading
Variant Action
Variant Default
Variant Destructive
Variant Ghost
Variant Outline
Variant Secondary
Variant Tertiary
Variant Text
With Icon Left
With Icon Right
With Shortcut
▶
Calendar
Multiple
Range
Single
▶
Card
Basic
Content Only
Default
With Header Only
▶
ChangelogList
Default
▶
Checkbox
Checked
Checked Disabled
Default
Disabled
Interactive
Unchecked
With Label
With Label Checked
With Label Disabled
With Multiline Label
▶
CheckoutSteps
All Completed
Custom Brand Color
Default
▶
ColorPicker
Default
Empty Initial Color
▶
ComboMultiSelect
Default
▶
ComboSelect
Default
▶
Command
Default
▶
CommandMenu
Default
▶
DatePicker
Date Range
Single Date
▶
DateSelector
Default
Disabled
Minimal
Preselected Date
With Custom Click Handler
With Input
▶
Dialog
Controlled
Default
With Close Button
▶
Drawer
Default
▶
DropdownMenu
Default
Trigger Default
Trigger Disabled
Trigger Loading
With Checkbox Items
With Icons
With Label
With Separator
▶
EmptyPage
Default
▶
ExternalPageHeader
Default
Legacy
With Buttons
With Divider
▶
FixedActionFooter
Default
Multiple Actions
Single Action
With Sidebar Offset
With Unsaved Indicator
▶
FormStepsBreadcrumbs
Default
With Disabled Step
With Error
▶
HoverCard
Default
With Rich Content
▶
IconButton
Default
▶
IconWithToolTip
Default
Position Bottom
Position Left
Position Right
▶
ImageWithFallback
Company Logos
No Image
Rounded Variants
User Avatars
With Image
▶
Input
Basic
Default
File Input
With Button
With Helper Text
With Label
With Left Icon
With Right Icon
With Right Text
▶
InputV2
Basic
Default
Disabled
Number Input
With Error
With Right Icon
With Right Text
▶
Insights
▶
InsightCard
Decrease
Increase
Loading
No Change
With Value Formatter
▶
InsightCardWithDataBar
Default
Exclude Zero Categories
Tooltip
Zero Data
Zero Data With Custom Color
▶
PercentageChangeBadge
All Variants
▶
ProductAttributionTable
Default
No Data
▶
SimpleBarChart
Clickable
Custom Color
Custom Formatting
Default
Empty Data
Many Data Points
Small Height
Stacked Chart
▶
StackedBarChart
Daily Usage GBP
Default
No Data
▶
StackedBarChartContainer
Default
▶
Link
Default
External
Internal
▶
ListDisplay
All Visible
Basic
Default
Limit Two
Sorted
▶
MillerColumns
Collapsible - Deep Hierarchy
Collapsible Mode
Default
Disabled Items
Empty Column
Expandable Config
Expandable Config - Collapsible
File Browser Style
Single Column
Three Column Layout
With Badges
With Column Footer
▶
Modal
Default
▶
MultiSegmentControl
Color Variants
Default
Defaults To All
With Selected Values
▶
NameValuePairRow
Default
Large
Medium
Small
▶
NotificationToggle
Accessibility Showcase
Default
Disabled
Disabled Enabled
Disabled With Tooltip
Enabled
Extra Small
Invoice Settings Example
Medium
Multiple Toggles
No Description
Size Comparison
Small
With Tooltip
▶
PageHeaderButtonContainer
Default
Multiple Buttons
Single Button
▶
PageHeading
Basic
Default
Full Example
With Badge
With Close Button
With Page Buttons
▶
Pagination
Buttons
Combined
Limit Select
▶
PaymentMethodSelector
Bank Transfer Selected
Card Selected
Dark Mode
Default
Hidden Label
Limited Methods
▶
PhaseDetailsRow
Archived
Current
Draft
Hidden Status Badge
Scheduled
▶
Pill
Color Blue
Color Green
Color Magenta
Color Neutral
Color Orange
Color Pink
Color Red
Color Teal
Default
Not Clearable
Size Md
Size Sm
Size Xs
▶
Popover
Aligned End
Aligned Start
Default
▶
Pricing
▶
PricingPicker
Basic
Fixed Filled
Graduated Percentage Filled
Graduated Percentage With Errors
Graduated Tiered Filled
Prepaid Fixed Tiered Filled
Prepaid Fixed Tiered With Errors
Read Only
Tiered Filled
Tiered Percentage Filled
Tiered With Errors
Unit Filled
Volume Percentage Filled
▶
PricingEmptyCard
Default
▶
RadioPanel
Default
▶
ReadOnlyField
Default
Different Label Widths
No Indent
Top Aligned
▶
RecordingOverlay
Animated
Animated With Actions
Default
With Right Actions
▶
RotatingMessageLoader
Default
Fast Rotation
Long Messages
Single Message
Slow Rotation
▶
ScrollArea
Default
▶
SearchableSelect
Default
▶
SectionButton
Default
Negative
Positive
Variant Default
▶
SegmentControl
All Billing Intervals
Default
Multiple
With Icons
With Icons (Multiple Options)
▶
Select
Default
Disabled
Sorted
With Default Value
▶
Select2
Async
Async With Dark Mode
Async With Initial Options
Async With Loading And Initial
Creatable
Default
Groups
Groups With Default
Groups With Label
Inline Creatable
Not Clearable
Pretty
With Dark Mode Multi Select Pills
With Disabled State
With Error State
With Icon And Searchable
With Loading State
With Multi Select Pills
With No Options
With On Option Change Handler
With Searchable Text
With Very Long List
▶
SelectionTiles
Default
Disabled
Fluid With Wrapping
Large
Large Fluid
Large With Descriptions
Multi Select
Multi Select With Limit
Ordered
Single Column
With Descriptions
▶
SidebarNavigation
Custom Title
Default
Few Sections
With Extra Content
▶
SimpleProgressBar
Complete
Custom Colors
Default
With Label
Without Step Text
▶
Table
▶
TableCell
Default
▶
TableCellLink
Default
▶
TableHead
Default
▶
TableHeader
Default
▶
TableRow
Default
Default
▶
TableFilters
▶
QuickFilters
Basic Options
Large Counts
Loading
No Counts
Pre Selected
Two Options
With Counts
▶
TableLoading
Default
▶
Tabs
Default
With Disabled Tab
▶
TagInput
Allow Duplicates
Custom Separators
Default
Disabled
Email Addresses
Empty
With Validation
▶
TextArea
Default
Read Only
Transparent
With Error
With Max Length
▶
TiersTable
Empty Initial State
Maximum Tiers
Minimum Tiers
Pricing Tiers
Service Levels
Single Tier
Volume Discounts
▶
Toast
Error
Error With Details
Information
Large Description
Success
Warning
▶
UnauthorizedPage
Default
Small
▶
VersionSelector
Default
With Scheduled Changes
▶
VersionTabBar
Default
Hidden Status Badges
With Add Button
With Delete
▶
Organisms
▶
AutoCompleteAddress
Country Bottom
Country Bottom With Data
Default
Progressive
▶
ChartCard
Analytics Card
Area Chart
Bar Chart
Bar Chart With Table
British Pound Chart
Dashboard Layout
Default
Diverging Stacked Bar
Donut Chart
Donut Chart With Table
Empty States
Euro Chart
Line Chart
Loading States
Pie Chart
Playground
Progress Bar
Radar Chart
Radial Chart
Stacked Bar Chart
Table Card
▶
ControlledInput
Edit Form
Read Only Form
▶
DestructiveActionDialog
Default
With Confirmation Text
With Custom Icon
▶
DialogWithSearch
Open
▶
EditableTable
Custom Cell
Dependent Cells
Disabled
Empty State
Quote Editor
Simple
With Add And Delete
With Add Row
With Validation
▶
EntitlementCredits
▶
EntitlementAllocationForm
Accordion Layout
Card In Card
In Dialog
Minimal
Progressive Disclosure
Sections With Headers
Sections Without Headers
Side By Side
Single Flow
Tabs Layout
▶
Entitlements
▶
EntitlementConfigCard
Boolean Disabled
Boolean Enabled
Disabled
Large Number Value
Long Values
No Description
Number Value
Read Only
String Value
Zero Number Value
▶
EntitlementConfigForm
Boolean Type
Disabled
Empty
In Card
In Dialog
Number Type
String Type
▶
FileUploadInput
Default
With Preview
▶
FormFieldRow
All Select Types
Default
Different Input Types
With Button
Without Label
▶
FormGroup
Default
Readonly Spacing
With Border Top
With Description
With Title Right
▶
FormV2
Basic Form
Complex Form
Dynamic Validation Form
File Upload Form
Inline Form
▶
ItemFilterBuilder
Credit Filters Example
Custom Labels
Custom Target Types
Default
Disabled
With Existing Filters
With Loading Targets
▶
Layout
▶
PageLayout
Default
With Back Link
With Badge
With Close Button
With Page Buttons
With Sub Title
▶
MarkdownDescription
Markdown Content
Plain Text
With Custom Color
▶
MarkdownTextArea
Default
With Image Upload
With Table
▶
Onboarding
▶
CompletableCard
All Colors
Timeline Sequence
▶
OnboardingStep
Default
▶
PromptBox
Custom Min Height
Default
Disabled
Recording
With Error
With Files
With Rotating Placeholders
With Toolbar Actions
Without File Upload
▶
ScrollableList
Bordered
Multi Select
Scroll
Single Select
▶
Templates
▶
Email
Email Abandoned Checkout With Markdown
Email Abandoned Checkout Without Markdown
Email Billing Information Request
Email Customer Portal Share Link
Email Invoice Payment Reminder
Email New Invoice
Email New Invoice No Org Logo
Email New Invoice With Autopay Banner
Email New Invoice With Button
Email New Invoice With Markdown
Email Organization Invitation
Email Organization Invitation No Logo
Email Organization Invitation With Markdown
Email Receipt
Email Receipt With Invoice Link
Email Receipt With Markdown
Email Subcription Confirmation
Email Subcription Confirmation No Logo
Email Subcription Confirmation With Markdown
Email Subcription Confirmation With Markdown No Org Logo
Email Subscription Confirmation With Products
Email Subscription Confirmation With Zero Units
Email Subscription Sign
Email Subscription Sign Custom Markdown
Email Subscription Sign Internal
Email Subscription Sign No Logo
Email Subscription Sign With Quote Link
Email Subscription Signed
Email Subscription Signed Custom Markdown
Email Subscription Signed No Logo
Email Subscription Signed With Quote Link
Email Subscription Updated
Email Wallet Top Up Complete Request
Generic With Markdown
▶
ExternalInvoice
Default
With Metered Line Items
With Nested Line Item Groups
With Rollup Billing Groups
▶
ExternalPlan
Default
▶
OnboardingTemplate
All Completed
Default
Partially Completed
▶
PDFCreditNote
Default
▶
PDFInvoice
All Data Routing Number Label Payment Info
All Data With Additional Payment Info
Basic
Basic With Footer Text
Basic With Mark Down Footer Text
No Payment Info
Some Payment Info
With Basic Groups
With Complex Groups
With Long Footer Text
With Multiple Foot Notes
With Offline Bank Account Payment Info
With Payment Bank Account Summary
With Payment Summary
With Reverse Charges Footnote
With Rollup Billing Groups
▶
PDFStatementOfAccounts
All Paid Invoices
All Unpaid Invoices
Basic
Many Invoices
No Period
With Footer Text
▶
PDFSubscription
▶
Molecules
▶
CustomTerms
All Terms Comparison
Discount Variations
All Products
Bundle
Fixed Product
Graduated Percentage Product
Graduated Tiered Product
Metered Tiered Product
Metered Unit Based Product
Prepaid Fixed Tiered Product
Tiered Percentage Product
With Long Signer Name
With Product Level Custom Terms
With Rich Text Additional Terms
With Subscription Level Custom Terms
With Terms Links And Files
With Two Empty Signatures
With Two Signatures
With Two Signatures One Empty
Without Signature
Select a story from the tree
