components
Figma-sourced components built with CVA + semantic tokens. Each component mirrors its Figma variant structure exactly.
Button
filled · outline · link · 3 sizes
+91
Input
6 states · 5 addon types
Badge
Badge
Badge
Badge
Cash Buyout
Undecided
Tag / Chip
5 colors · 3 types · light/dark chips
Heading
Tooltips are used to describe or identify an element.
Tooltip
8 arrow positions · title · body
Info heading
Learn more · View Changes →
Alert heading
Danger · dismissible
Success heading
Alert
info · alert · success · warning
AG
AG
AG
AG
A
B
+2
Avatar
image · icon · initials · 4 sizes · group
Available
Toggle
on · off · 3 sizes · with label
Placeholder
|Placeholder
Arunachal Pradesh+4more
Dropdown
7 states · menu · checkbox · badge
Tab
active · inactive · underline
Switches
segmented · lg · md
…
Pagination
desktop · mobile · numbers · text
Home
Current Page
Home
Category
Current Page
Home
Category
Sub
Page
Breadcrumbs
1–4 levels · chevron separator
node 3727:1636
CVA
Radix Slot
Button
A three-axis component: variant × intent × size — built from Figma compound variants and wired to semantic tokens.
Playground
Live preview · adjust props and copy code
Label
style
type
size
Left Iconboolean
Right Iconboolean
isLoadingboolean
disabledboolean
JSX
Filled
Style=Filled — solid background · node 3728:1706
Primary
Success
Destructive
Warning
Information
Outline
Style=Outline — transparent fill + coloured border · node 3730:2124
Primary
Success
Destructive
Warning
Information
Text Button
Style=text button — no background, no border · hover shows subtle fill · node 3730:2418
Primary
Success
Destructive
Warning
Information
Sizes
Size=40 · 36 · 32 — filled · outline · text button
40 · 40px
36 · 36px
32 · 32px
Props
| Prop | Type | Default | Figma |
|---|---|---|---|
| style | filled outline text | filled | Style=Filled / Outline / text button |
| type | primary success destructive warning information | primary | Type=primary / success / Destructive / Warning / Information |
| size | 40 36 32 | 40 | Size=40 / 36 / 32 — height in px, padding 10 / 10 / 8 |
| isLoading | boolean | false | State=loading — shows spinner, disables interaction |
| disabled | boolean | false | State=disable — muted bg (filled) or greyed border/text (outline/text) |
| asChild | boolean | false | Render as child element via Radix Slot (e.g. <a>) |
Semantic tokens used
--semantic-color/background/brand/brand-primary · #1960bd
--semantic-color/background/brand/brand-semibold · #1851a0
--semantic-color/background/brand/brand-bold · #124287
--semantic-color/background/brand/brand-subtle · #e8f0fc
--semantic-color/background/brand/brand-medium · #d1e3fa
--semantic-color/background/neutral/medium · #b2c1d7
--semantic-color/typography/on-surface · white
--semantic-color/typography/brand · #1960bd
--semantic-color/typography/disable · #8da4be
--semantic-color/border/brand-primary · #1960bd
--semantic-color/border/brand-semibold · #1851a0
--semantic-color/border/brand-bold · #124287
--semantic-color/border/default · #d8e3ee
--corner-radius/large · 8px
node 3720:744
CVA
forwardRef
Input
A two-axis component: state × addonType — with optional label, help text, and error text. Built from Figma compound variants.
Playground
Live preview · adjust props and copy code
Help text will be shown here
label text
placeholder
addon text
state
addonType
showLabelboolean
showHelpTextboolean
JSX
States
6 states · Default type
Default
Active
Filled
Disable
Filled Disable
Error
Help text will be shown here
Types
Default · Leading Icon · Trailing Icon · Leading Text · Trailing Text
Help text will be shown here
Help text will be shown here
Help text will be shown here
+91
Help text will be shown here
$
Help text will be shown here
Props
Full API surface from Input.tsx
| Prop | Type | Default | Description |
|---|---|---|---|
| state | InputState | default | Visual interaction state |
| addonType | InputAddonType | default | Addon slot placement |
| label | string | "Label" | Visible label above the field |
| helpText | string | "Help text..." | Helper copy below the field |
| errorText | string | "Required" | Error copy — shown when state="error" |
| addonText | string | "+1" | Text shown in text-first/last addon slot |
| showLabel | boolean | true | Show/hide the label element |
| showHelpText | boolean | false | Show help/error text below field |
| placeholder | string | "Placeholder" | Native input placeholder |
| disabled | boolean | — | Native disabled attribute |
| ref | Ref<HTMLInputElement> | — | Forwarded ref to inner input |
node 106:560
CVA
forwardRef
Tag / Chip
A two-component set: Tag for semantic labels (5 colors × 3 types) and Chip for status badges with light/dark modes.
Playground
Live preview · adjust props and copy code
Badge
text
color
variant
leadingIconboolean
trailingIconboolean
JSX
Color × Type
All 5 colors across 3 structural variants
With Icon
With Dot
With Number
Grey
Badge
Badge
Due Date: 20 Apr 2026
Blue
Badge
Badge
Due Date: 20 Apr 2026
Green
Badge
Badge
Due Date: 20 Apr 2026
Orange
Badge
Badge
Due Date: 20 Apr 2026
Red
Badge
Badge
Due Date: 20 Apr 2026
Chip
Status badge — 3 states × 2 modes
Light mode
Cash Buyout
Contingency
Undecided
Dark mode
Cash Buyout
Contingency
Undecided
Tag Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'grey' | Semantic color variant |
| variant | 'icon' | 'dot' | 'number' | 'icon' | Layout variant — icon=badge+close, dot=dot+label, number=date text |
| text | string | 'Badge' | Label text shown in icon + dot variants |
| numberText | string | 'Due Date: 20 Apr 2026' | Text shown in number variant |
| leadingIcon | boolean | true | Show leading info icon (icon + number variants) |
| trailingIcon | boolean | true | Show trailing close button (icon variant only) |
| onClose | () => void | — | Callback fired when × is clicked |
Chip Props
| Prop | Type | Default | Description |
|---|---|---|---|
| state | 'cashBuyout' | 'contingency' | 'undecided' | 'cashBuyout' | Status state — controls label + color |
| mode | 'light' | 'dark' | 'light' | Light or dark background mode |
node 106:689
CSS triangles
forwardRef
Tooltip
Dark-surface popover with an optional directional arrow tip. Supports 8 arrow positions: bottom-left/centre/right, top-left/centre/right, left-centre, right-centre.
Playground
Live preview · adjust props and copy code
Heading
Tooltips are used to describe or identify an element.
title
body
position
showBodyboolean
showCloseboolean
showArrowboolean
JSX
Arrow Positions
All 8 directional variants
bottomLeft
Heading
Tooltips are used to describe or identify an element.
bottomCentre
Heading
Tooltips are used to describe or identify an element.
bottomRight
Heading
Tooltips are used to describe or identify an element.
topLeft
Heading
Tooltips are used to describe or identify an element.
topCentre
Heading
Tooltips are used to describe or identify an element.
topRight
Heading
Tooltips are used to describe or identify an element.
leftCentre
Heading
Tooltips are used to describe or identify an element.
rightCentre
Heading
Tooltips are used to describe or identify an element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | 'Heading' | Bold heading line |
| body | string | 'Tooltips are used to…' | Smaller body copy below the title |
| showBody | boolean | true | Toggle body text visibility |
| showClose | boolean | true | Show the × dismiss button |
| showArrow | boolean | true | Show the directional arrow tip |
| position | 'bottomLeft' | 'bottomCentre' | 'bottomRight' | 'topLeft' | 'topCentre' | 'topRight' | 'leftCentre' | 'rightCentre' | 'bottomLeft' | Arrow tip position |
| onClose | () => void | — | Callback fired when × is pressed |
Checkbox
Selection control for independent boolean choices. Supports checked, indeterminate, and disabled states.
States
Default
Selected
Partial
Disabled off
Disabled on
Interactive
Group — Select all pattern
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Text shown beside the checkbox |
| checked | boolean | false | Controlled checked state |
| indeterminate | boolean | false | Shows minus icon — partial selection |
| disabled | boolean | false | Prevents interaction, reduces opacity |
| onChange | (checked: boolean) => void | — | Fires with new boolean value on change |
Radio Button
Single-selection control within a mutually exclusive group. One option active at a time.
States
Default
Active
Disabled off
Disabled on
Interactive — Radio Group
Subscription plan
Inline Group
Notification frequency
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Text shown beside the radio button |
| checked | boolean | false | Controlled selected state |
| disabled | boolean | false | Prevents interaction, reduces opacity |
| onChange | (checked: boolean) => void | — | Fires when radio is selected |
| name | string | — | Groups radios — only one can be active |
| value | string | — | The value passed on form submit |
Alert
Contextual feedback banners with four semantic variants — Info, Alert, Success, and Warning. Each supports heading, body copy, action links, and a dismiss button.
Playground
Live preview · adjust props and copy code
typeInfo | Alert | Success | Warning
showCloseboolean
showActionsboolean
showBodyboolean
JSX
Variants
Four types × full content
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
Learn moreView Changes →
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
Learn moreView Changes →
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
Learn moreView Changes →
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
Learn moreView Changes →
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'Info' | 'alert' | 'Success' | 'Warning' | 'Info' | Sets the colour scheme and icon |
| heading | string | 'Heading' | Bold heading text |
| paragraph | string | 'Lorem ipsum…' | Descriptive body copy below the heading |
| showBody | boolean | true | Toggle the paragraph body copy |
| showActions | boolean | true | Show "Learn more" and "View Changes" links |
| showClose | boolean | true | Show the × dismiss button |
| onClose | () => void | — | Callback fired when × is pressed |
node 24-425
CVA
3 types
Avatar
A circular identity component available in three types — Image, Icon, and Initials — across 4 sizes with optional status indicators, plus a ThumbnailsGroup for stacked layouts.
Playground
Live preview · adjust props and copy code
type
size
status
initials
TSX
Sizes & Types
All type × size combinations
Initials
Icon
Image
XS · 24px
AG
SM · 32px
AG
MD · 40px
AG
LG · 56px
AG
Status Indicators
Active · Idle · Offline · Busy
AG
AG
AG
AG
Thumbnails Group
Stacked overlapping avatars with overflow counter
SM · 32px
AG
+2
MD · 40px
AG
+5
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "Initials" | "Icon" | "Image" | Initials | Visual type of the avatar |
| size | "xs" | "sm" | "md" | "lg" | md | Controls diameter: 24 / 32 / 40 / 56px |
| status | "active" | "idle" | "offline" | "busy" | undefined | Shows a status dot at bottom-right. Omit to hide |
| initials | string | — | 1–2 character text shown when type is Initials |
| src | string | — | Image URL shown when type is Image |
| alt | string | — | Alt text for the photo — required for accessibility when type is Image |
node 27-120
CVA
3 sizes
Toggle
A binary on/off control — available in three sizes with an optional inline label. Maps to the checked boolean prop and fires an onChange handler.
Playground
Live preview · adjust props and copy code
checked
size
Show Labelboolean
Disabledboolean
label
TSX
States
Off · On · Disabled Off · Disabled On
Off
On
Disabled Off
Disabled On
Sizes
SM 28×16 · MD 36×20 · LG 44×24
SM
MD
LG
Toggle with Label
Inline label for contextual use
Available
Available
Enable notifications
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Controls the on/off state |
| onChange | (checked: boolean) => void | — | Callback fired when the user toggles |
| size | "sm" | "md" | "lg" | sm | 28×16 / 36×20 / 44×24px |
| label | string | — | Inline label text. When provided renders a Toggle with Text layout |
| disabled | boolean | false | Prevents interaction, reduces opacity to 40% |
node 35-92
7 states
Menu · Checkbox · Badge
Dropdown
A select trigger field with 7 states — Default, Focused, Filled, Disabled, Error, Filled-Disabled, and Filled-Error — paired with an open-menu panel that supports plain text items, checkboxes, and all-selected views.
Playground
Live preview · adjust props and copy code
Label
Placeholder
state
Show titleboolean
Help textboolean
Badgeboolean
JSX
States
Default · Focused · Filled · Disabled · Error · Filled-Disabled · Filled-Error
Default
Title
Placeholder
Focused
Title
|Placeholder
Filled
Title
Arunachal Pradesh+4more
Disabled
Title
Placeholder
Error
Title
Placeholder
help text will be shown here
Filled · Disabled
Title
Arunachal Pradesh
Filled · Error
Title
Arunachal Pradesh+4more
help text will be shown here
Menu Types
Text only · With checkboxes · All selected
Text only
Title
|Placeholder
With checkboxes
Title
|Placeholder
All selected
Title
|Placeholder
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Field label shown above the trigger |
| placeholder | string | "Placeholder" | Hint text when no value selected |
| value | string | — | Currently selected value (filled state) |
| state | default focused filled disabled error filled-disabled filled-error | default | Visual state of the trigger |
| options | string[] | — | Array of option labels for the menu |
| checkbox | boolean | false | Show checkboxes in menu items |
| badge | string | — | Badge label shown after value (e.g. "+4more") |
| helpText | string | — | Help / error message below the trigger |
| onChange | (v: string) => void | — | Callback when selection changes |
node 34-67
Underline
Active / Inactive
Tab
Horizontal underline tab bar. The active tab shows a brand-blue 2 px bottom border; inactive tabs remain flat. Fully controlled — swap .active to move selection.
Playground
Live preview · adjust props and copy code
Label
activeIndex
count
JSX
States
Active tab with brand underline · inactive tabs flat
Active — Tab 1
Active — Tab 3
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | string[] | — | Array of tab labels to render |
| activeIndex | number | 0 | Index of the currently active tab |
| onChange | (i: number) => void | — | Callback fired when a tab is clicked |
| className | string | — | Extra classes on the bar wrapper |
node 34-81
Segmented
Lg · Md
Switches
Pill-shaped segmented control. The active item lifts to a white surface with a soft shadow; all other items remain flat. Two sizes — lg (44 px) and md (36 px).
Playground
Live preview · adjust props and copy code
Label
size
activeIndex
count
JSX
Sizes
Lg 44 px · Md 36 px
Large — 44 px
Medium — 36 px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | string[] | — | Array of option labels |
| activeIndex | number | 0 | Index of the selected item |
| size | "lg" "md" | "lg" | Height variant — 44 px or 36 px |
| onChange | (i: number) => void | — | Callback fired when selection changes |
node 133-264
Desktop · Mobile
Numbers · Text
Pagination
Navigate between pages of content. Supports numbered page buttons and text-only variants in both desktop (with text labels) and mobile (icon-only arrows) breakpoints.
Playground
Live preview · adjust props and copy code
Type
Breakpoint
Current Page
Total Pages
JSX
Desktop — Numbers
Previous / Next with text + page number buttons
First page
…
Middle page
…
…
Last page
…
Desktop — Text Only
Previous / Next + "Page X of Y"
Page 3 of 10
Mobile — Numbers
Icon-only arrow buttons + page numbers
…
Mobile — Text Only
Icon-only arrows + "Page X of Y"
Page 3 of 10
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| currentPage | number | 1 | The currently active page |
| totalPages | number | — | Total number of pages |
| type | "numbers" "text" | "numbers" | Show page buttons or "Page X of Y" text |
| mobile | boolean | false | Icon-only arrow buttons for mobile breakpoint |
| onChange | (page: number) => void | — | Callback fired on page change |
node 51-102
1–4 levels
Chevron separator
Breadcrumbs
Show the user's location within a hierarchy. Links render in brand blue; the current (last) item is plain text. Up to four depth levels supported.
Playground
Live preview · adjust props and copy code
Depth
Home Label
Level 2
Level 3
Level 4
Current Page
JSX
Depth Variants
1 to 4 levels deep
One liner — depth 1
Home
Current Page
Two liner — depth 2
Home
Category
Current Page
Three liner — depth 3
Home
Category
Sub-category
Current Page
Four liner — depth 4
Home
Category
Sub-category
Detail
Current Page
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; href?: string }[] | — | Array of crumb objects. Last item renders as current page (no link) |
| separator | ReactNode | chevron | Custom separator element between items |
| onNavigate | (href: string) => void | — | Called when a link crumb is clicked |