fills the card instead of just wrapping its two buttons."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"open",
"onClose",
"title"
],
"requiresAccessibleName": false
}
},
{
"name": "NotificationItem",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/NotificationItem/NotificationItem.tsx",
"summary": "Matches Figma \"Notification Item\" (3 style previews -- Unread, Read, Dismissable -- collapsed into composable props, same judgment already applied throughout this Application set):",
"props": [
{
"name": "icon",
"type": "ReactNode",
"required": false
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "timestamp",
"type": "string",
"required": false,
"description": "Simple row only."
},
{
"name": "read",
"type": "boolean",
"required": false,
"default": "false",
"description": "Simple row only -- false (default) shows the unread background + dot."
},
{
"name": "description",
"type": "string",
"required": false,
"description": "Presence switches to the actionable card style."
},
{
"name": "onDismiss",
"type": "(() => void)",
"required": false,
"description": "Fires from both the header's X and the footer's Dismiss button."
},
{
"name": "dismissLabel",
"type": "string",
"required": false,
"default": "Dismiss"
},
{
"name": "actionLabel",
"type": "string",
"required": false
},
{
"name": "onAction",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title"
],
"requiresAccessibleName": false
}
},
{
"name": "Pagination",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/Pagination/Pagination.tsx",
"summary": "Page navigation. Matches Figma \"Pagination\": prev/next arrows + numbered page buttons (32px, radius-sm, bg/surface, border/subtle), active page filled accent.",
"props": [
{
"name": "total",
"type": "number",
"required": true,
"description": "Total number of pages."
},
{
"name": "page",
"type": "number",
"required": true,
"description": "Current page (1-based)."
},
{
"name": "onPageChange",
"type": "(page: number) => void",
"required": true
},
{
"name": "siblings",
"type": "number",
"required": false,
"default": "1",
"description": "Sets how many page numbers show between the ellipses: blocks of siblings * 2 + 1 (3 by default). Total slots are siblings * 2 + 5."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"total",
"page",
"onPageChange"
],
"requiresAccessibleName": false
}
},
{
"name": "PieChart",
"kind": "component",
"category": "Charts",
"import": "@sakaniui/react",
"source": "src/components/PieChart/PieChart.tsx",
"summary": "Recharts wrapper styled with Sakani chart tokens.",
"props": [
{
"name": "data",
"type": "PieDatum[]",
"required": true
},
{
"name": "variant",
"type": "\"stacked\" | \"label\" | \"custom-label\" | \"pie\" | \"pie-no-separator\" | \"label-list\" | \"donut\" | \"donut-active\" | \"donut-with-text\" | \"interactive\"",
"required": false,
"values": [
"stacked",
"label",
"custom-label",
"pie",
"pie-no-separator",
"label-list",
"donut",
"donut-active",
"donut-with-text",
"interactive"
],
"default": "donut"
},
{
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"values": [
"sm",
"md",
"lg",
"xl"
],
"default": "md"
},
{
"name": "centerValue",
"type": "string",
"required": false,
"description": "Big number shown in the center. Only rendered for \"donut-with-text\"."
},
{
"name": "centerCaption",
"type": "string",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"data"
],
"requiresAccessibleName": false
}
},
{
"name": "PlaceholderLogo",
"kind": "component",
"category": "Marketing",
"import": "@sakaniui/react",
"source": "src/components/MarketingComponents/PlaceholderLogo/PlaceholderLogo.tsx",
"summary": "Matches Figma \"Placeholder Logo\" (Marketing primitives set, 3 sizes: sm 22 / md 40 / lg 46) -- a bg/surface + border/subtle + radius/lg square slot for a company/brand mark, same \"empty-state avatar\" role Avatar's own Icon type fills for a person.",
"props": [
{
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\"",
"required": false,
"values": [
"sm",
"md",
"lg"
],
"default": "md",
"description": "Figma Size axis. Defaults to \"md\"."
},
{
"name": "logo",
"type": "ReactNode",
"required": false,
"description": "Custom logo/icon slot. Defaults to the Sakani mark, matching Figma."
},
{
"name": "label",
"type": "string",
"required": false,
"description": "Accessible name, e.g. \"Acme Inc.\""
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "Popover",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/Popover/Popover.tsx",
"summary": "Floating panel anchored to a trigger. Matches Figma \"Popover\" (Buttons 1-3), with title/description toggles.",
"props": [
{
"name": "trigger",
"type": "ReactNode",
"required": true,
"description": "The clickable element that toggles the popover."
},
{
"name": "title",
"type": "string",
"required": false
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "actions",
"type": "ReactNode",
"required": false,
"description": "Footer actions (1-3 buttons)."
},
{
"name": "placement",
"type": "\"bottom\" | \"top\" | \"bottom-start\" | \"bottom-end\"",
"required": false,
"values": [
"bottom",
"top",
"bottom-start",
"bottom-end"
],
"default": "bottom-start"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"trigger"
],
"requiresAccessibleName": false
}
},
{
"name": "PriceDisplay",
"kind": "component",
"category": "E-commerce",
"import": "@sakaniui/react",
"source": "src/components/ECommerceComponents/PriceDisplay/PriceDisplay.tsx",
"summary": "Matches Figma \"Price Display\" (E-commerce set).",
"props": [
{
"name": "price",
"type": "number",
"required": true
},
{
"name": "compareAtPrice",
"type": "number",
"required": false,
"description": "Presence switches to the struck-through-original + danger-solid current price."
},
{
"name": "showBadge",
"type": "boolean",
"required": false,
"default": "false",
"description": "Shows a \"Save X%\" badge, computed from price vs. compareAtPrice. No-op without compareAtPrice."
},
{
"name": "formatPrice",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"price"
],
"requiresAccessibleName": false
}
},
{
"name": "ProductCard",
"kind": "component",
"category": "E-commerce",
"import": "@sakaniui/react",
"source": "src/components/ECommerceComponents/ProductCard/ProductCard.tsx",
"summary": "Matches Figma \"Product Card\" (E-commerce set): image (wishlist button + sale badge overlay) -> rating -> name/price -> description -> color swatches -> \"Add Item\" button.",
"props": [
{
"name": "image",
"type": "string",
"required": true
},
{
"name": "imageAlt",
"type": "string",
"required": false
},
{
"name": "name",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "price",
"type": "number",
"required": true
},
{
"name": "compareAtPrice",
"type": "number",
"required": false,
"description": "Presence switches to the sale badge + struck-original/danger-current price."
},
{
"name": "rating",
"type": "number",
"required": false
},
{
"name": "reviewCount",
"type": "number",
"required": false
},
{
"name": "colors",
"type": "ProductCardColor[]",
"required": false,
"default": "[]"
},
{
"name": "onColorSelect",
"type": "((id: string) => void)",
"required": false
},
{
"name": "inStock",
"type": "boolean",
"required": false,
"default": "true"
},
{
"name": "wishlisted",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "onWishlistToggle",
"type": "((wishlisted: boolean) => void)",
"required": false
},
{
"name": "onAddItem",
"type": "(() => void)",
"required": false
},
{
"name": "addItemLabel",
"type": "string",
"required": false,
"default": "Add Item"
},
{
"name": "formatPrice",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"image",
"name",
"price"
],
"requiresAccessibleName": false
}
},
{
"name": "ProductGallery",
"kind": "component",
"category": "E-commerce",
"import": "@sakaniui/react",
"source": "src/components/ECommerceComponents/ProductGallery/ProductGallery.tsx",
"summary": "Matches Figma \"Product Gallery\" (E-commerce set): a main image plus selectable thumbnails, click a thumb to make it the main image.",
"props": [
{
"name": "images",
"type": "ProductGalleryImage[]",
"required": true
},
{
"name": "thumbsPosition",
"type": "\"bottom\" | \"left\"",
"required": false,
"values": [
"bottom",
"left"
],
"default": "bottom"
},
{
"name": "activeIndex",
"type": "number",
"required": false,
"description": "Controlled active image index. Omit to let the gallery manage its own selection."
},
{
"name": "defaultActiveIndex",
"type": "number",
"required": false,
"default": "0"
},
{
"name": "onActiveIndexChange",
"type": "((index: number) => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"images"
],
"requiresAccessibleName": false
}
},
{
"name": "ProfileCard",
"kind": "component",
"category": "Marketing",
"import": "@sakaniui/react",
"source": "src/components/MarketingComponents/ProfileCard/ProfileCard.tsx",
"summary": "Matches Figma \"Profile Card\" (Marketing primitives set, 2 styles: Compact, Detailed).",
"props": [
{
"name": "name",
"type": "string",
"required": true
},
{
"name": "role",
"type": "string",
"required": true
},
{
"name": "avatarSrc",
"type": "string",
"required": false
},
{
"name": "avatarAlt",
"type": "string",
"required": false
},
{
"name": "bio",
"type": "string",
"required": false,
"description": "Presence (with or without socialLinks) switches to the centered Detailed layout."
},
{
"name": "socialLinks",
"type": "ProfileCardSocialLink[]",
"required": false,
"default": "[]"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"name",
"role"
],
"requiresAccessibleName": false
}
},
{
"name": "Progress",
"kind": "component",
"category": "Core",
"import": "@sakaniui/react",
"source": "src/components/Progress/Progress.tsx",
"summary": "Linear progress bar.g.",
"props": [
{
"name": "value",
"type": "number",
"required": false,
"description": "0–100. Omit for indeterminate mode."
},
{
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\"",
"required": false,
"values": [
"sm",
"md",
"lg"
],
"default": "md"
},
{
"name": "label",
"type": "string",
"required": false,
"default": "Progress",
"description": "Accessible label"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "ProgressItem",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/ProgressItem/ProgressItem.tsx",
"summary": "One row of a numbered step list.",
"props": [
{
"name": "step",
"type": "number",
"required": true
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "completed",
"type": "boolean",
"required": false,
"default": "false",
"description": "Shows a checkmark in the circle instead of `step`."
},
{
"name": "orientation",
"type": "\"vertical\" | \"horizontal\"",
"required": false,
"values": [
"vertical",
"horizontal"
],
"default": "horizontal"
},
{
"name": "isLast",
"type": "boolean",
"required": false,
"default": "false",
"description": "Hides the trailing connector -- the last row in a list."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"step",
"title"
],
"requiresAccessibleName": false
}
},
{
"name": "ProgressStat",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/ProgressStat/ProgressStat.tsx",
"summary": "Label + value row above a progress bar.",
"props": [
{
"name": "label",
"type": "string",
"required": true
},
{
"name": "value",
"type": "string",
"required": true,
"description": "Formatted value shown on the right, e.g. \"80%\" or \"24 GB / 30 GB\"."
},
{
"name": "progress",
"type": "number",
"required": true,
"description": "0-100, drives the bar fill."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"label",
"value",
"progress"
],
"requiresAccessibleName": false
}
},
{
"name": "QuantitySelector",
"kind": "component",
"category": "E-commerce",
"import": "@sakaniui/react",
"source": "src/components/ECommerceComponents/QuantitySelector/QuantitySelector.tsx",
"summary": "Matches Figma \"Quantity Selector\" (E-commerce set): a 3-cell stepper -- decrement / value / increment, separated by 1px dividers, only the outer frame rounded/bordered.",
"props": [
{
"name": "quantity",
"type": "number",
"required": true
},
{
"name": "onQuantityChange",
"type": "((quantity: number) => void)",
"required": false
},
{
"name": "min",
"type": "number",
"required": false,
"default": "1"
},
{
"name": "max",
"type": "number",
"required": false
},
{
"name": "label",
"type": "string",
"required": false,
"default": "Quantity",
"description": "Accessible group label, e.g. \"Quantity for Ceramic Pour-Over Mug\"."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"quantity"
],
"requiresAccessibleName": false
}
},
{
"name": "RadarChart",
"kind": "component",
"category": "Charts",
"import": "@sakaniui/react",
"source": "src/components/RadarChart/RadarChart.tsx",
"summary": "Recharts wrapper styled with Sakani chart tokens.",
"props": [
{
"name": "data",
"type": "RadarDatum[]",
"required": true
},
{
"name": "variant",
"type": "\"default\" | \"multiple\" | \"dots\" | \"custom-label\" | \"dots-grid-none\" | \"lines-only\" | \"circle-grid\" | \"circle-grid-no-lines\" | \"grid-custom\" | \"grid-filled\" | \"circle-grid-filled\"",
"required": false,
"values": [
"default",
"multiple",
"dots",
"custom-label",
"dots-grid-none",
"lines-only",
"circle-grid",
"circle-grid-no-lines",
"grid-custom",
"grid-filled",
"circle-grid-filled"
],
"default": "default"
},
{
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"values": [
"sm",
"md",
"lg",
"xl"
],
"default": "md"
},
{
"name": "seriesLabels",
"type": "[string, (string)?]",
"required": false,
"default": "['Value', 'Value 2']",
"description": "Legend labels for `value` / `value2`, shown for \"multiple\"."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"data"
],
"requiresAccessibleName": false
}
},
{
"name": "RadialChart",
"kind": "component",
"category": "Charts",
"import": "@sakaniui/react",
"source": "src/components/RadialChart/RadialChart.tsx",
"summary": "Recharts wrapper styled with Sakani chart tokens.",
"props": [
{
"name": "data",
"type": "RadialDatum[]",
"required": true
},
{
"name": "variant",
"type": "\"stacked\" | \"text\" | \"grid\" | \"multi\" | \"shape\" | \"gauge-tick\" | \"stacked-3-layers\" | \"stacked-label\"",
"required": false,
"values": [
"stacked",
"text",
"grid",
"multi",
"shape",
"gauge-tick",
"stacked-3-layers",
"stacked-label"
],
"default": "multi"
},
{
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"values": [
"sm",
"md",
"lg",
"xl"
],
"default": "md"
},
{
"name": "centerValue",
"type": "string",
"required": false
},
{
"name": "centerCaption",
"type": "string",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"data"
],
"requiresAccessibleName": false
}
},
{
"name": "Radio",
"kind": "component",
"category": "Forms",
"import": "@sakaniui/react",
"source": "src/components/Radio/Radio.tsx",
"summary": "Single radio button. Matches Figma \"Radio\" set: Unchecked | Hover | Checked | Disabled, with Title/Description toggles.",
"props": [
{
"name": "label",
"type": "string",
"required": false
},
{
"name": "description",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "RichSeparator",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/RichSeparator/RichSeparator.tsx",
"summary": "Two divider lines flanking arbitrary centered content.",
"props": [
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Full custom content between the two lines (e.g. a brand badge or icon-wrap)."
},
{
"name": "label",
"type": "string",
"required": false,
"description": "Shorthand for the common case -- plain uppercase overline text. Ignored if `children` is set."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "RichTextHeading",
"kind": "component",
"category": "Marketing",
"import": "@sakaniui/react",
"source": "src/components/MarketingComponents/RichTextHeading/RichTextHeading.tsx",
"summary": "Matches Figma \"Rich Text Heading\" (Marketing primitives set, 2 levels: H2, H3).",
"props": [
{
"name": "level",
"type": "\"h2\" | \"h3\"",
"required": false,
"values": [
"h2",
"h3"
],
"default": "h2",
"description": "Figma Level axis. Defaults to \"h2\"."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "RichTextParagraph",
"kind": "component",
"category": "Marketing",
"import": "@sakaniui/react",
"source": "src/components/MarketingComponents/RichTextParagraph/RichTextParagraph.tsx",
"summary": "Matches Figma \"Rich Text Paragraph\" (Marketing primitives set, 2 style previews: Default, With Link).",
"props": [
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "SectionHeading",
"kind": "component",
"category": "Marketing",
"import": "@sakaniui/react",
"source": "src/components/MarketingComponents/SectionHeading/SectionHeading.tsx",
"summary": "Matches Figma \"Section Heading\" (Marketing primitives set, 2 alignments: Center, Left). `align` stays a real, explicit prop (Figma's own axis) -- a genuine layout choice, not derivable from the heading's own content.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"description": "Small pill above the title, e.g. \"Features\". Omit to hide it."
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "subtitle",
"type": "string",
"required": false
},
{
"name": "align",
"type": "\"left\" | \"center\"",
"required": false,
"values": [
"left",
"center"
],
"default": "center",
"description": "Figma Align axis. Defaults to \"center\"."
},
{
"name": "titleAs",
"type": "\"h2\" | \"h3\" | \"h1\" | \"h4\"",
"required": false,
"values": [
"h2",
"h3",
"h1",
"h4"
],
"default": "h2",
"description": "Heading tag for `title`. Defaults to \"h2\"."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title"
],
"requiresAccessibleName": false
}
},
{
"name": "SegmentedControl",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/SegmentedControl/SegmentedControl.tsx",
"summary": "iOS-style toggle group. Matches Figma \"Segmented Control\" (2-6 buttons). Figma spec: track bg/subtle, radius-lg, padding 4, gap 2; active segment bg/surface, radius-md, label/md fg/default; inactive fg/muted.",
"props": [
{
"name": "options",
"type": "SegmentedOption[]",
"required": true
},
{
"name": "value",
"type": "string",
"required": false
},
{
"name": "defaultValue",
"type": "string",
"required": false
},
{
"name": "onChange",
"type": "((value: string) => void)",
"required": false
},
{
"name": "fullWidth",
"type": "boolean",
"required": false,
"description": "Stretch the track to fill its container; segments then share the width equally."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"options"
],
"requiresAccessibleName": false
}
},
{
"name": "Select",
"kind": "component",
"category": "Forms",
"import": "@sakaniui/react",
"source": "src/components/Select/Select.tsx",
"summary": "Single-select dropdown. Matches the Figma \"Select\" component: Size (sm|md|lg) x State (Default|Open|Disabled|Filled), Title/Description toggles.",
"props": [
{
"name": "label",
"type": "string",
"required": false
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "error",
"type": "string",
"required": false
},
{
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\"",
"required": false,
"values": [
"sm",
"md",
"lg"
],
"default": "md"
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "Select an option"
},
{
"name": "options",
"type": "SelectOption[]",
"required": true
},
{
"name": "value",
"type": "string",
"required": false,
"description": "Controlled value."
},
{
"name": "defaultValue",
"type": "string",
"required": false,
"description": "Uncontrolled initial value."
},
{
"name": "onChange",
"type": "((value: string) => void)",
"required": false
},
{
"name": "disabled",
"type": "boolean",
"required": false
},
{
"name": "id",
"type": "string",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"options"
],
"requiresAccessibleName": false
}
},
{
"name": "Sidebar",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/Sidebar/Sidebar.tsx",
"summary": "Sidebar (container)",
"props": [
{
"name": "collapsed",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "SidebarDivider",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/SidebarDivider/SidebarDivider.tsx",
"summary": "Horizontal rule between sections. Matches Figma \"Sidebar Divider\": border/subtle, full width, small vertical margin.",
"props": [],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "SidebarFooter",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/SidebarFooter/SidebarFooter.tsx",
"summary": "Bottom user/actions area. Matches Figma \"Sidebar Footer\": Type (User | User + Menu | Actions) x Collapsed.",
"props": [
{
"name": "type",
"type": "\"user\" | \"user-menu\" | \"actions\"",
"required": false,
"values": [
"user",
"user-menu",
"actions"
],
"default": "user"
},
{
"name": "title",
"type": "string",
"required": false
},
{
"name": "subtitle",
"type": "string",
"required": false
},
{
"name": "avatarSrc",
"type": "string",
"required": false,
"description": "Avatar image URL (passed to the system Avatar component)."
},
{
"name": "avatarInitials",
"type": "string",
"required": false,
"description": "Avatar initials fallback (passed to the system Avatar component)."
},
{
"name": "collapsed",
"type": "boolean",
"required": false
},
{
"name": "onMenu",
"type": "(() => void)",
"required": false
},
{
"name": "onSignOut",
"type": "(() => void)",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "SidebarGroupLabel",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/SidebarGroupLabel/SidebarGroupLabel.tsx",
"summary": "Section heading. Matches Figma \"Sidebar Group Label\": padding 8/10/4, overline text style, fg/subtle, uppercase.",
"props": [],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "SidebarHeader",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/SidebarHeader/SidebarHeader.tsx",
"summary": "Matches Figma \"Sidebar Header\": Type (Brand | Workspace | Brand + Toggle) x Collapsed. Figma spec: padding 6/4, gap 10, title label/md-strong (fg/default), subtitle caption (fg/muted).",
"props": [
{
"name": "type",
"type": "\"brand\" | \"workspace\" | \"brand-toggle\"",
"required": false,
"values": [
"brand",
"workspace",
"brand-toggle"
],
"default": "brand"
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "subtitle",
"type": "string",
"required": false
},
{
"name": "logo",
"type": "ReactNode",
"required": false,
"description": "Logo/brand mark (Lucide icon or any node)."
},
{
"name": "collapsed",
"type": "boolean",
"required": false
},
{
"name": "onToggle",
"type": "(() => void)",
"required": false
},
{
"name": "toggleIcon",
"type": "IconComponent",
"required": false,
"default": "createIcon(\"layout-sidebar-left-collapse\", [\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\",\"M9 4v16\",\"M15 10l-2 2l2 2\"])",
"description": "Icon for the toggle button. Defaults to PanelLeftClose."
}
],
"contract": {
"requiredProps": [
"title"
],
"requiresAccessibleName": false
}
},
{
"name": "SidebarItem",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/SidebarItem/SidebarItem.tsx",
"summary": "Primary nav item.",
"props": [
{
"name": "icon",
"type": "IconComponent",
"required": false
},
{
"name": "label",
"type": "string",
"required": true
},
{
"name": "active",
"type": "boolean",
"required": false
},
{
"name": "activeIndicator",
"type": "boolean",
"required": false,
"default": "true",
"description": "Only matters when `active`. true (default) = bg/surface card + shadow + left accent bar (\"Active - Indicator\"). false = flat bg/subtle tint, no bar, no shadow (\"Active - Default\"). Works the same collapsed or not — Figma now defines both flavors in both layouts."
},
{
"name": "disabled",
"type": "boolean",
"required": false
},
{
"name": "badge",
"type": "string",
"required": false
},
{
"name": "hasSubmenu",
"type": "boolean",
"required": false
},
{
"name": "collapsed",
"type": "boolean",
"required": false
},
{
"name": "expanded",
"type": "boolean",
"required": false,
"description": "Only matters when `hasSubmenu`. Rotates the chevron 90° (pointing down) to show the section is open; the resting state points right, toward a closed section — matches Figma's collapsible \"Navigation group\" / \"Project group\" headers (node 2307:42338, e.g. 2308:18305 \"Projects\" expanded vs 2308:18387 \"Website refresh\" collapsed). Not a navigation disclosure like `active` — the caller owns the open/closed state and toggles this alongside conditionally rendering the children."
},
{
"name": "onClick",
"type": "(() => void)",
"required": false
},
{
"name": "href",
"type": "string",
"required": false
},
{
"name": "nativeTooltip",
"type": "boolean",
"required": false,
"default": "true",
"description": "Native title-attribute tooltip on collapse. Defaults to true; set false when the caller already wraps this in its own Tooltip component to avoid the two competing on hover."
}
],
"contract": {
"requiredProps": [
"label"
],
"requiresAccessibleName": false
}
},
{
"name": "SidebarPromo",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/SidebarPromo/SidebarPromo.tsx",
"summary": "Upsell / announcement card. Matches Figma \"Sidebar Promo\": Type (Upgrade | Announcement).",
"props": [
{
"name": "type",
"type": "\"upgrade\" | \"announcement\"",
"required": false,
"values": [
"upgrade",
"announcement"
],
"default": "upgrade"
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "ctaLabel",
"type": "string",
"required": false,
"description": "Full-width CTA button label."
},
{
"name": "onCta",
"type": "(() => void)",
"required": false
},
{
"name": "onDismiss",
"type": "(() => void)",
"required": false
},
{
"name": "icon",
"type": "IconComponent",
"required": false,
"default": "createIcon(\"sparkles\", [\"M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6\"])"
}
],
"contract": {
"requiredProps": [
"title"
],
"requiresAccessibleName": false
}
},
{
"name": "SidebarSearch",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/SidebarSearch/SidebarSearch.tsx",
"summary": "Matches Figma \"Sidebar Search\": Type (Field | Command) x Collapsed. Figma spec: 36px height, bg/subtle, border/subtle, radius-sm, padding 8/8/8/10, search icon (Lucide), placeholder body/sm fg/subtle.",
"props": [
{
"name": "type",
"type": "\"field\" | \"command\"",
"required": false,
"values": [
"field",
"command"
],
"default": "field"
},
{
"name": "placeholder",
"type": "string",
"required": false,
"default": "Search…"
},
{
"name": "collapsed",
"type": "boolean",
"required": false
},
{
"name": "value",
"type": "string",
"required": false
},
{
"name": "onChange",
"type": "((v: string) => void)",
"required": false
},
{
"name": "onClick",
"type": "(() => void)",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "SidebarSubItem",
"kind": "component",
"category": "Composite/Sidebar",
"import": "@sakaniui/react",
"source": "src/components/SidebarSubItem/SidebarSubItem.tsx",
"summary": "Nested nav item. Matches Figma \"Sidebar Sub Item\": State (Default|Hover|Active|Disabled). Figma spec: radius-sm, padding 0/10, label/sm. Default/Hover fg/muted, Active fg/default.",
"props": [
{
"name": "label",
"type": "string",
"required": true
},
{
"name": "active",
"type": "boolean",
"required": false
},
{
"name": "disabled",
"type": "boolean",
"required": false
},
{
"name": "onClick",
"type": "(() => void)",
"required": false
},
{
"name": "href",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"label"
],
"requiresAccessibleName": false
}
},
{
"name": "SizeSelector",
"kind": "component",
"category": "E-commerce",
"import": "@sakaniui/react",
"source": "src/components/ECommerceComponents/SizeSelector/SizeSelector.tsx",
"summary": "Matches Figma \"Size Selector\" (E-commerce set): a 40px label circle.",
"props": [
{
"name": "size",
"type": "string",
"required": true,
"description": "Size label, e.g. \"M\", \"XL\", \"38\"."
},
{
"name": "selected",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "available",
"type": "boolean",
"required": false,
"default": "true",
"description": "Defaults to true. False renders a disabled, unclickable button."
},
{
"name": "onSelect",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"size"
],
"requiresAccessibleName": false
}
},
{
"name": "Skeleton",
"kind": "component",
"category": "Core",
"import": "@sakaniui/react",
"source": "src/components/Skeleton/Skeleton.tsx",
"summary": "Placeholder loading shape — shimmer animation on a muted background. Use to represent content that is loading before data arrives.",
"props": [
{
"name": "variant",
"type": "\"text\" | \"rect\" | \"circle\"",
"required": false,
"values": [
"text",
"rect",
"circle"
],
"default": "text"
},
{
"name": "width",
"type": "string | number",
"required": false,
"description": "Width — defaults to 100% for rect/text, size for circle"
},
{
"name": "height",
"type": "string | number",
"required": false,
"description": "Height — defaults to 1em for text, 100% for rect, size for circle"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "Slider",
"kind": "component",
"category": "Forms",
"import": "@sakaniui/react",
"source": "src/components/Slider/Slider.tsx",
"summary": "Range slider. Figma \"Slider\" is a single component; this implements a functional controlled/uncontrolled range input styled to the token system.",
"props": [
{
"name": "label",
"type": "string",
"required": false
},
{
"name": "showValue",
"type": "boolean",
"required": false,
"description": "Show the current value to the right of the label."
},
{
"name": "min",
"type": "number",
"required": false,
"default": "0"
},
{
"name": "max",
"type": "number",
"required": false,
"default": "100"
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "SpendingBalance",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/SpendingBalance/SpendingBalance.tsx",
"summary": "Amount spent against a limit, with a bar and a remaining/over-limit footer.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "Spent this month"
},
{
"name": "spent",
"type": "number",
"required": true
},
{
"name": "limit",
"type": "number",
"required": true
},
{
"name": "formatAmount",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })",
"description": "Defaults to USD currency, 2 decimals (e.g. \"$1,240.00\")."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"spent",
"limit"
],
"requiresAccessibleName": false
}
},
{
"name": "Spinner",
"kind": "component",
"category": "Core",
"import": "@sakaniui/react",
"source": "src/components/Spinner/Spinner.tsx",
"summary": "Animated loading indicator. Inherits currentColor so it works on any background. Use inside buttons (loading state) or as a standalone page/section loader.",
"props": [
{
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\"",
"required": false,
"values": [
"sm",
"md",
"lg"
],
"default": "md"
},
{
"name": "label",
"type": "string",
"required": false,
"default": "Loading...",
"description": "Accessible label for screen readers"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "StarRating",
"kind": "component",
"category": "E-commerce",
"import": "@sakaniui/react",
"source": "src/components/ECommerceComponents/StarRating/StarRating.tsx",
"summary": "g.9 (2,300 reviews)\".",
"props": [
{
"name": "rating",
"type": "number",
"required": true,
"description": "0-5. Drives the filled/half/empty star count."
},
{
"name": "reviewCount",
"type": "number",
"required": false
},
{
"name": "showLabel",
"type": "boolean",
"required": false,
"default": "true",
"description": "Shows the numeric rating + review count text next to the stars. Defaults to true."
},
{
"name": "orientation",
"type": "\"vertical\" | \"horizontal\" | \"horizontal-reverse\"",
"required": false,
"values": [
"vertical",
"horizontal",
"horizontal-reverse"
],
"default": "horizontal",
"description": "Figma Orientation axis. Only meaningful while showLabel is true. Defaults to \"horizontal\"."
},
{
"name": "formatReviewCount",
"type": "((count: number) => string)",
"required": false,
"default": "(count: number) => count.toLocaleString('en-US')"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"rating"
],
"requiresAccessibleName": false
}
},
{
"name": "StatCard",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/StatCard/StatCard.tsx",
"summary": "Dashboard metric card. Matches Figma \"Stat Card\": Style (Minimal | Icon | Featured) x Trend (Up | Down | Flat), with Icon / Menu / Trend / Sparkline toggles.",
"props": [
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "value",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": false,
"description": "Supporting line under the delta (Figma: description)."
},
{
"name": "sparkline",
"type": "number[]",
"required": false,
"description": "Data points for the inline sparkline (Figma: Sparkline toggle)."
},
{
"name": "delta",
"type": "string",
"required": false,
"description": "e.g. \"+12.5%\" — colored by trend."
},
{
"name": "trend",
"type": "\"flat\" | \"up\" | \"down\"",
"required": false,
"values": [
"flat",
"up",
"down"
],
"default": "up"
},
{
"name": "badgeVariant",
"type": "\"info\" | \"success\" | \"warning\" | \"danger\" | \"neutral\" | \"accent\"",
"required": false,
"values": [
"info",
"success",
"warning",
"danger",
"neutral",
"accent"
],
"description": "Overrides the trend-derived badge color (e.g. a \"down\" delta that Figma still wants shown as warning, not danger, for a given card)."
},
{
"name": "variant",
"type": "\"icon\" | \"minimal\" | \"featured\"",
"required": false,
"values": [
"icon",
"minimal",
"featured"
],
"default": "minimal"
},
{
"name": "icon",
"type": "IconComponent",
"required": false,
"description": "Leading icon (shown for Icon/Featured styles)."
},
{
"name": "showMenu",
"type": "boolean",
"required": false,
"description": "Show a trailing menu button."
},
{
"name": "onMenu",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"value"
],
"requiresAccessibleName": false
}
},
{
"name": "Stepper",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/Stepper/Stepper.tsx",
"summary": "Progress stepper. Matches Figma \"Stepper\" (Steps 2-6) + \"Stepper Step\" (Completed | Current | Upcoming).",
"props": [
{
"name": "steps",
"type": "Step[]",
"required": true
},
{
"name": "current",
"type": "number",
"required": true,
"description": "Index of the current (active) step, 0-based."
},
{
"name": "orientation",
"type": "\"vertical\" | \"horizontal\"",
"required": false,
"values": [
"vertical",
"horizontal"
],
"default": "horizontal",
"description": "Orientation. Defaults to horizontal."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"steps",
"current"
],
"requiresAccessibleName": false
}
},
{
"name": "StepperStep",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/Stepper/Stepper.tsx",
"summary": "Progress stepper. Matches Figma \"Stepper\" (Steps 2-6) + \"Stepper Step\" (Completed | Current | Upcoming).",
"props": [
{
"name": "index",
"type": "number",
"required": true
},
{
"name": "state",
"type": "\"completed\" | \"current\" | \"upcoming\"",
"required": true,
"values": [
"completed",
"current",
"upcoming"
]
},
{
"name": "label",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "orientation",
"type": "\"vertical\" | \"horizontal\"",
"required": false,
"values": [
"vertical",
"horizontal"
],
"default": "horizontal"
},
{
"name": "delay",
"type": "number",
"required": false,
"default": "0",
"description": "ms to wait before this step's state change plays (the stepper uses it to sequence a multi-step move)."
},
{
"name": "fresh",
"type": "boolean",
"required": false,
"description": "True while this step has just changed state: plays the check-draw / arrival ripple."
}
],
"contract": {
"requiredProps": [
"index",
"state",
"label"
],
"requiresAccessibleName": false
}
},
{
"name": "StockMarket",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/StockMarket/StockMarket.tsx",
"summary": "Matches Figma \"Stock Market\" -- its 3 style previews collapse to 2 real axes, both derived rather than manual props (same judgment applied throughout this Application set): Positive vs.",
"props": [
{
"name": "logo",
"type": "ReactNode",
"required": true
},
{
"name": "symbol",
"type": "string",
"required": true
},
{
"name": "name",
"type": "string",
"required": true
},
{
"name": "price",
"type": "number",
"required": true
},
{
"name": "change",
"type": "StockMarketChange",
"required": true
},
{
"name": "formatAmount",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n Math.abs(amount).toLocaleString('en-US', { style: 'currency', currency: 'USD' })",
"description": "Defaults to USD currency, 2 decimals."
},
{
"name": "chart",
"type": "BarChartDatum[]",
"required": false,
"description": "Presence switches to the expanded Full card with a bar chart."
},
{
"name": "periodLabel",
"type": "string",
"required": false,
"default": "Last 6 months"
},
{
"name": "onPeriodClick",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"logo",
"symbol",
"name",
"price",
"change"
],
"requiresAccessibleName": false
}
},
{
"name": "StockStatus",
"kind": "component",
"category": "E-commerce",
"import": "@sakaniui/react",
"source": "src/components/ECommerceComponents/StockStatus/StockStatus.tsx",
"summary": "Matches Figma \"Stock Status\" (E-commerce set): a subtle-emphasis Badge in success/warning/danger.",
"props": [
{
"name": "quantity",
"type": "number",
"required": true
},
{
"name": "lowStockThreshold",
"type": "number",
"required": false,
"default": "5",
"description": "At or below this (and above 0), shows \"Only N left\" in warning. Defaults to 5."
},
{
"name": "label",
"type": "string",
"required": false,
"description": "Overrides the derived label text; the derived color still applies."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"quantity"
],
"requiresAccessibleName": false
}
},
{
"name": "SubFeature",
"kind": "component",
"category": "Marketing",
"import": "@sakaniui/react",
"source": "src/components/MarketingComponents/SubFeature/SubFeature.tsx",
"summary": "Matches Figma \"Sub Feature\" (Marketing primitives set, 2 independent axes: Layout (Horizontal/Vertical) x Left border (True/False)).",
"props": [
{
"name": "icon",
"type": "ReactNode",
"required": true
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": true
},
{
"name": "layout",
"type": "\"vertical\" | \"horizontal\"",
"required": false,
"values": [
"vertical",
"horizontal"
],
"default": "horizontal",
"description": "Figma Layout axis. Defaults to \"horizontal\"."
},
{
"name": "leftBorder",
"type": "boolean",
"required": false,
"default": "false",
"description": "Figma \"Left border\" axis. Defaults to false."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"icon",
"title",
"description"
],
"requiresAccessibleName": false
}
},
{
"name": "Switch",
"kind": "component",
"category": "Forms",
"import": "@sakaniui/react",
"source": "src/components/Switch/Switch.tsx",
"summary": "Toggle switch. Matches Figma \"Switch\" set (SW axis): Off | On | Disabled. Track spec from Figma: 36x20, radius-full, bg/muted (off) / accent/default (on).",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"description": "Optional label rendered to the right of the switch."
},
{
"name": "description",
"type": "ReactNode",
"required": false,
"description": "Help text under the label, left-aligned with it (not with the track), e.g. the current state of a controlled switch. Same pattern as Checkbox's description."
},
{
"name": "variant",
"type": "\"default\" | \"stretch\"",
"required": false,
"values": [
"default",
"stretch"
],
"default": "default",
"description": "`stretch` adds a liquid motion: the thumb stretches as it travels, then settles to a circle. `default` is the plain switch. Figma: Switch, Type axis."
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "Table",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/Table/Table.tsx",
"summary": "Data table.",
"props": [
{
"name": "columns",
"type": "TableColumn
[]",
"required": true
},
{
"name": "rows",
"type": "T[]",
"required": true
},
{
"name": "selectable",
"type": "boolean",
"required": false
},
{
"name": "selectedRows",
"type": "number[]",
"required": false
},
{
"name": "onSelectionChange",
"type": "((indices: number[]) => void)",
"required": false
},
{
"name": "rowKey",
"type": "((row: T, index: number) => string | number)",
"required": false
},
{
"name": "reorderable",
"type": "boolean",
"required": false,
"description": "Enable drag-to-reorder on rows. Fires with the new row order."
},
{
"name": "onReorder",
"type": "((rows: T[]) => void)",
"required": false
},
{
"name": "bordered",
"type": "boolean",
"required": false,
"default": "true",
"description": "Draws the table's own container border/radius. Defaults to true; set false when nesting inside a card that already has its own border (Figma: some Table instances sit borderless inside a Panel)."
},
{
"name": "responsive",
"type": "\"default\" | \"stacked\" | \"auto\"",
"required": false,
"values": [
"default",
"stacked",
"auto"
],
"default": "auto",
"description": "Matches Figma's \"Responsive\" variant (Default / Stacked). - 'auto' (default): renders as a normal table, and switches to the stacked card layout automatically below --bp-sm (640px). - 'default' / 'stacked': force one layout regardless of viewport — useful for Storybook, tests, or a deliberately narrow container."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"columns",
"rows"
],
"requiresAccessibleName": false
}
},
{
"name": "Tabs",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/Tabs/Tabs.tsx",
"summary": "Horizontal tab navigation. Matches Figma \"Tabs\" set (2–6 tabs).",
"props": [
{
"name": "items",
"type": "TabItem[]",
"required": true
},
{
"name": "value",
"type": "string",
"required": false,
"description": "Controlled active value."
},
{
"name": "defaultValue",
"type": "string",
"required": false,
"description": "Uncontrolled initial value."
},
{
"name": "onChange",
"type": "((value: string) => void)",
"required": false
},
{
"name": "bordered",
"type": "boolean",
"required": false,
"default": "true",
"description": "Bottom border under the whole track. Defaults to true."
},
{
"name": "fill",
"type": "boolean",
"required": false,
"default": "false",
"description": "Stretch every tab to share the row's width equally, like a segmented control, instead of each tab hugging its own label. Defaults to false."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"items"
],
"requiresAccessibleName": false
}
},
{
"name": "Tags",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/Tags/Tags.tsx",
"summary": "Matches Figma \"Tags\" -- a wrapped row of pill tags.",
"props": [
{
"name": "tags",
"type": "string[]",
"required": true
},
{
"name": "onRemove",
"type": "((tag: string, index: number) => void)",
"required": false,
"description": "Presence makes every tag removable, showing an \"x\" that calls this with the removed tag."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"tags"
],
"requiresAccessibleName": false
}
},
{
"name": "TeamCard",
"kind": "component",
"category": "Marketing",
"import": "@sakaniui/react",
"source": "src/components/MarketingComponents/TeamCard/TeamCard.tsx",
"summary": "Matches Figma \"Team Card\" (Marketing primitives set, 2 styles: Card, Card details).",
"props": [
{
"name": "image",
"type": "string",
"required": true
},
{
"name": "imageAlt",
"type": "string",
"required": false
},
{
"name": "name",
"type": "string",
"required": true
},
{
"name": "role",
"type": "string",
"required": true
},
{
"name": "location",
"type": "string",
"required": true
},
{
"name": "locationStatus",
"type": "\"active\" | \"remote\"",
"required": false,
"values": [
"active",
"remote"
],
"default": "active"
},
{
"name": "bio",
"type": "string",
"required": false,
"description": "Presence switches to the \"Card details\" style (adds this paragraph below the meta row)."
},
{
"name": "socialLinks",
"type": "TeamCardSocialLink[]",
"required": false,
"default": "[]"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"image",
"name",
"role",
"location"
],
"requiresAccessibleName": false
}
},
{
"name": "Textarea",
"kind": "component",
"category": "Forms",
"import": "@sakaniui/react",
"source": "src/components/Textarea/Textarea.tsx",
"summary": "Multi-line text input. Matches Figma \"Textarea\" parent component: State (Default|Focus|Error|Disabled|Filled), Title/Description toggles.",
"props": [
{
"name": "label",
"type": "string",
"required": false
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "error",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "Ticker",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/Ticker/Ticker.tsx",
"summary": "Matches Figma \"Ticker\" -- a row of symbol/change pairs with fade-out edges.",
"props": [
{
"name": "items",
"type": "TickerItem[]",
"required": true
},
{
"name": "speed",
"type": "number",
"required": false,
"default": "40",
"description": "Scroll speed in pixels/second. Defaults to 40."
},
{
"name": "formatChange",
"type": "((changePercent: number) => string)",
"required": false,
"default": "(changePercent: number) =>\n `${changePercent >= 0 ? '+' : ''}${changePercent}%`"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"items"
],
"requiresAccessibleName": false
}
},
{
"name": "Toast",
"kind": "component",
"category": "Composite",
"import": "@sakaniui/react",
"source": "src/components/Toast/Toast.tsx",
"summary": "Transient notification. Matches Figma \"Toast\" set: Status (Success|Error|Info), Title/Description toggles.",
"props": [
{
"name": "status",
"type": "\"info\" | \"success\" | \"error\"",
"required": false,
"values": [
"info",
"success",
"error"
],
"default": "info",
"description": "Figma Status axis. Defaults to \"info\"."
},
{
"name": "title",
"type": "string",
"required": false
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "onDismiss",
"type": "(() => void)",
"required": false,
"description": "Called when the dismiss (x) button is clicked. Hides the button if omitted."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "Tooltip",
"kind": "component",
"category": "Core",
"import": "@sakaniui/react",
"source": "src/components/Tooltip/Tooltip.tsx",
"summary": "Hover/focus tooltip with a title, optional subtitle, a caret (tail), and 8 pointer positions.",
"props": [
{
"name": "title",
"type": "string",
"required": true,
"description": "Tooltip title (Figma: Title)."
},
{
"name": "subtitle",
"type": "string",
"required": false,
"description": "Optional supporting line (Figma: Subtitle)."
},
{
"name": "pointer",
"type": "\"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\" | \"center-left\" | \"center-right\"",
"required": false,
"values": [
"top-left",
"top-center",
"top-right",
"bottom-left",
"bottom-center",
"bottom-right",
"center-left",
"center-right"
],
"default": "top-center",
"description": "Pointer position. Maps to Figma Pointer axis. Defaults to \"top-center\"."
},
{
"name": "children",
"type": "ReactNode",
"required": true,
"description": "The element the tooltip is attached to."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"children"
],
"requiresAccessibleName": false
}
},
{
"name": "TopBar",
"kind": "component",
"category": "Navigation",
"import": "@sakaniui/react",
"source": "src/components/TopBar/TopBar.tsx",
"summary": "Application top bar — sits beside the Sidebar (1440 − 248 = 1192 default, but stretches to fill).",
"props": [
{
"name": "type",
"type": "\"search\" | \"minimal\" | \"breadcrumb\" | \"tabs\" | \"chat\"",
"required": false,
"values": [
"search",
"minimal",
"breadcrumb",
"tabs",
"chat"
],
"default": "search"
},
{
"name": "density",
"type": "\"sm\" | \"md\"",
"required": false,
"values": [
"sm",
"md"
],
"default": "md"
},
{
"name": "left",
"type": "ReactNode",
"required": false,
"description": "The left region: Input (search), Breadcrumb, Tabs, or a title node."
},
{
"name": "showToggle",
"type": "boolean",
"required": false,
"default": "true",
"description": "Show the sidebar toggle. Defaults to true."
},
{
"name": "onToggle",
"type": "(() => void)",
"required": false
},
{
"name": "toggleIcon",
"type": "IconComponent",
"required": false,
"default": "createIcon(\"layout-sidebar\", [\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\",\"M9 4l0 16\"])",
"description": "Icon for the sidebar toggle button. Defaults to PanelLeft."
},
{
"name": "showActions",
"type": "boolean",
"required": false,
"default": "true",
"description": "Show help + notification icons. Defaults to true."
},
{
"name": "showHelp",
"type": "boolean",
"required": false,
"default": "true",
"description": "Show the help icon within the actions group. Defaults to true."
},
{
"name": "hasUnread",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "rightSlot",
"type": "ReactNode",
"required": false,
"description": "Extra content rendered in bar__right, before the built-in action icons."
},
{
"name": "account",
"type": "ReactNode",
"required": false,
"description": "Account cluster (Avatar + chevron) that opens a Menu."
},
{
"name": "accountOpen",
"type": "boolean",
"required": false,
"default": "false",
"description": "Flips the account chevron when the menu it opens is open. Defaults to false."
},
{
"name": "avatar",
"type": "ReactNode",
"required": false,
"description": "type=\"chat\" — conversation avatar."
},
{
"name": "title",
"type": "ReactNode",
"required": false,
"description": "type=\"chat\" — conversation name."
},
{
"name": "subtitle",
"type": "ReactNode",
"required": false,
"description": "type=\"chat\" — presence or status line under the name."
},
{
"name": "actions",
"type": "ReactNode",
"required": false,
"description": "type=\"chat\" — trailing action buttons (call, video, search…)."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "TopBarMobile",
"kind": "component",
"category": "Navigation",
"import": "@sakaniui/react",
"source": "src/components/TopBarMobile/TopBarMobile.tsx",
"summary": "Mobile app bar (390×56).",
"props": [
{
"name": "type",
"type": "\"title\" | \"search\" | \"title-centered\" | \"title-action\"",
"required": false,
"values": [
"title",
"search",
"title-centered",
"title-action"
],
"default": "title"
},
{
"name": "title",
"type": "ReactNode",
"required": false
},
{
"name": "trailing",
"type": "ReactNode",
"required": false,
"description": "Trailing slot for the 'title' type (e.g. an Avatar)."
},
{
"name": "search",
"type": "ReactNode",
"required": false,
"description": "Search field node for the 'search' type (e.g. an Input)."
},
{
"name": "onMenu",
"type": "(() => void)",
"required": false
},
{
"name": "onAction",
"type": "(() => void)",
"required": false
},
{
"name": "onClose",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "Transactions",
"kind": "component",
"category": "Application",
"import": "@sakaniui/react",
"source": "src/components/ApplicationComponents/Transactions/Transactions.tsx",
"summary": "Matches Figma \"Transactions\" -- both style previews collapse to one derived axis, same judgment applied throughout this Application set: the Empty state renders whenever `transactions` is empty, rather than a separate manual prop that could disagree with th...",
"props": [
{
"name": "transactions",
"type": "Transaction[]",
"required": true
},
{
"name": "formatAmount",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n `${amount >= 0 ? '+' : '-'}${Math.abs(amount).toLocaleString('en-US', { style: 'currency', currency: 'USD' })}`"
},
{
"name": "emptyTitle",
"type": "string",
"required": false,
"default": "No transactions yet"
},
{
"name": "emptyDescription",
"type": "string",
"required": false,
"default": "Your activity will show up here."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"transactions"
],
"requiresAccessibleName": false
}
},
{
"name": "WishlistButton",
"kind": "component",
"category": "E-commerce",
"import": "@sakaniui/react",
"source": "src/components/ECommerceComponents/WishlistButton/WishlistButton.tsx",
"summary": "Matches Figma \"Wishlist Button\" (E-commerce set): a 36px bg/surface square, radius-md, shadow-xs, no border.",
"props": [
{
"name": "saved",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "onToggle",
"type": "((saved: boolean) => void)",
"required": false
},
{
"name": "label",
"type": "string",
"required": false,
"default": "item",
"description": "Accessible name for the item being saved, e.g. \"Ceramic Pour-Over Mug\"."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "XIcon",
"kind": "component",
"category": "Marketing",
"import": "@sakaniui/react",
"source": "src/components/MarketingComponents/ProfileCard/SocialIcons.tsx",
"summary": "svg) -- lucide-react ships no brand/logo icons in the version this library uses.",
"props": [
{
"name": "size",
"type": "number",
"required": false,
"default": "16"
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "AccountOverviewBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/AccountOverviewBlock/AccountOverviewBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "state",
"type": "\"default\" | \"detailed\"",
"required": false,
"values": [
"default",
"detailed"
],
"default": "default"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "ActivityLogBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/ActivityLogBlock/ActivityLogBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "state",
"type": "\"compact\" | \"timeline\"",
"required": false,
"values": [
"compact",
"timeline"
],
"default": "timeline"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "AddCardFormBlock",
"kind": "block",
"category": "Blocks/Billing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/Billing/AddCardFormBlock/AddCardFormBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component.) in place of the simulated one here -- a real integration should never send a raw PAN/CVC to your own backend at all.",
"props": [
{
"name": "initialValue",
"type": "Partial",
"required": false
},
{
"name": "initialStatus",
"type": "\"loading\" | \"idle\" | \"invalid\" | \"server-error\"",
"required": false,
"values": [
"loading",
"idle",
"invalid",
"server-error"
],
"default": "idle",
"description": "Seeds the demo -- for a real app, status is driven entirely by your own onSave handler instead."
},
{
"name": "onSave",
"type": "((value: AddCardFormValue) => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "AppHeaderBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/AppHeaderBlock/AppHeaderBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "breadcrumbs",
"type": "BreadcrumbItem[]",
"required": true
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": false
},
{
"name": "actions",
"type": "AppHeaderBlockAction[]",
"required": false,
"default": "[]"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"breadcrumbs",
"title"
],
"requiresAccessibleName": false
}
},
{
"name": "BillingAddressBlock",
"kind": "block",
"category": "Blocks/Billing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/Billing/BillingAddressBlock/BillingAddressBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire `onSave` to your real API call in place of the simulated one here.",
"props": [
{
"name": "initialValue",
"type": "Partial",
"required": false,
"description": "Seeds the fields -- presence/absence is what distinguishes Figma's own Default vs. Filled previews."
},
{
"name": "countries",
"type": "SelectOption[]",
"required": false,
"default": "[\n { label: '🇳🇬 Nigeria', value: 'NG' },\n { label: '🇺🇸 United States', value: 'US' },\n { label: '🇬🇧 United Kingdom', value: 'GB' },\n { label: '🇰🇪 Kenya', value: 'KE' },\n { label: '🇿🇦 South Africa', value: 'ZA' },\n]"
},
{
"name": "initialStatus",
"type": "\"loading\" | \"idle\" | \"invalid\" | \"server-error\"",
"required": false,
"values": [
"loading",
"idle",
"invalid",
"server-error"
],
"default": "idle",
"description": "Seeds the demo -- for a real app, status is driven entirely by your own onSave handler instead."
},
{
"name": "onSave",
"type": "((value: BillingAddressValue) => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "BillingHistoryBlock",
"kind": "block",
"category": "Blocks/Billing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/Billing/BillingHistoryBlock/BillingHistoryBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire `onDownload` to your real invoice PDF endpoint in place of the callback here.",
"props": [
{
"name": "invoices",
"type": "BillingHistoryInvoice[]",
"required": false,
"default": "[]"
},
{
"name": "loading",
"type": "boolean",
"required": false,
"default": "false",
"description": "Shows the Skeleton loading state in place of `invoices` -- unlike Empty (derived from `invoices.length === 0`), there's no data yet at this point to derive it from."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "BlogListingBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/BlogListingBlock/BlogListingBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire \"Read article\"/card clicks to your real routing in place of the callbacks here.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "Blog",
"description": "Small pill above the title, e.g. \"Blog\". Omit to hide it."
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "subtitle",
"type": "string",
"required": false
},
{
"name": "featuredPost",
"type": "BlogListingFeaturedPost",
"required": true
},
{
"name": "posts",
"type": "BlogListingPost[]",
"required": true
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"featuredPost",
"posts"
],
"requiresAccessibleName": false
}
},
{
"name": "CareersBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/CareersBlock/CareersBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire \"Apply now\" to your real ATS/ application flow in place of the callback here.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "Careers",
"description": "Small pill above the title, e.g. \"Careers\". Omit to hide it."
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "subtitle",
"type": "string",
"required": false
},
{
"name": "jobs",
"type": "CareersJob[]",
"required": true
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"jobs"
],
"requiresAccessibleName": false
}
},
{
"name": "ChatInterfaceBlock",
"kind": "block",
"category": "Blocks/Chat",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/ChatInterfaceBlock/ChatInterfaceBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file and edit it: change the nav groups, swap the conversations, edit the thread.",
"props": [
{
"name": "state",
"type": "\"default\" | \"empty\" | \"collapsed\"",
"required": false,
"values": [
"default",
"empty",
"collapsed"
],
"default": "default"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "CheckoutFlowBlock",
"kind": "block",
"category": "Blocks/E-commerce",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/CheckoutFlowBlock/CheckoutFlowBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire the form submissions to your real shipping/payment APIs in place of the simulated flow here.",
"props": [
{
"name": "items",
"type": "CheckoutFlowItem[]",
"required": true
},
{
"name": "shippingCost",
"type": "number",
"required": false,
"default": "0",
"description": "0 (default) renders \"Free\" in the summary, matching Figma."
},
{
"name": "initialStep",
"type": "\"shipping\" | \"payment\"",
"required": false,
"values": [
"shipping",
"payment"
],
"default": "shipping"
},
{
"name": "onComplete",
"type": "((order: { shipping: { fullName: string; address: string; city: string; }; payment: { cardNumber: string; expiry: string; cvc: string; }; }) => void)",
"required": false
},
{
"name": "formatPrice",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"items"
],
"requiresAccessibleName": false
}
},
{
"name": "CRMDashboardBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/CRMDashboardBlock/CRMDashboardBlock.tsx",
"summary": "A full-page CRM leads view assembled entirely from Sakani components: Sidebar (icon rail) · TopBar · Breadcrumb · Tabs · Checkbox · Select · Slider · Input · FilterChip · Button · Table · Pagination · Badge · Avatar.",
"props": [
{
"name": "className",
"type": "string",
"required": false
},
{
"name": "fillPlaceholders",
"type": "boolean",
"required": false,
"description": "When the block is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), extends the leads table with faint placeholder row dividers down to the bottom instead of leaving blank canvas below the footer. No-op at the block's natural height."
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "CtaBannerBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/CtaBannerBlock/CtaBannerBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire the two actions to your real signup/repo links in place of the callbacks here.",
"props": [
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": true
},
{
"name": "primaryAction",
"type": "CtaBannerAction",
"required": true
},
{
"name": "secondaryAction",
"type": "CtaBannerAction",
"required": false
},
{
"name": "secondaryActionIcon",
"type": "boolean",
"required": false,
"default": "false",
"description": "Shows the GitHub icon before the secondary action's label."
},
{
"name": "variant",
"type": "\"neutral\" | \"accent\"",
"required": false,
"values": [
"neutral",
"accent"
],
"default": "neutral",
"description": "Figma Style axis (renamed to avoid colliding with the DOM `style` prop). Defaults to \"neutral\"."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"description",
"primaryAction"
],
"requiresAccessibleName": false
}
},
{
"name": "CurrentPlanBlock",
"kind": "block",
"category": "Blocks/Billing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/Billing/CurrentPlanBlock/CurrentPlanBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire the action callbacks to your real subscription-management API in place of the ones here.",
"props": [
{
"name": "planName",
"type": "string",
"required": true,
"description": "e.g. \"Pro plan\" or \"Pro trial\"."
},
{
"name": "price",
"type": "string",
"required": true,
"description": "e.g. \"$29\""
},
{
"name": "priceSuffix",
"type": "string",
"required": false,
"default": "/month",
"description": "e.g. \"/month\" or \"/month after trial\". Defaults to \"/month\"."
},
{
"name": "status",
"type": "\"active\" | \"trial\" | \"past-due\" | \"canceling\"",
"required": false,
"values": [
"active",
"trial",
"past-due",
"canceling"
],
"default": "active"
},
{
"name": "usageLabel",
"type": "string",
"required": false,
"default": "Projects used",
"description": "Usage row -- shown only in the \"active\" status, matching Figma."
},
{
"name": "usageValue",
"type": "string",
"required": false
},
{
"name": "usagePercent",
"type": "number",
"required": false,
"default": "0",
"description": "0–100, drives the Progress bar."
},
{
"name": "message",
"type": "string",
"required": false,
"description": "Overrides the default trial/canceling copy line."
},
{
"name": "onUpgrade",
"type": "(() => void)",
"required": false
},
{
"name": "onCancel",
"type": "(() => void)",
"required": false
},
{
"name": "onAddPaymentMethod",
"type": "(() => void)",
"required": false
},
{
"name": "onUpdatePaymentMethod",
"type": "(() => void)",
"required": false
},
{
"name": "onResume",
"type": "(() => void)",
"required": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"default": "false",
"description": "Shows the Skeleton loading state in place of everything else -- there's no plan data yet at this point to derive a status from."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"planName",
"price"
],
"requiresAccessibleName": false
}
},
{
"name": "DataTableBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/DataTableBlock/DataTableBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: swap the sample data for your own, change the columns, add or remove toolbar controls.",
"props": [
{
"name": "state",
"type": "\"default\" | \"empty\" | \"loading\" | \"error\" | \"filtered\" | \"bulk\"",
"required": false,
"values": [
"default",
"empty",
"loading",
"error",
"filtered",
"bulk"
],
"default": "default"
},
{
"name": "className",
"type": "string",
"required": false
},
{
"name": "fillPlaceholders",
"type": "boolean",
"required": false,
"description": "When the block is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), extends the table with faint placeholder row dividers down to the bottom instead of leaving blank canvas below the footer. No-op at the block's natural height."
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "EmailVerificationBlock",
"kind": "block",
"category": "Blocks/Authentication",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/EmailVerificationBlock/EmailVerificationBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire `onVerify`/`onResend` to your real API calls in place of the simulated ones here.",
"props": [
{
"name": "email",
"type": "string",
"required": false,
"default": "sam@sakani.com"
},
{
"name": "initialStatus",
"type": "\"success\" | \"loading\" | \"idle\" | \"server-error\" | \"incomplete\" | \"skeleton\"",
"required": false,
"values": [
"success",
"loading",
"idle",
"server-error",
"incomplete",
"skeleton"
],
"default": "idle",
"description": "Seeds the demo -- for a real app, status is driven entirely by your own onVerify/onResend handlers instead."
},
{
"name": "onVerify",
"type": "((code: string) => void)",
"required": false
},
{
"name": "onResend",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "FaqBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/FaqBlock/FaqBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "FAQ"
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "items",
"type": "FaqItem[]",
"required": true
},
{
"name": "columns",
"type": "\"1\" | \"2\"",
"required": false,
"values": [
"1",
"2"
],
"default": "1",
"description": "Figma Layout axis: 1 = Single, 2 = Two-Column. Defaults to 1."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"items"
],
"requiresAccessibleName": false
}
},
{
"name": "FeatureGridBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/FeatureGridBlock/FeatureGridBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "features",
"type": "FeatureGridItem[]",
"required": true
},
{
"name": "columns",
"type": "number",
"required": false,
"description": "Number of columns. Defaults to `features.length` (Figma's own examples never wrap)."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"features"
],
"requiresAccessibleName": false
}
},
{
"name": "FileUploadPanelBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/FileUploadPanelBlock/FileUploadPanelBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "state",
"type": "\"empty\" | \"with-files\"",
"required": false,
"values": [
"empty",
"with-files"
],
"default": "with-files",
"description": "Seeds the demo file list. Real usage would drive `files` from actual upload state instead."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "ForgotPasswordBlock",
"kind": "block",
"category": "Blocks/Authentication",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/ForgotPasswordBlock/ForgotPasswordBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire `onSubmit`/`onResend` to your real API calls in place of the simulated ones here.",
"props": [
{
"name": "initialStatus",
"type": "\"loading\" | \"sent\" | \"idle\" | \"server-error\" | \"skeleton\" | \"invalid-email\"",
"required": false,
"values": [
"loading",
"sent",
"idle",
"server-error",
"skeleton",
"invalid-email"
],
"default": "idle"
},
{
"name": "initialEmail",
"type": "string",
"required": false,
"default": ""
},
{
"name": "onSubmit",
"type": "((email: string) => void)",
"required": false
},
{
"name": "onResend",
"type": "(() => void)",
"required": false
},
{
"name": "onLogIn",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "FormModalBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/FormModalBlock/FormModalBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: swap the fields for your own form.",
"props": [
{
"name": "open",
"type": "boolean",
"required": true
},
{
"name": "onClose",
"type": "() => void",
"required": true
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"open",
"onClose"
],
"requiresAccessibleName": false
}
},
{
"name": "HeroBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/HeroBlock/HeroBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire the two actions to your real signup/repo links in place of the callbacks here.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"description": "Small pill above the title. Omit to hide it."
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": true
},
{
"name": "primaryAction",
"type": "HeroAction",
"required": true
},
{
"name": "secondaryAction",
"type": "HeroAction",
"required": false
},
{
"name": "secondaryActionIcon",
"type": "boolean",
"required": false,
"default": "false",
"description": "Shows the GitHub icon before the secondary action's label."
},
{
"name": "image",
"type": "string",
"required": true
},
{
"name": "imageAlt",
"type": "string",
"required": false
},
{
"name": "revealImage",
"type": "string",
"required": false,
"description": "Presence turns the image into a scratch-reveal: swiping over `image` erases it to expose this underneath."
},
{
"name": "caption",
"type": "string",
"required": false,
"description": "Centered layout only -- e.g. \"Free and open source · MIT licensed\"."
},
{
"name": "layout",
"type": "\"centered\" | \"split\"",
"required": false,
"values": [
"centered",
"split"
],
"default": "centered",
"description": "Figma Layout axis. Defaults to \"centered\"."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"description",
"primaryAction",
"image"
],
"requiresAccessibleName": false
}
},
{
"name": "InlineCtaBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/InlineCtaBlock/InlineCtaBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "variant",
"type": "\"default\" | \"accent\"",
"required": false,
"values": [
"default",
"accent"
],
"default": "default"
},
{
"name": "icon",
"type": "ReactNode",
"required": false
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "description",
"type": "string",
"required": true
},
{
"name": "actionLabel",
"type": "string",
"required": true
},
{
"name": "onAction",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"description",
"actionLabel"
],
"requiresAccessibleName": false
}
},
{
"name": "KanbanBoardBlock",
"kind": "block",
"category": "Blocks/Data & Content",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/KanbanBoardBlock/KanbanBoardBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file and edit it: change the columns, swap the sample tasks, adjust the card content. Assembled entirely from Sakani components.",
"props": [
{
"name": "state",
"type": "\"default\" | \"dragging\" | \"loading\" | \"empty-column\"",
"required": false,
"values": [
"default",
"dragging",
"loading",
"empty-column"
],
"default": "default"
},
{
"name": "className",
"type": "string",
"required": false
},
{
"name": "fillPlaceholders",
"type": "boolean",
"required": false,
"description": "When the board is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), stretches every column to equal height and caps off its real cards with a dashed placeholder slot down to the bottom instead of leaving blank canvas. No-op at the board's natural height."
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "LiquidDashboardBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/LiquidDashboardBlock/LiquidDashboardBlock.tsx",
"summary": "A full dashboard on a photograph, built the way the Sakani glass docs describe it: 1.",
"props": [
{
"name": "backgroundImage",
"type": "string",
"required": true,
"description": "The photograph behind everything. Not bundled: the glass needs something colorful and detailed to bend, and which photo is your call."
},
{
"name": "accountAvatar",
"type": "string",
"required": false,
"description": "Avatar for the account menu in the top bar."
},
{
"name": "people",
"type": "Partial>",
"required": false,
"description": "Photos for the people in the activity feed."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"backgroundImage"
],
"requiresAccessibleName": false
}
},
{
"name": "LoginBlock",
"kind": "block",
"category": "Blocks/Authentication",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/LoginBlock/LoginBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire `onSubmit` to your real auth call in place of the simulated one here.",
"props": [
{
"name": "initialStatus",
"type": "\"loading\" | \"idle\" | \"server-error\" | \"skeleton\" | \"validation-error\"",
"required": false,
"values": [
"loading",
"idle",
"server-error",
"skeleton",
"validation-error"
],
"default": "idle"
},
{
"name": "initialEmail",
"type": "string",
"required": false,
"default": ""
},
{
"name": "socialProviders",
"type": "LoginSocialProvider[]",
"required": false,
"default": "[]"
},
{
"name": "onSubmit",
"type": "((email: string, password: string, rememberMe: boolean) => void)",
"required": false
},
{
"name": "onForgotPassword",
"type": "(() => void)",
"required": false
},
{
"name": "onSignUp",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "LogoCloudBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/LogoCloudBlock/LogoCloudBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component.tsx for your own actual customers' logos.",
"props": [
{
"name": "label",
"type": "string",
"required": false,
"default": "Trusted by teams at"
},
{
"name": "brands",
"type": "LogoCloudBrand[]",
"required": false,
"default": "['vercel', 'netlify', 'github', 'figma', 'notion', 'linear', 'stripe']"
},
{
"name": "variant",
"type": "\"color\" | \"monochrome\"",
"required": false,
"values": [
"color",
"monochrome"
],
"default": "monochrome",
"description": "Figma Style axis (renamed to avoid colliding with the DOM `style` prop). Defaults to \"monochrome\"."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "MultistepModalBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/MultistepModalBlock/MultistepModalBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: swap the steps/content for your own flow.",
"props": [
{
"name": "open",
"type": "boolean",
"required": true
},
{
"name": "onClose",
"type": "() => void",
"required": true
},
{
"name": "initialStep",
"type": "number",
"required": false,
"default": "0",
"description": "Which step to open on — for demoing a mid-flow state. Defaults to the first step."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"open",
"onClose"
],
"requiresAccessibleName": false
}
},
{
"name": "NotificationPanelBlock",
"kind": "block",
"category": "New comment on your design",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/NotificationPanelBlock/NotificationPanelBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "items",
"type": "NotificationPanelItem[]",
"required": true
},
{
"name": "onMarkAllRead",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"items"
],
"requiresAccessibleName": false
}
},
{
"name": "OnboardingProgressBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/OnboardingProgressBlock/OnboardingProgressBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "title",
"type": "string",
"required": false,
"default": "Onboarding progress"
},
{
"name": "items",
"type": "OnboardingProgressItem[]",
"required": true
},
{
"name": "variant",
"type": "\"default\" | \"compact\"",
"required": false,
"values": [
"default",
"compact"
],
"default": "default"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"items"
],
"requiresAccessibleName": false
}
},
{
"name": "OrderConfirmationBlock",
"kind": "block",
"category": "Blocks/E-commerce",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/OrderConfirmationBlock/OrderConfirmationBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire the \"Continue shopping\"/\"Track order\" actions to your real navigation in place of the no-op callbacks here.",
"props": [
{
"name": "orderNumber",
"type": "string",
"required": true
},
{
"name": "items",
"type": "OrderConfirmationItem[]",
"required": true
},
{
"name": "total",
"type": "number",
"required": true
},
{
"name": "estimatedDelivery",
"type": "string",
"required": false,
"description": "Presence renders the \"With Tracking\" style: an estimated-delivery row plus a \"Track order\" button above \"Continue shopping\". Absence renders the plain Default style -- see the file doc for why this isn't a separate style prop."
},
{
"name": "onTrackOrder",
"type": "(() => void)",
"required": false
},
{
"name": "onContinueShopping",
"type": "(() => void)",
"required": false
},
{
"name": "formatPrice",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"orderNumber",
"items",
"total"
],
"requiresAccessibleName": false
}
},
{
"name": "PaymentMethodBlock",
"kind": "block",
"category": "Blocks/Billing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/Billing/PaymentMethodBlock/PaymentMethodBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component.) update/add flows.",
"props": [
{
"name": "card",
"type": "PaymentMethodCard",
"required": false,
"description": "Omit to show the Empty state."
},
{
"name": "onUpdateCard",
"type": "(() => void)",
"required": false
},
{
"name": "onAddPaymentMethod",
"type": "(() => void)",
"required": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"default": "false",
"description": "Shows the Skeleton loading state in place of everything else -- there's no card data yet at this point to derive a status from."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "PricingTableBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/PricingTableBlock/PricingTableBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire each plan's CTA to your real checkout/contact flow in place of the callbacks here.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "Pricing",
"description": "Small pill above the title, e.g. \"Pricing\". Omit to hide it."
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "subtitle",
"type": "string",
"required": false
},
{
"name": "plans",
"type": "PricingPlan[]",
"required": true
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"plans"
],
"requiresAccessibleName": false
}
},
{
"name": "ProductDetailBlock",
"kind": "block",
"category": "Blocks/E-commerce",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/ProductDetailBlock/ProductDetailBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire \"Add to cart\" to your real cart state/API in place of the callback here.",
"props": [
{
"name": "name",
"type": "string",
"required": true
},
{
"name": "images",
"type": "ProductGalleryImage[]",
"required": true
},
{
"name": "rating",
"type": "number",
"required": true
},
{
"name": "reviewCount",
"type": "number",
"required": false
},
{
"name": "stockQuantity",
"type": "number",
"required": true,
"description": "Drives StockStatus's derived badge color + label -- see that component."
},
{
"name": "price",
"type": "number",
"required": true
},
{
"name": "compareAtPrice",
"type": "number",
"required": false
},
{
"name": "description",
"type": "string",
"required": true
},
{
"name": "colors",
"type": "ProductDetailColorOption[]",
"required": false,
"default": "[]"
},
{
"name": "sizes",
"type": "ProductDetailSizeOption[]",
"required": false,
"default": "[]"
},
{
"name": "defaultColor",
"type": "string",
"required": false,
"description": "Defaults to the first available option in each list."
},
{
"name": "defaultSize",
"type": "string",
"required": false
},
{
"name": "minQuantity",
"type": "number",
"required": false,
"default": "1"
},
{
"name": "maxQuantity",
"type": "number",
"required": false
},
{
"name": "defaultSaved",
"type": "boolean",
"required": false,
"default": "false"
},
{
"name": "onAddToCart",
"type": "((selection: { color?: string; size?: string; quantity: number; }) => void) | undefined",
"required": false
},
{
"name": "formatPrice",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"name",
"images",
"rating",
"stockQuantity",
"price",
"description"
],
"requiresAccessibleName": false
}
},
{
"name": "ProductGridBlock",
"kind": "block",
"category": "Blocks/E-commerce",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/ProductGridBlock/ProductGridBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire \"Add Item\"/wishlist/sort to your real cart/catalog state in place of the callbacks here.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "Shop",
"description": "Small pill above the title, e.g. \"Shop\". Omit to hide it."
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "subtitle",
"type": "string",
"required": false
},
{
"name": "products",
"type": "ProductGridItem[]",
"required": true
},
{
"name": "showFilterBar",
"type": "boolean",
"required": false,
"default": "false",
"description": "Adds the \"N products\" count + Sort button row above the grid -- see the file doc for why this stays a real prop rather than being derived."
},
{
"name": "sortLabel",
"type": "string",
"required": false,
"default": "Featured"
},
{
"name": "onSortClick",
"type": "(() => void)",
"required": false
},
{
"name": "columns",
"type": "number",
"required": false,
"default": "4",
"description": "Number of columns at full width. Defaults to 4, matching Figma."
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"products"
],
"requiresAccessibleName": false
}
},
{
"name": "ProfileSettingsBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/ProfileSettingsBlock/ProfileSettingsBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "name",
"type": "string",
"required": false,
"default": ""
},
{
"name": "email",
"type": "string",
"required": false,
"default": ""
},
{
"name": "avatarSrc",
"type": "string",
"required": false
},
{
"name": "onSave",
"type": "((data: { name: string; email: string; }) => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "ResetPasswordBlock",
"kind": "block",
"category": "Blocks/Authentication",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/ResetPasswordBlock/ResetPasswordBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component.",
"props": [
{
"name": "initialStatus",
"type": "\"success\" | \"loading\" | \"idle\" | \"skeleton\" | \"mismatch\" | \"expired\"",
"required": false,
"values": [
"success",
"loading",
"idle",
"skeleton",
"mismatch",
"expired"
],
"default": "idle"
},
{
"name": "onSubmit",
"type": "((newPassword: string) => void)",
"required": false
},
{
"name": "onRequestNewLink",
"type": "(() => void)",
"required": false
},
{
"name": "onLogIn",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "SectionFooterBlock",
"kind": "block",
"category": "Blocks/Application",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/SectionFooterBlock/SectionFooterBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "text",
"type": "string",
"required": false,
"default": "Sakani v1.6 · © 2026 Sakani"
},
{
"name": "links",
"type": "SectionFooterLink[]",
"required": false,
"default": "[\n { label: 'Docs', href: '#' },\n { label: 'Status', href: '#' },\n { label: 'Support', href: '#' },\n]"
},
{
"name": "variant",
"type": "\"default\" | \"centered\"",
"required": false,
"values": [
"default",
"centered"
],
"default": "default"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "ShoppingCartBlock",
"kind": "block",
"category": "Blocks/E-commerce",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/ShoppingCartBlock/ShoppingCartBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire \"Checkout\"/\"Continue shopping\" to your real cart/checkout flow in place of the callbacks here.",
"props": [
{
"name": "items",
"type": "ShoppingCartItemData[]",
"required": true
},
{
"name": "shippingCost",
"type": "number",
"required": false,
"default": "0",
"description": "0 (default) renders \"Free\" in the summary, matching Figma."
},
{
"name": "onCheckout",
"type": "((items: ShoppingCartItemData[]) => void)",
"required": false
},
{
"name": "onContinueShopping",
"type": "(() => void)",
"required": false
},
{
"name": "formatPrice",
"type": "((amount: number) => string)",
"required": false,
"default": "(amount: number) =>\n amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })"
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"items"
],
"requiresAccessibleName": false
}
},
{
"name": "SignUpBlock",
"kind": "block",
"category": "Blocks/Authentication",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/SignUpBlock/SignUpBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire `onSubmit` to your real registration call in place of the simulated one here.",
"props": [
{
"name": "initialStatus",
"type": "\"loading\" | \"idle\" | \"server-error\" | \"skeleton\" | \"validation-error\"",
"required": false,
"values": [
"loading",
"idle",
"server-error",
"skeleton",
"validation-error"
],
"default": "idle"
},
{
"name": "socialProviders",
"type": "SignUpSocialProvider[]",
"required": false,
"default": "[]"
},
{
"name": "onSubmit",
"type": "((data: { fullName: string; email: string; password: string; }) => void)",
"required": false
},
{
"name": "onLogIn",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
},
{
"name": "TeamSectionBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/TeamSectionBlock/TeamSectionBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "eyebrow",
"type": "string",
"required": false,
"default": "Team",
"description": "Small pill above the title, e.g. \"Team\". Omit to hide it."
},
{
"name": "title",
"type": "string",
"required": true
},
{
"name": "subtitle",
"type": "string",
"required": false
},
{
"name": "members",
"type": "TeamSectionMember[]",
"required": true
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"title",
"members"
],
"requiresAccessibleName": false
}
},
{
"name": "TestimonialBlock",
"kind": "block",
"category": "Blocks/Marketing",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/TestimonialBlock/TestimonialBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly.",
"props": [
{
"name": "testimonials",
"type": "Testimonial[]",
"required": true
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [
"testimonials"
],
"requiresAccessibleName": false
}
},
{
"name": "TwoFactorAuthBlock",
"kind": "block",
"category": "Blocks/Authentication",
"import": "@sakaniui/react/blocks",
"source": "src/blocks/TwoFactorAuthBlock/TwoFactorAuthBlock.tsx",
"summary": "A COMPOSITION EXAMPLE, not a configurable component. Copy this file into your project and edit it directly: wire `onVerify`/`onUseBackupCode` to your real API calls in place of the simulated ones here.",
"props": [
{
"name": "initialStatus",
"type": "\"success\" | \"loading\" | \"idle\" | \"server-error\" | \"incomplete\" | \"skeleton\"",
"required": false,
"values": [
"success",
"loading",
"idle",
"server-error",
"incomplete",
"skeleton"
],
"default": "idle",
"description": "Seeds the demo -- for a real app, status is driven entirely by your own onVerify/onUseBackupCode handlers instead."
},
{
"name": "onVerify",
"type": "((code: string, trustDevice: boolean) => void)",
"required": false
},
{
"name": "onUseBackupCode",
"type": "(() => void)",
"required": false
},
{
"name": "className",
"type": "string",
"required": false
}
],
"contract": {
"requiredProps": [],
"requiresAccessibleName": false
}
}
]
}