{ "name": "CleenUI components", "url": "https://cleenui.com/components", "description": "React component library — 61 components in 12 categories. Accessible, themable, Storybook-documented.", "techStack": [ "React 18", "TypeScript", "Tailwind CSS" ], "totalCount": 61, "categoryCount": 12, "categories": [ { "slug": "icons", "label": "Icons", "tagline": "15,996 icons across nine libraries, normalized behind one API.", "tier": "pro", "url": "https://cleenui.com/components/icons", "count": 1, "components": [ { "slug": "icon", "name": "Icon", "oneLiner": "One component, nine icon libraries, 15,996 icons — swap libraries without rewriting components.", "tier": "pro", "useCases": [ "Buttons with a leading or trailing icon.", "Inline status indicators in tables and lists.", "Sidebar and navigation iconography.", "Decorative emphasis inside cards and callouts." ], "props": [ { "name": "name", "type": "string", "desc": "Icon name, prefixed by library (e.g. \"lucide:arrow-right\")." }, { "name": "size", "type": "number | \"sm\" | \"md\" | \"lg\"", "desc": "Pixel size or named scale." }, { "name": "strokeWidth", "type": "number", "desc": "Stroke width for outline-style icons." }, { "name": "label", "type": "string", "desc": "Accessible label; if absent the icon is treated as decorative." } ], "url": "https://cleenui.com/components/icons/icon", "storybookId": null } ] }, { "slug": "forms", "label": "Forms", "tagline": "Every input primitive a real form needs.", "tier": "pro", "url": "https://cleenui.com/components/forms", "count": 13, "components": [ { "slug": "input", "name": "Input", "oneLiner": "The standard text input — sized, labeled, validatable, with built-in error and help-text slots.", "tier": "pro", "useCases": [ "Email and password fields in auth flows.", "Name and free-text capture in onboarding.", "Search bars with a leading magnifying-glass icon.", "Numeric entry with validation for thresholds." ], "props": [ { "name": "type", "type": "\"text\" | \"email\" | \"tel\" | \"url\" | \"password\" | \"number\"", "desc": "HTML input type." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "desc": "Visual size variant." }, { "name": "label", "type": "string", "desc": "Field label rendered above the input." }, { "name": "error", "type": "string", "desc": "Error message; flips the field into error styling when set." }, { "name": "leadingIcon", "type": "string", "desc": "Icon name rendered inside the input on the left." } ], "url": "https://cleenui.com/components/forms/input", "storybookId": "forms-input--controlled" }, { "slug": "textarea", "name": "TextArea", "oneLiner": "Multi-line text input with auto-resize, character count, and the same validation surface as Input.", "tier": "pro", "useCases": [ "Description and notes fields in detail forms.", "Comment and reply composers.", "Long-form context capture in onboarding and intake forms.", "Code or markup entry with monospace styling." ], "props": [ { "name": "rows", "type": "number", "desc": "Initial visible row count." }, { "name": "autoResize", "type": "boolean", "desc": "Grow with content up to maxRows." }, { "name": "maxLength", "type": "number", "desc": "Character cap; enables the counter when set." }, { "name": "showCount", "type": "boolean", "desc": "Display the character-count indicator." }, { "name": "error", "type": "string", "desc": "Error message; flips into error styling when set." } ], "url": "https://cleenui.com/components/forms/textarea", "storybookId": "forms-textarea--controlled" }, { "slug": "select", "name": "Select", "oneLiner": "Dropdown selection with searchable filter, multi-select, custom rendering, and async option loading.", "tier": "pro", "useCases": [ "Single-value pickers like country or timezone.", "Multi-select category or tag assignment.", "Async-loaded options from a paginated API.", "Custom-rendered items with icons and descriptions." ], "props": [ { "name": "options", "type": "Option[]", "desc": "Array of {value, label, icon, description}." }, { "name": "multi", "type": "boolean", "desc": "Enable multi-select with chip preview." }, { "name": "searchable", "type": "boolean", "desc": "Show a filter input inside the dropdown." }, { "name": "loadOptions", "type": "(query: string) => Promise", "desc": "Async option loader." }, { "name": "renderOption", "type": "(option) => ReactNode", "desc": "Custom per-option renderer." } ], "url": "https://cleenui.com/components/forms/select", "storybookId": "forms-select--default" }, { "slug": "checkbox", "name": "Checkbox", "oneLiner": "Single boolean checkbox with label, indeterminate state, and form integration.", "tier": "pro", "useCases": [ "Single boolean preferences in settings.", "Per-row selection in tables (with indeterminate parent).", "Terms-of-service acceptance with inline links.", "Filter inclusions in faceted search panels." ], "props": [ { "name": "checked", "type": "boolean", "desc": "Controlled checked state." }, { "name": "indeterminate", "type": "boolean", "desc": "Render the indeterminate (dash) glyph." }, { "name": "label", "type": "ReactNode", "desc": "Label content; can include JSX." }, { "name": "onChange", "type": "(checked: boolean) => void", "desc": "Change handler." }, { "name": "disabled", "type": "boolean", "desc": "Disable interaction." } ], "url": "https://cleenui.com/components/forms/checkbox", "storybookId": "forms-checkbox--error" }, { "slug": "checkbox-group", "name": "CheckboxGroup", "oneLiner": "Coordinated group of related checkboxes with select-all, controlled state, and validation.", "tier": "pro", "useCases": [ "Multi-select preference panels in settings.", "Tag or category assignment forms.", "Permission grids with grouped capabilities.", "Filter sidebars with toggle-each-or-all behavior." ], "props": [ { "name": "options", "type": "Option[]", "desc": "Array of {value, label, description}." }, { "name": "value", "type": "string[]", "desc": "Array of selected values (controlled)." }, { "name": "onChange", "type": "(values: string[]) => void", "desc": "Change handler." }, { "name": "layout", "type": "\"vertical\" | \"horizontal\" | \"grid\"", "desc": "Item arrangement." }, { "name": "selectAll", "type": "boolean", "desc": "Render a select-all toggle." } ], "url": "https://cleenui.com/components/forms/checkbox-group", "storybookId": "forms-checkboxgroup--default" }, { "slug": "switch", "name": "Switch", "oneLiner": "On/off toggle with label, sizing, and the same controlled-form integration as Checkbox.", "tier": "pro", "useCases": [ "Settings toggles that apply immediately.", "Feature flag UIs in admin panels.", "Notification preference rows.", "Show/hide toggles in dashboard layouts." ], "props": [ { "name": "checked", "type": "boolean", "desc": "Controlled checked state." }, { "name": "loading", "type": "boolean", "desc": "Show in-thumb spinner while awaiting confirmation." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "desc": "Visual size variant." }, { "name": "label", "type": "ReactNode", "desc": "Label content beside the switch." }, { "name": "onChange", "type": "(checked: boolean) => void", "desc": "Change handler." } ], "url": "https://cleenui.com/components/forms/switch", "storybookId": "forms-switch--default" }, { "slug": "radio-button-group", "name": "RadioButtonGroup", "oneLiner": "Mutually-exclusive radio group rendered as a connected button bar.", "tier": "pro", "useCases": [ "View-mode switchers (list / grid / cards).", "Date range presets (Day / Week / Month / Quarter).", "Sort-order pickers.", "Compact priority or status selectors." ], "props": [ { "name": "options", "type": "Option[]", "desc": "Array of {value, label, icon}." }, { "name": "value", "type": "string", "desc": "Selected value (controlled)." }, { "name": "onChange", "type": "(value: string) => void", "desc": "Change handler." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "desc": "Visual size variant." }, { "name": "fullWidth", "type": "boolean", "desc": "Stretch the group to fill the container." } ], "url": "https://cleenui.com/components/forms/radio-button-group", "storybookId": "forms-radiobuttongroup--default" }, { "slug": "radio-box-group", "name": "RadioBoxGroup", "oneLiner": "Mutually-exclusive radio group rendered as card-style options with descriptions.", "tier": "pro", "useCases": [ "Pricing tier selection.", "Deployment or hosting option picker.", "Payment method selection (card / bank / crypto).", "Onboarding choice screens with explanatory copy." ], "props": [ { "name": "options", "type": "Option[]", "desc": "Array of {value, label, description, icon}." }, { "name": "value", "type": "string", "desc": "Selected value (controlled)." }, { "name": "onChange", "type": "(value: string) => void", "desc": "Change handler." }, { "name": "layout", "type": "\"stack\" | \"grid\"", "desc": "Card arrangement." }, { "name": "columns", "type": "number", "desc": "Number of columns in grid layout." } ], "url": "https://cleenui.com/components/forms/radio-box-group", "storybookId": "forms-radioboxgroup--default" }, { "slug": "date-picker", "name": "DatePicker", "oneLiner": "Calendar-based date selection with min/max constraints, ranges, and time-of-day extensions.", "tier": "pro", "useCases": [ "Single-date birthday or expiry capture.", "Date-range filters for reports and analytics.", "Appointment scheduling with time-of-day.", "Constrained windows (e.g. only future dates, only weekdays)." ], "props": [ { "name": "mode", "type": "\"single\" | \"range\" | \"datetime\"", "desc": "Selection mode." }, { "name": "min", "type": "Date | string", "desc": "Earliest selectable date." }, { "name": "max", "type": "Date | string", "desc": "Latest selectable date." }, { "name": "presets", "type": "Preset[]", "desc": "Sidebar shortcuts like \"Last 7 days\"." }, { "name": "timezone", "type": "string", "desc": "IANA timezone identifier." } ], "url": "https://cleenui.com/components/forms/date-picker", "storybookId": null }, { "slug": "credit-card-input", "name": "CreditCardInput", "oneLiner": "Card-number input with brand detection, formatting, and CVC plus expiry sub-fields.", "tier": "pro", "useCases": [ "Subscription signup flows.", "Saved-payment-method management.", "One-time checkout for paid services.", "Updating an existing card on file." ], "props": [ { "name": "value", "type": "{number, expiry, cvc}", "desc": "Controlled value." }, { "name": "onChange", "type": "(value) => void", "desc": "Change handler with formatted parts." }, { "name": "onValid", "type": "(brand: string) => void", "desc": "Fires when Luhn check passes." }, { "name": "acceptedBrands", "type": "string[]", "desc": "Allow-list of card brands." }, { "name": "showBrand", "type": "boolean", "desc": "Display the detected brand logo." } ], "url": "https://cleenui.com/components/forms/credit-card-input", "storybookId": "forms-creditcardinput--controlled" }, { "slug": "range-slider", "name": "RangeSlider", "oneLiner": "Two-handle slider for min/max range selection with custom step intervals.", "tier": "pro", "useCases": [ "Price-range filters in product browsing.", "Age range pickers in demographics forms.", "Date-distance windows where exact dates aren't needed.", "Threshold pairs in monitoring and alerting configuration." ], "props": [ { "name": "value", "type": "[number, number]", "desc": "Current [min, max] (controlled)." }, { "name": "min", "type": "number", "desc": "Lower bound of the range." }, { "name": "max", "type": "number", "desc": "Upper bound of the range." }, { "name": "step", "type": "number", "desc": "Step increment for each handle." }, { "name": "marks", "type": "Mark[]", "desc": "Labeled tick marks along the track." } ], "url": "https://cleenui.com/components/forms/range-slider", "storybookId": "forms-rangeslider--controlled" }, { "slug": "slider", "name": "Slider", "oneLiner": "Single-handle numeric slider with marks, step intervals, and live value display.", "tier": "pro", "useCases": [ "Volume, brightness, or opacity controls.", "Quality preset pickers in settings.", "Quantity selection in checkout flows.", "Weighting controls in configuration UIs." ], "props": [ { "name": "value", "type": "number", "desc": "Current value (controlled)." }, { "name": "min", "type": "number", "desc": "Lower bound." }, { "name": "max", "type": "number", "desc": "Upper bound." }, { "name": "step", "type": "number", "desc": "Step increment." }, { "name": "showValue", "type": "boolean", "desc": "Render the live value bubble." } ], "url": "https://cleenui.com/components/forms/slider", "storybookId": "forms-slider--default" }, { "slug": "lookup", "name": "Lookup", "oneLiner": "Async-search autocomplete that hits any API endpoint and returns selectable results with custom rendering.", "tier": "pro", "useCases": [ "User pickers for assigning tasks or sharing access.", "Tag pickers with the ability to create new tags inline.", "Customer or company search in support tooling.", "Address autocomplete via a geocoding API." ], "props": [ { "name": "search", "type": "(query: string) => Promise", "desc": "Async result fetcher." }, { "name": "renderResult", "type": "(result) => ReactNode", "desc": "Custom per-result renderer." }, { "name": "onSelect", "type": "(result) => void", "desc": "Fires when a result is chosen." }, { "name": "debounceMs", "type": "number", "desc": "Wait time before triggering search." }, { "name": "allowCreate", "type": "boolean", "desc": "Allow free-text values not in results." } ], "url": "https://cleenui.com/components/forms/lookup", "storybookId": "forms-lookup--controlled" } ] }, { "slug": "ai", "label": "AI", "tagline": "AI-augmented inputs and surfaces, drop-in ready.", "tier": "pro", "url": "https://cleenui.com/components/ai", "count": 3, "components": [ { "slug": "ai-input", "name": "AIInput", "oneLiner": "AI-augmented single-line input that suggests, autocompletes, or rewrites as the user types.", "tier": "pro", "useCases": [ "Title and headline fields with autocomplete suggestions.", "Search bars that suggest completed queries.", "Command-bar inputs with action prediction.", "Field-level smart corrections on names and addresses." ], "props": [ { "name": "model", "type": "string", "desc": "LLM identifier (e.g. \"claude-sonnet-4\")." }, { "name": "prompt", "type": "string", "desc": "Prompt template; supports {context} interpolation." }, { "name": "context", "type": "object", "desc": "Variables interpolated into the prompt." }, { "name": "debounceMs", "type": "number", "desc": "Delay before requesting a suggestion." }, { "name": "onAccept", "type": "(suggestion: string) => void", "desc": "Fires when the user accepts a suggestion." } ], "url": "https://cleenui.com/components/ai/ai-input", "storybookId": "ai-aiinput--top" }, { "slug": "ai-textarea", "name": "AITextArea", "oneLiner": "Multi-line input with inline generate, refine, rewrite, and summarize actions powered by your LLM.", "tier": "pro", "useCases": [ "Email and message composition with rewrite-for-tone actions.", "Long-form description drafting from short bullet points.", "Translation and language refinement.", "Custom workflow actions specific to your product domain." ], "props": [ { "name": "model", "type": "string", "desc": "LLM identifier." }, { "name": "actions", "type": "Action[]", "desc": "Action definitions {label, prompt, icon}." }, { "name": "stream", "type": "boolean", "desc": "Stream the response token-by-token." }, { "name": "context", "type": "object", "desc": "Variables for prompt interpolation." }, { "name": "onCommit", "type": "(text: string) => void", "desc": "Fires when the user accepts the output." } ], "url": "https://cleenui.com/components/ai/ai-textarea", "storybookId": "ai-aitextarea--top" }, { "slug": "ai-widget", "name": "AIWidget", "oneLiner": "A full-frame AI interaction surface — chat, generate, transform — embeddable inside any page.", "tier": "pro", "useCases": [ "In-app AI assistants scoped to the current screen.", "Side-panel chat with the current document or record.", "Embedded support assistants on help pages.", "Generation surfaces (summaries, drafts, analyses) on detail screens." ], "props": [ { "name": "model", "type": "string", "desc": "LLM identifier." }, { "name": "context", "type": "object", "desc": "Page or entity context bound to the conversation." }, { "name": "actions", "type": "Action[]", "desc": "Quick-action chips above the input." }, { "name": "persistHistory", "type": "boolean", "desc": "Save history per user." }, { "name": "onMessage", "type": "(message) => void", "desc": "Fires on every user or assistant message." } ], "url": "https://cleenui.com/components/ai/ai-widget", "storybookId": "ai-aiwidget--default" } ] }, { "slug": "datagrid", "label": "DataGrid", "tagline": "Built from scratch. Filters, pagination, virtualization, no third-party dependency.", "tier": "pro", "url": "https://cleenui.com/components/datagrid", "count": 3, "components": [ { "slug": "datagrid", "name": "DataGrid", "oneLiner": "Sortable, filterable, virtualized grid with custom cell renderers and full-stack pagination.", "tier": "pro", "useCases": [ "Admin tables for user, account, or transaction management.", "Dashboard data exploration with sortable columns.", "Bulk-action workflows over filtered subsets.", "Reports with expandable row detail." ], "props": [ { "name": "columns", "type": "Column[]", "desc": "Column definitions {key, label, render, sortable, width}." }, { "name": "data", "type": "Row[]", "desc": "Row data (or async loader)." }, { "name": "loadPage", "type": "(page, sort, filters) => Promise", "desc": "Async page loader for server-side pagination." }, { "name": "density", "type": "\"compact\" | \"normal\" | \"comfortable\"", "desc": "Row height density." }, { "name": "selectable", "type": "boolean | \"single\" | \"multi\"", "desc": "Row selection mode." } ], "url": "https://cleenui.com/components/datagrid/datagrid", "storybookId": null }, { "slug": "datagrid-with-filters", "name": "DataGridWithFilters", "oneLiner": "Pre-wired DataGrid plus FilterDrawer plus URL-shareable filter state.", "tier": "pro", "useCases": [ "Filterable customer lists with shareable views.", "Support ticket queues with pinned daily-triage filters.", "Sales pipeline grids with per-rep saved filter sets.", "Audit log explorers with deep-link-able filter combinations." ], "props": [ { "name": "columns", "type": "Column[]", "desc": "Column definitions." }, { "name": "filters", "type": "FilterDef[]", "desc": "Filter definitions {field, operator, type}." }, { "name": "loadPage", "type": "(page, sort, filters) => Promise", "desc": "Async page loader." }, { "name": "syncWithUrl", "type": "boolean", "desc": "Serialize filter state to query params." }, { "name": "savedFilters", "type": "SavedFilter[]", "desc": "Pinned/shared filter sets." } ], "url": "https://cleenui.com/components/datagrid/datagrid-with-filters", "storybookId": null }, { "slug": "filter-drawer", "name": "FilterDrawer", "oneLiner": "Dynamic filter builder UI with save, pin, and share.", "tier": "pro", "useCases": [ "Custom filter construction in admin grids.", "Saved filter management UIs.", "Per-user pinned filter shelves.", "Team-shared filter collections." ], "props": [ { "name": "fields", "type": "FieldDef[]", "desc": "Filterable field definitions." }, { "name": "value", "type": "FilterTree", "desc": "Current filter tree (controlled)." }, { "name": "onChange", "type": "(filter: FilterTree) => void", "desc": "Change handler." }, { "name": "saved", "type": "SavedFilter[]", "desc": "Saved/pinned filters to display." }, { "name": "onSave", "type": "(filter, name) => void", "desc": "Fires when user saves a filter." } ], "url": "https://cleenui.com/components/datagrid/filter-drawer", "storybookId": null } ] }, { "slug": "project-management", "label": "Project Management", "tagline": "Kanban, wizards, assessments, and timelines — the work-tracking surface.", "tier": "pro", "url": "https://cleenui.com/components/project-management", "count": 5, "components": [ { "slug": "kanban-board", "name": "KanbanBoard", "oneLiner": "Multi-column drag-and-drop board with WIP limits, custom card rendering, and live backend persistence.", "tier": "pro", "useCases": [ "Engineering work boards (To do / In progress / Review / Done).", "Sales pipeline (Lead / Qualified / Proposal / Closed).", "Support ticket triage with priority columns.", "Custom workflows with named status transitions." ], "props": [ { "name": "columns", "type": "Column[]", "desc": "Column definitions {key, label, limit}." }, { "name": "cards", "type": "Card[]", "desc": "Cards keyed by column." }, { "name": "onMove", "type": "(card, from, to, index) => Promise", "desc": "Async persistence on drop." }, { "name": "renderCard", "type": "(card) => ReactNode", "desc": "Custom card renderer." }, { "name": "limits", "type": "Record", "desc": "WIP limits per column key." } ], "url": "https://cleenui.com/components/project-management/kanban-board", "storybookId": "project-management-kanbanboard--default" }, { "slug": "kanban-list", "name": "KanbanList", "oneLiner": "Vertical list-mode variant of the Kanban primitive for narrow viewports or single-column workflows.", "tier": "pro", "useCases": [ "Mobile-first task lists.", "Side-panel work queues in admin tooling.", "Daily standup or sprint backlog views.", "Grouped to-do lists with collapsible sections." ], "props": [ { "name": "items", "type": "Item[]", "desc": "Ordered list of items." }, { "name": "groupBy", "type": "string", "desc": "Field to group items by (renders section headers)." }, { "name": "onReorder", "type": "(items) => Promise", "desc": "Persistence on reorder." }, { "name": "renderItem", "type": "(item) => ReactNode", "desc": "Custom item renderer." }, { "name": "collapsibleGroups", "type": "boolean", "desc": "Allow user to collapse group sections." } ], "url": "https://cleenui.com/components/project-management/kanban-list", "storybookId": "project-management-kanbanlist--default" }, { "slug": "task-roadmap", "name": "TaskRoadmap", "oneLiner": "Timeline-based task visualization with phases, dependencies, and zoom from day to quarter.", "tier": "pro", "useCases": [ "Quarterly roadmap planning across teams.", "Sprint-level Gantt for individual project tracking.", "Customer implementation timelines with dependencies.", "Marketing campaign and content calendars." ], "props": [ { "name": "phases", "type": "Phase[]", "desc": "Phase groupings." }, { "name": "tasks", "type": "Task[]", "desc": "Task records with start, end, dependencies." }, { "name": "zoom", "type": "\"day\" | \"week\" | \"month\" | \"quarter\"", "desc": "Initial zoom level." }, { "name": "onReschedule", "type": "(task, newRange) => void", "desc": "Fires on drag." }, { "name": "showCriticalPath", "type": "boolean", "desc": "Highlight the critical path." } ], "url": "https://cleenui.com/components/project-management/task-roadmap", "storybookId": "project-management-taskroadmap--default" }, { "slug": "wizard", "name": "Wizard", "oneLiner": "Multi-step flow with validated transitions, progress persistence, and branching paths.", "tier": "pro", "useCases": [ "Onboarding flows with conditional steps.", "Multi-page application or signup forms.", "Configuration wizards in admin tooling.", "Compliance or KYC flows requiring step-by-step validation." ], "props": [ { "name": "steps", "type": "Step[]", "desc": "Step definitions {key, label, render, validate}." }, { "name": "currentStep", "type": "string", "desc": "Currently active step key (controlled)." }, { "name": "onStepChange", "type": "(step) => void", "desc": "Fires when step changes." }, { "name": "persistKey", "type": "string", "desc": "Backend persistence key for saved progress." }, { "name": "branches", "type": "Branch[]", "desc": "Conditional step-routing rules." } ], "url": "https://cleenui.com/components/project-management/wizard", "storybookId": null }, { "slug": "assessment", "name": "Assessment", "oneLiner": "Wizard-driven evaluation engine — sections, questions, scoring, and result valuations through data.", "tier": "pro", "useCases": [ "Product-fit qualification at the start of a sales cycle.", "Compliance and audit self-assessments.", "Skill or maturity evaluations for personalization.", "Survey or feedback collection with conditional questions." ], "props": [ { "name": "config", "type": "AssessmentConfig", "desc": "Sections, questions, and scoring rules." }, { "name": "responseSet", "type": "ResponseSet", "desc": "Existing responses (for editing or resuming)." }, { "name": "onComplete", "type": "(result) => void", "desc": "Fires when assessment is submitted." }, { "name": "onSave", "type": "(partial) => void", "desc": "Fires on partial save." }, { "name": "showScore", "type": "boolean", "desc": "Reveal the computed score after completion." } ], "url": "https://cleenui.com/components/project-management/assessment", "storybookId": null } ] }, { "slug": "media", "label": "Media", "tagline": "Images, video, avatars, and carousels — the visual primitives.", "tier": "pro", "url": "https://cleenui.com/components/media", "count": 4, "components": [ { "slug": "card-media", "name": "CardMedia", "oneLiner": "Card variant with built-in image or video media slot — aspect-ratio control, hover overlays, play-on-hover.", "tier": "pro", "useCases": [ "Article and blog-post listings with hero images.", "Product grid tiles in e-commerce or marketplaces.", "Course or video gallery cards.", "Portfolio and case-study browsing." ], "props": [ { "name": "media", "type": "{ type: \"image\" | \"video\", src: string }", "desc": "Media source." }, { "name": "aspectRatio", "type": "string", "desc": "CSS aspect ratio (e.g. \"16/9\")." }, { "name": "playOnHover", "type": "boolean", "desc": "Start video on hover." }, { "name": "overlay", "type": "ReactNode", "desc": "Content rendered on top of the media." }, { "name": "lazy", "type": "boolean", "desc": "Lazy-load the media asset." } ], "url": "https://cleenui.com/components/media/card-media", "storybookId": null }, { "slug": "carousel", "name": "Carousel", "oneLiner": "Touch- and keyboard-friendly horizontal slider with autoplay, pagination dots, and custom slides.", "tier": "pro", "useCases": [ "Homepage hero rotators.", "Testimonial sliders.", "Image galleries with multi-image previews.", "Feature showcase rotators." ], "props": [ { "name": "slides", "type": "ReactNode[]", "desc": "Array of slide content." }, { "name": "autoplay", "type": "boolean", "desc": "Auto-advance through slides." }, { "name": "intervalMs", "type": "number", "desc": "Autoplay interval." }, { "name": "transition", "type": "\"slide\" | \"fade\"", "desc": "Transition style." }, { "name": "showDots", "type": "boolean", "desc": "Display pagination dots." } ], "url": "https://cleenui.com/components/media/carousel", "storybookId": null }, { "slug": "avatar-row", "name": "AvatarRow", "oneLiner": "Stacked group of avatars with overlap, \"+N more\" overflow, and per-avatar tooltips.", "tier": "pro", "useCases": [ "Collaborators on a task or document.", "Recent participants in a thread or channel.", "Shared owners or assignees on a record.", "Attendee lists on calendar events." ], "props": [ { "name": "users", "type": "User[]", "desc": "Users to render." }, { "name": "max", "type": "number", "desc": "Max visible avatars before overflow." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "desc": "Avatar size." }, { "name": "overlap", "type": "number", "desc": "Pixel overlap between avatars." }, { "name": "tooltipContent", "type": "(user) => ReactNode", "desc": "Custom tooltip renderer." } ], "url": "https://cleenui.com/components/media/avatar-row", "storybookId": null }, { "slug": "avatar", "name": "Avatar", "oneLiner": "Single user avatar with image, initials fallback, status indicator, and sizing.", "tier": "pro", "useCases": [ "User identity in headers and navigation.", "Author bylines on posts and articles.", "Assignee chips on tasks.", "Profile previews in user-pickers." ], "props": [ { "name": "src", "type": "string", "desc": "Image URL." }, { "name": "name", "type": "string", "desc": "User name (for initials fallback and a11y label)." }, { "name": "size", "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"", "desc": "Avatar size." }, { "name": "status", "type": "\"online\" | \"away\" | \"busy\" | \"offline\"", "desc": "Presence indicator." }, { "name": "shape", "type": "\"circle\" | \"square\"", "desc": "Avatar shape." } ], "url": "https://cleenui.com/components/media/avatar", "storybookId": null } ] }, { "slug": "overlays", "label": "Overlays", "tagline": "Modals, drawers, popovers, tooltips — the contextual surfaces.", "tier": "pro", "url": "https://cleenui.com/components/overlays", "count": 5, "components": [ { "slug": "modal", "name": "Modal", "oneLiner": "Centered modal with backdrop, focus trap, ESC-to-close, and stacked-modal support.", "tier": "pro", "useCases": [ "Confirmation dialogs before destructive actions.", "Inline edit forms over a list view.", "Detail views of a list-row item.", "Multi-step modal wizards (combine with Wizard)." ], "props": [ { "name": "open", "type": "boolean", "desc": "Controlled open state." }, { "name": "onClose", "type": "() => void", "desc": "Fires on backdrop click, ESC, or close button." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\" | \"full\"", "desc": "Modal size." }, { "name": "closeOnBackdrop", "type": "boolean", "desc": "Allow backdrop click to close." }, { "name": "title", "type": "string", "desc": "Header title." } ], "url": "https://cleenui.com/components/overlays/modal", "storybookId": "overlays-modal--default" }, { "slug": "drawer", "name": "Drawer", "oneLiner": "Custom slide-out panel — configurable from any edge, with size variants and complex contextual workflows.", "tier": "pro", "useCases": [ "Detail panels alongside a list (record inspection).", "Multi-step contextual workflows that benefit from a wider surface.", "Filter and configuration panels.", "Comment and discussion side-panels." ], "props": [ { "name": "open", "type": "boolean", "desc": "Controlled open state." }, { "name": "edge", "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", "desc": "Slide-in edge." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\" | string", "desc": "Width or height; supports CSS units." }, { "name": "resizable", "type": "boolean", "desc": "Allow user to resize the drawer." }, { "name": "onClose", "type": "() => void", "desc": "Fires on dismissal." } ], "url": "https://cleenui.com/components/overlays/drawer", "storybookId": "overlays-drawer--default" }, { "slug": "popover", "name": "Popover", "oneLiner": "Floating contextual panel anchored to a trigger with collision-aware positioning and keyboard dismissal.", "tier": "pro", "useCases": [ "Action menus anchored to a button.", "Form-field help-text or contextual explanations.", "Filter or sort menus attached to column headers.", "User and quick-action menus in nav bars." ], "props": [ { "name": "trigger", "type": "ReactNode", "desc": "Element that opens the popover." }, { "name": "content", "type": "ReactNode", "desc": "Popover body content." }, { "name": "placement", "type": "Placement", "desc": "Preferred position (e.g. \"bottom-start\")." }, { "name": "showArrow", "type": "boolean", "desc": "Render the connection arrow." }, { "name": "onOpenChange", "type": "(open: boolean) => void", "desc": "Fires on open/close." } ], "url": "https://cleenui.com/components/overlays/popover", "storybookId": "overlays-popover--default" }, { "slug": "tooltip", "name": "Tooltip", "oneLiner": "Hover-triggered text label with configurable delay, position, and arrow direction. Keyboard accessible.", "tier": "pro", "useCases": [ "Icon button labels (\"Edit\", \"Delete\", \"Settings\").", "Truncated text expansion on long labels.", "Help text on form-field labels.", "Status indicator explanations." ], "props": [ { "name": "content", "type": "ReactNode", "desc": "Tooltip content." }, { "name": "placement", "type": "Placement", "desc": "Preferred position." }, { "name": "openDelayMs", "type": "number", "desc": "Delay before appearing." }, { "name": "closeDelayMs", "type": "number", "desc": "Delay before hiding." }, { "name": "disabled", "type": "boolean", "desc": "Suppress the tooltip without removing it from the DOM." } ], "url": "https://cleenui.com/components/overlays/tooltip", "storybookId": null }, { "slug": "review-modal", "name": "ReviewModal", "oneLiner": "Pre-built review/approval modal with comment threading, status transitions, and audit trail.", "tier": "pro", "useCases": [ "Content moderation review queues.", "Pending-edit approval workflows.", "Document and proposal sign-off.", "Hiring or candidate review tracks." ], "props": [ { "name": "entity", "type": "object", "desc": "Item under review." }, { "name": "statuses", "type": "Status[]", "desc": "Allowed statuses." }, { "name": "transitions", "type": "Transition[]", "desc": "Allowed status transitions." }, { "name": "requiredApprovers", "type": "number", "desc": "Approvers required to commit." }, { "name": "onTransition", "type": "(from, to, comment) => Promise", "desc": "Async transition handler." } ], "url": "https://cleenui.com/components/overlays/review-modal", "storybookId": "overlays-review-modal--default" } ] }, { "slug": "data-display", "label": "Data Display", "tagline": "Cards, badges, labels — the static content building blocks.", "tier": "pro", "url": "https://cleenui.com/components/data-display", "count": 5, "components": [ { "slug": "card", "name": "Card", "oneLiner": "The base card primitive — padding, border, shadow, and a slot for any content.", "tier": "pro", "useCases": [ "Generic content containers in dashboards.", "List item wrappers with consistent padding.", "Settings and preferences panels.", "Empty-state messages with action buttons." ], "props": [ { "name": "padding", "type": "\"sm\" | \"md\" | \"lg\" | string", "desc": "Internal padding." }, { "name": "hoverable", "type": "boolean", "desc": "Add lift-on-hover effect." }, { "name": "header", "type": "ReactNode", "desc": "Header slot content." }, { "name": "footer", "type": "ReactNode", "desc": "Footer slot content." }, { "name": "as", "type": "ElementType", "desc": "Render-as element (e.g. \"a\" for clickable cards)." } ], "url": "https://cleenui.com/components/data-display/card", "storybookId": "data-display-card--default" }, { "slug": "card-icon", "name": "CardIcon", "oneLiner": "Card variant with a leading icon block — feature lists, capability grids, module overviews.", "tier": "pro", "useCases": [ "Feature grids on marketing pages.", "Module or capability lists in product overviews.", "Category navigation cards on category pages.", "Quick-action grids in dashboards." ], "props": [ { "name": "icon", "type": "string", "desc": "Icon name to render." }, { "name": "title", "type": "string", "desc": "Card title." }, { "name": "description", "type": "string", "desc": "Body text." }, { "name": "iconColor", "type": "string", "desc": "Color token for the icon background." }, { "name": "as", "type": "ElementType", "desc": "Render-as element." } ], "url": "https://cleenui.com/components/data-display/card-icon", "storybookId": "data-display-cardicon--basic" }, { "slug": "editable-card", "name": "EditableCard", "oneLiner": "In-place-editable card — click to edit, blur or commit to save.", "tier": "pro", "useCases": [ "Inline-editable settings and preferences.", "Editable cell groups in detail views.", "Quick-edit blocks in admin tooling.", "Bio and profile field editing." ], "props": [ { "name": "value", "type": "any", "desc": "Current value (controlled)." }, { "name": "renderDisplay", "type": "(value) => ReactNode", "desc": "Display-mode renderer." }, { "name": "renderEdit", "type": "(value, onChange) => ReactNode", "desc": "Edit-mode renderer." }, { "name": "onSave", "type": "(value) => Promise", "desc": "Async save handler." }, { "name": "validate", "type": "(value) => string | undefined", "desc": "Validation function returning an error message." } ], "url": "https://cleenui.com/components/data-display/editable-card", "storybookId": "data-display-editablecard--default" }, { "slug": "info-labels", "name": "InfoLabels", "oneLiner": "Compact key-value display for metadata rows in detail views and side panels.", "tier": "pro", "useCases": [ "Detail panels on a record screen.", "Account and subscription info displays.", "Profile metadata blocks.", "Status summaries on dashboard cards." ], "props": [ { "name": "items", "type": "{ label: string, value: ReactNode }[]", "desc": "Label/value pairs." }, { "name": "layout", "type": "\"inline\" | \"stacked\" | \"table\"", "desc": "Visual layout." }, { "name": "labelWidth", "type": "string", "desc": "Label column width (inline/table modes)." }, { "name": "size", "type": "\"sm\" | \"md\"", "desc": "Typography size variant." }, { "name": "divider", "type": "boolean", "desc": "Render dividers between items." } ], "url": "https://cleenui.com/components/data-display/info-labels", "storybookId": "data-display-infolabels--default" }, { "slug": "pill-badge", "name": "PillBadge", "oneLiner": "Small pill-shaped badge with semantic variants and optional icon.", "tier": "pro", "useCases": [ "Status indicators on records (Active, Pending, Failed).", "Category or tag chips.", "Notification count indicators on icons.", "Plan or tier badges (Free, Pro, Enterprise)." ], "props": [ { "name": "variant", "type": "\"info\" | \"success\" | \"warning\" | \"error\" | \"neutral\" | \"brand\"", "desc": "Semantic color." }, { "name": "size", "type": "\"xs\" | \"sm\" | \"md\"", "desc": "Pill size." }, { "name": "icon", "type": "string", "desc": "Optional leading icon name." }, { "name": "children", "type": "ReactNode", "desc": "Pill content." }, { "name": "outline", "type": "boolean", "desc": "Outline-style variant." } ], "url": "https://cleenui.com/components/data-display/pill-badge", "storybookId": "data-display-pillbadge--red" } ] }, { "slug": "feedback", "label": "Feedback", "tagline": "Loading, progress, notifications — the status surface.", "tier": "pro", "url": "https://cleenui.com/components/feedback", "count": 7, "components": [ { "slug": "loader", "name": "Loader", "oneLiner": "Inline spinner with size variants for short async loads where a skeleton would be overkill.", "tier": "pro", "useCases": [ "Button-internal loaders during submit.", "Inline loading states inside menu items or chips.", "Quick API call feedback in popovers.", "Lazy-loaded section placeholders." ], "props": [ { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "desc": "Spinner size." }, { "name": "color", "type": "string", "desc": "Override color (defaults to currentColor)." }, { "name": "label", "type": "string", "desc": "Accessible label." }, { "name": "centered", "type": "boolean", "desc": "Center within parent." }, { "name": "thickness", "type": "number", "desc": "Stroke thickness." } ], "url": "https://cleenui.com/components/feedback/loader", "storybookId": "feedback-loader--default" }, { "slug": "progress-bar", "name": "ProgressBar", "oneLiner": "Linear progress indicator with percent, indeterminate mode, and label.", "tier": "pro", "useCases": [ "File upload and download progress.", "Form completion percentage in long flows.", "Multi-step process indicators.", "Storage or quota meters." ], "props": [ { "name": "value", "type": "number", "desc": "Progress 0–100." }, { "name": "indeterminate", "type": "boolean", "desc": "Striped animation when progress is unknown." }, { "name": "label", "type": "string", "desc": "Label above the bar." }, { "name": "showValue", "type": "boolean", "desc": "Render percentage value." }, { "name": "color", "type": "string", "desc": "Color variant or token." } ], "url": "https://cleenui.com/components/feedback/progress-bar", "storybookId": "feedback-progressbar--default" }, { "slug": "progress-circle", "name": "ProgressCircle", "oneLiner": "Radial progress indicator — the same modes as ProgressBar, sized for compact contexts.", "tier": "pro", "useCases": [ "Compact loading indicators in headers.", "Storage gauges in account dashboards.", "Inline progress in tight table cells.", "Score or rating gauges." ], "props": [ { "name": "value", "type": "number", "desc": "Progress 0–100." }, { "name": "indeterminate", "type": "boolean", "desc": "Spinning animation when progress is unknown." }, { "name": "size", "type": "number", "desc": "Diameter in pixels." }, { "name": "thickness", "type": "number", "desc": "Ring stroke width." }, { "name": "label", "type": "ReactNode", "desc": "Center label (defaults to percent)." } ], "url": "https://cleenui.com/components/feedback/progress-circle", "storybookId": "feedback-progresscircle--default" }, { "slug": "advanced-progress-bar", "name": "AdvancedProgressBar", "oneLiner": "Stepped progress bar with named milestones, completion timestamps, and per-step error states.", "tier": "pro", "useCases": [ "Deployment progress through environments.", "Order or shipment tracking with named stages.", "Multi-step background jobs (data sync, batch processing).", "Onboarding progress with named checkpoints." ], "props": [ { "name": "milestones", "type": "Milestone[]", "desc": "Ordered milestones {label, status, timestamp, error}." }, { "name": "currentIndex", "type": "number", "desc": "Index of the active milestone." }, { "name": "showTimestamps", "type": "boolean", "desc": "Display per-step timestamps." }, { "name": "onMilestoneClick", "type": "(milestone) => void", "desc": "Click handler." }, { "name": "vertical", "type": "boolean", "desc": "Render vertically instead of horizontally." } ], "url": "https://cleenui.com/components/feedback/advanced-progress-bar", "storybookId": "feedback-advancedprogressbar--default" }, { "slug": "notification", "name": "Notification", "oneLiner": "Toast-style transient notification with semantic variants, dismiss, action button, and queueing.", "tier": "pro", "useCases": [ "Save-confirmation toasts after form submission.", "Error notifications when an API call fails.", "Background-task completion alerts.", "Action confirmations with undo buttons." ], "props": [ { "name": "variant", "type": "\"info\" | \"success\" | \"warning\" | \"error\" | \"neutral\"", "desc": "Semantic variant." }, { "name": "title", "type": "string", "desc": "Notification title." }, { "name": "body", "type": "ReactNode", "desc": "Notification body content." }, { "name": "action", "type": "{ label, onClick }", "desc": "Optional action button." }, { "name": "timeoutMs", "type": "number", "desc": "Auto-dismiss timeout (0 to disable)." } ], "url": "https://cleenui.com/components/feedback/notification", "storybookId": "feedback-notification--default" }, { "slug": "skeleton", "name": "Skeleton", "oneLiner": "Placeholder shimmer for loading states — 23 variants matching the primary content components.", "tier": "pro", "useCases": [ "Initial page load placeholders.", "Card grid loading states.", "DataGrid row-skeleton displays.", "Profile and header loading shimmers." ], "props": [ { "name": "variant", "type": "string", "desc": "Skeleton shape (e.g. \"card\", \"list-row\", \"avatar\")." }, { "name": "width", "type": "string | number", "desc": "Override width." }, { "name": "height", "type": "string | number", "desc": "Override height." }, { "name": "count", "type": "number", "desc": "Repeat the skeleton N times." }, { "name": "animated", "type": "boolean", "desc": "Enable shimmer animation." } ], "url": "https://cleenui.com/components/feedback/skeleton", "storybookId": "feedback-skeleton--default" }, { "slug": "star-rating", "name": "StarRating", "oneLiner": "Read-only or interactive star-rating control with half-star support and accessible keyboard input.", "tier": "pro", "useCases": [ "Customer review displays on product pages.", "Internal NPS or satisfaction surveys.", "Quality-rating capture in feedback forms.", "Recommendation strength indicators." ], "props": [ { "name": "value", "type": "number", "desc": "Current rating (0–max, step-aligned)." }, { "name": "max", "type": "number", "desc": "Number of stars." }, { "name": "step", "type": "number", "desc": "Precision (e.g. 0.5 for half-stars)." }, { "name": "readonly", "type": "boolean", "desc": "Display-only mode." }, { "name": "onChange", "type": "(value: number) => void", "desc": "Fires on user input." } ], "url": "https://cleenui.com/components/feedback/star-rating", "storybookId": null } ] }, { "slug": "navigation", "label": "Navigation", "tagline": "Sidebars, tabs, breadcrumbs, menus — the wayfinding components.", "tier": "pro", "url": "https://cleenui.com/components/navigation", "count": 5, "components": [ { "slug": "sidebar", "name": "Sidebar", "oneLiner": "Collapsible side navigation with nested sections, active-state tracking, and overflow scroll.", "tier": "pro", "useCases": [ "Admin application primary navigation.", "Documentation site sidebars with nested chapters.", "Settings panel navigation.", "Dashboard module switchers." ], "props": [ { "name": "sections", "type": "Section[]", "desc": "Section groups with items inside each." }, { "name": "collapsed", "type": "boolean", "desc": "Render in collapsed (icons-only) mode." }, { "name": "onCollapseChange", "type": "(collapsed: boolean) => void", "desc": "Fires on collapse toggle." }, { "name": "activeRoute", "type": "string", "desc": "Currently active route for highlighting." }, { "name": "footer", "type": "ReactNode", "desc": "Optional footer content." } ], "url": "https://cleenui.com/components/navigation/sidebar", "storybookId": "navigation-sidebar--controlled" }, { "slug": "tabs", "name": "Tabs", "oneLiner": "Horizontal tab control with controlled or uncontrolled state, keyboard navigation, and per-tab badges.", "tier": "pro", "useCases": [ "Multi-aspect detail views (Overview / Activity / Settings).", "Settings page section switchers.", "Dashboard tab-style filters.", "Documentation panel switchers within an article." ], "props": [ { "name": "tabs", "type": "Tab[]", "desc": "Tab definitions {key, label, badge, render}." }, { "name": "activeKey", "type": "string", "desc": "Currently active tab (controlled)." }, { "name": "onTabChange", "type": "(key) => void", "desc": "Fires on tab change." }, { "name": "lazy", "type": "boolean", "desc": "Defer tab content rendering until activated." }, { "name": "overflow", "type": "\"scroll\" | \"menu\"", "desc": "Overflow handling." } ], "url": "https://cleenui.com/components/navigation/tabs", "storybookId": "navigation-tabs--padded" }, { "slug": "breadcrumb", "name": "Breadcrumb", "oneLiner": "Path indicator with item separators, dropdown overflow for long paths, and home/back links.", "tier": "pro", "useCases": [ "Page-level location indicators (Home / Products / Category / Item).", "Detail-view path context (User / Account / Subscription).", "Nested folder navigation in file managers.", "Documentation chapter context." ], "props": [ { "name": "items", "type": "{ label, href, icon }[]", "desc": "Ordered breadcrumb items." }, { "name": "separator", "type": "ReactNode", "desc": "Separator between items (default: chevron)." }, { "name": "maxVisible", "type": "number", "desc": "Maximum visible items before overflow menu." }, { "name": "showHome", "type": "boolean", "desc": "Prepend a home icon link." }, { "name": "size", "type": "\"sm\" | \"md\"", "desc": "Typography size." } ], "url": "https://cleenui.com/components/navigation/breadcrumb", "storybookId": "navigation-breadcrumb--static" }, { "slug": "menu", "name": "Menu", "oneLiner": "Generic menu primitive used by Sidebar, Popover, and dropdowns — keyboard-navigable, accessible.", "tier": "pro", "useCases": [ "Dropdown action menus on tables and lists.", "Right-click context menus.", "User-account menus in nav bars.", "Filter and sort menus in data views." ], "props": [ { "name": "items", "type": "MenuItem[]", "desc": "Menu items (with nested submenus)." }, { "name": "trigger", "type": "ReactNode", "desc": "Optional trigger when used standalone." }, { "name": "onSelect", "type": "(item) => void", "desc": "Fires when an item is selected." }, { "name": "size", "type": "\"sm\" | \"md\"", "desc": "Item size and spacing." }, { "name": "renderItem", "type": "(item) => ReactNode", "desc": "Custom item renderer." } ], "url": "https://cleenui.com/components/navigation/menu", "storybookId": "navigation-menu--default" }, { "slug": "stepper", "name": "Stepper", "oneLiner": "Numbered step indicator for multi-step flows — connects to Wizard or works standalone.", "tier": "pro", "useCases": [ "Multi-step form headers (paired with Wizard).", "Checkout flow progress indicators.", "Onboarding sequence visualizations.", "Approval workflow status displays." ], "props": [ { "name": "steps", "type": "Step[]", "desc": "Step definitions {key, label, status}." }, { "name": "currentIndex", "type": "number", "desc": "Currently active step index." }, { "name": "orientation", "type": "\"horizontal\" | \"vertical\"", "desc": "Stepper direction." }, { "name": "onStepClick", "type": "(step) => void", "desc": "Make steps clickable when set." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "desc": "Visual size variant." } ], "url": "https://cleenui.com/components/navigation/stepper", "storybookId": "navigation-stepper--horizontal" } ] }, { "slug": "layout", "label": "Layout", "tagline": "Structural primitives that hold the page together.", "tier": "pro", "url": "https://cleenui.com/components/layout", "count": 3, "components": [ { "slug": "divider", "name": "Divider", "oneLiner": "Horizontal or vertical separator with optional centered label.", "tier": "pro", "useCases": [ "Separating sections in a long form.", "\"OR\" divider between social-login and email-login options.", "Inline separators in toolbar groups.", "Section breaks in long-form content." ], "props": [ { "name": "orientation", "type": "\"horizontal\" | \"vertical\"", "desc": "Divider direction." }, { "name": "label", "type": "string", "desc": "Centered label rendered on the divider." }, { "name": "spacing", "type": "\"sm\" | \"md\" | \"lg\"", "desc": "Vertical margin (horizontal mode only)." }, { "name": "color", "type": "string", "desc": "Override line color." }, { "name": "dashed", "type": "boolean", "desc": "Render as dashed line." } ], "url": "https://cleenui.com/components/layout/divider", "storybookId": "layout-divider--default" }, { "slug": "form-group", "name": "FormGroup", "oneLiner": "Form-section wrapper providing label, help text, error display, and consistent spacing for related inputs.", "tier": "pro", "useCases": [ "Address forms (street, city, state, zip as one group).", "Payment-information forms.", "Settings panels organized by category.", "Multi-section single-page forms." ], "props": [ { "name": "label", "type": "string", "desc": "Group title." }, { "name": "help", "type": "string", "desc": "Optional help text under the title." }, { "name": "error", "type": "string", "desc": "Group-level error message." }, { "name": "spacing", "type": "\"compact\" | \"normal\" | \"relaxed\"", "desc": "Vertical spacing between child inputs." }, { "name": "collapsible", "type": "boolean", "desc": "Allow the group to collapse." } ], "url": "https://cleenui.com/components/layout/form-group", "storybookId": null }, { "slug": "collapsible", "name": "Collapsible", "oneLiner": "Expand/collapse panel with smooth height animation and chevron rotation.", "tier": "pro", "useCases": [ "FAQ-style accordion panels.", "Advanced/optional settings hidden by default.", "Long-form detail sections in card layouts.", "Help-content expansion areas inline with forms." ], "props": [ { "name": "title", "type": "ReactNode", "desc": "Trigger content (also clickable area)." }, { "name": "open", "type": "boolean", "desc": "Controlled open state." }, { "name": "defaultOpen", "type": "boolean", "desc": "Initial open state (uncontrolled)." }, { "name": "onOpenChange", "type": "(open: boolean) => void", "desc": "Open/close handler." }, { "name": "duration", "type": "number", "desc": "Animation duration in ms." } ], "url": "https://cleenui.com/components/layout/collapsible", "storybookId": null } ] }, { "slug": "charts", "label": "Charts", "tagline": "Bar, scatter, sankey, treemap — the data-visualization surface.", "tier": "pro", "url": "https://cleenui.com/components/charts", "count": 7, "components": [ { "slug": "chart", "name": "Chart", "oneLiner": "Generic chart primitive supporting bar, column, and line types with configurable axes and legends.", "tier": "pro", "useCases": [ "Revenue or metric trends over time (line).", "Category comparisons (bar/column).", "Multi-series performance dashboards.", "Cumulative or stacked area charts." ], "props": [ { "name": "data", "type": "Series[]", "desc": "Series data with x/y points." }, { "name": "type", "type": "\"bar\" | \"column\" | \"line\" | \"area\"", "desc": "Chart type." }, { "name": "stacked", "type": "boolean", "desc": "Stack series instead of grouping." }, { "name": "xAxis", "type": "AxisConfig", "desc": "X-axis configuration." }, { "name": "yAxis", "type": "AxisConfig", "desc": "Y-axis configuration." } ], "url": "https://cleenui.com/components/charts/chart", "storybookId": "charts-chart--area-chart" }, { "slug": "simple-chart", "name": "SimpleChart", "oneLiner": "Sparkline-style chart — no axes, no legend, just the trend.", "tier": "pro", "useCases": [ "KPI cards with trend indicators.", "Inline trend cells in DataGrid.", "Dashboard tile mini-charts.", "Compact metric summaries." ], "props": [ { "name": "data", "type": "number[]", "desc": "Array of values." }, { "name": "type", "type": "\"line\" | \"bar\" | \"area\"", "desc": "Sparkline style." }, { "name": "color", "type": "string", "desc": "Series color token or hex." }, { "name": "height", "type": "number", "desc": "Pixel height." }, { "name": "showLast", "type": "boolean", "desc": "Highlight the last point." } ], "url": "https://cleenui.com/components/charts/simple-chart", "storybookId": "charts-simplechart--basic" }, { "slug": "bell-curve", "name": "BellCurve", "oneLiner": "Normal-distribution visualization with configurable mean, standard deviation, and percentile markers.", "tier": "pro", "useCases": [ "Assessment results vs. population benchmarks.", "A/B test statistical visualization.", "Performance distribution across teams or accounts.", "Salary band and compensation analysis." ], "props": [ { "name": "mean", "type": "number", "desc": "Distribution mean." }, { "name": "stdDev", "type": "number", "desc": "Standard deviation." }, { "name": "markers", "type": "Marker[]", "desc": "Highlighted points or percentiles." }, { "name": "showPercentiles", "type": "boolean", "desc": "Display percentile lines (25, 50, 75)." }, { "name": "color", "type": "string", "desc": "Curve color." } ], "url": "https://cleenui.com/components/charts/bell-curve", "storybookId": "charts-bellcurve--default" }, { "slug": "radar-chart", "name": "RadarChart", "oneLiner": "Multi-axis comparison chart — skill profiles, feature comparisons, assessment results.", "tier": "pro", "useCases": [ "Skill or competency profiles.", "Feature comparisons between products or plans.", "Multi-dimensional assessment results.", "Account or customer maturity profiles." ], "props": [ { "name": "axes", "type": "Axis[]", "desc": "Axis definitions {key, label, min, max}." }, { "name": "data", "type": "Entity[]", "desc": "Entities with values per axis." }, { "name": "fill", "type": "boolean", "desc": "Fill the radar shape with color." }, { "name": "showGrid", "type": "boolean", "desc": "Display concentric grid rings." }, { "name": "maxValue", "type": "number", "desc": "Normalize all axes to this max." } ], "url": "https://cleenui.com/components/charts/radar-chart", "storybookId": "charts-radarchart--default" }, { "slug": "scatter-chart", "name": "ScatterChart", "oneLiner": "XY plot with configurable point sizing, grouping by series, and optional regression line.", "tier": "pro", "useCases": [ "Performance correlations (e.g. time-on-page vs. conversion).", "Customer segmentation visualizations.", "A/B test outcome scatter plots.", "Quality vs. cost tradeoff analysis." ], "props": [ { "name": "data", "type": "Point[]", "desc": "Points with {x, y, z?, series?}." }, { "name": "regression", "type": "\"linear\" | \"polynomial\" | \"logarithmic\" | null", "desc": "Regression line type." }, { "name": "sizeBy", "type": "string", "desc": "Field to drive point size." }, { "name": "colorBy", "type": "string", "desc": "Field to drive point color (for grouped series)." }, { "name": "showAxes", "type": "boolean", "desc": "Display axis labels and ticks." } ], "url": "https://cleenui.com/components/charts/scatter-chart", "storybookId": "charts-scatterchart--default" }, { "slug": "sankey-chart", "name": "SankeyChart", "oneLiner": "Flow visualization showing volume between nodes — funnels, traffic flow, resource allocation.", "tier": "pro", "useCases": [ "Conversion funnel visualization with drop-offs at each stage.", "Traffic-source flow into outcomes.", "Budget or resource allocation across categories.", "User journey or pathway analysis." ], "props": [ { "name": "nodes", "type": "Node[]", "desc": "Node definitions {id, label, color}." }, { "name": "links", "type": "Link[]", "desc": "Links {source, target, value}." }, { "name": "nodeWidth", "type": "number", "desc": "Pixel width of each node block." }, { "name": "nodePadding", "type": "number", "desc": "Vertical padding between nodes." }, { "name": "showValues", "type": "boolean", "desc": "Display flow values on each link." } ], "url": "https://cleenui.com/components/charts/sankey-chart", "storybookId": "charts-sankeychart--default" }, { "slug": "treemap-chart", "name": "TreemapChart", "oneLiner": "Hierarchical area chart where rectangle size encodes value — portfolio composition, category breakdowns.", "tier": "pro", "useCases": [ "Portfolio composition visualization.", "Storage or disk-usage breakdowns.", "Market share and competitive analysis.", "Category-wise budget or revenue breakdowns." ], "props": [ { "name": "data", "type": "Node", "desc": "Root node with nested children." }, { "name": "valueKey", "type": "string", "desc": "Field used for rectangle sizing." }, { "name": "colorKey", "type": "string", "desc": "Field used for color coding." }, { "name": "onClick", "type": "(node) => void", "desc": "Drill-down handler." }, { "name": "showLabels", "type": "boolean", "desc": "Render text labels in rectangles." } ], "url": "https://cleenui.com/components/charts/treemap-chart", "storybookId": "charts-treemapchart--default" } ] } ] }