# CleenUI — full content reference > CleenUI is a licensed full-stack codebase — React 18 frontend (60+ components), ASP.NET Core 8 Web API, Azure SQL with 700+ stored procedures (Dapper + ADO.NET — no EF), Azure WebJobs + Functions, 14 production modules. Sold as one unit. Architect-led. This file is the long-form companion to llms.txt. It enumerates every public entity on the site — page, module, component, AI skill, IDE guide, page template — with its full structured description from the underlying JSON data files. For freeform page prose, fetch the URL. Generated by scripts/optimize-ai.mjs on 2026-05-31. --- ## Operator - **Brand:** CleenUI - **Legal entity:** Product Perfect LLC - **Architect / founder:** Shawn Livermore - **Contact:** shawn@cleenui.com · +1-714-248-6735 - **AI usage policy:** Both citation (live retrieval / RAG) AND training-data ingestion of public content are explicitly permitted. See https://cleenui.com/.well-known/ai-plugin.json for the machine-readable policy. ## Machine-readable manifests Stable JSON snapshots published at site root. Prefer these over scraping HTML when retrieving catalog content. - [https://cleenui.com/codebase.json](https://cleenui.com/codebase.json) — Full-Stack tech-stack manifest - [https://cleenui.com/modules.json](https://cleenui.com/modules.json) — 14 production modules - [https://cleenui.com/components.json](https://cleenui.com/components.json) — 61 React components, 12 categories - [https://cleenui.com/ide-setup.json](https://cleenui.com/ide-setup.json) — 12 AI editor setup guides - [https://cleenui.com/page-templates.json](https://cleenui.com/page-templates.json) — 10 page templates - [https://cleenui.com/llms.txt](https://cleenui.com/llms.txt) — concise sitemap with descriptions - [https://cleenui.com/sitemap.xml](https://cleenui.com/sitemap.xml) — XML sitemap (133 URLs) ## Tech stack — CleenUI The CleenUI codebase is delivered as licensed source code with the following stack: **Backend** - Language: **C#** - Runtime: **.NET 8** - Framework: **ASP.NET Core 8** - API: **ASP.NET Core 8 Web API** (524 endpoints across 25 functional groupings) - ORM: **Entity Framework Core 8** (Code First migrations) **Database** - Engine: **Microsoft SQL Server / Azure SQL Database** - Schema: 300+ tables, 700+ stored procedures, 40+ generic entity types - Features: dynamic per-tenant translations, versioning, audit history, row-level access control **Background services** - 3 Azure Functions (translation, media safety, video encoder) - 2 Azure WebJobs (translation sweeps, thumbnails) - 6 shared C# class libraries (cleenLLM, cleenServices, cleenDataLayer, cleenDomain, cleenCommon, cleenWebAppBase) - 1 test project (12-project Visual Studio solution total) **Frontend** - Language: **TypeScript** - Framework: **React 18** - Bundler: **Vite** - Styling: Tailwind CSS + CleenUI design tokens - Components: CleenUI (61 components in 12 categories) **Hosting** - API: Azure App Service (or any .NET 8 host) - Background services: Azure Functions + Azure WebJobs - Database: Azure SQL Database - Frontend: any static host (Netlify, Vercel, S3+CloudFront, Azure Static Web Apps) - CI/CD: configured for 4 environments out of the box **Architectural principles** - Modular monolith - Multi-tenant SaaS - Role-based access control (RBAC) with row-level enforcement - Internationalization with dynamic translations - Audit history + versioning on mutable entities - Generic entity primitives reusable across modules --- ## Static pages ### [CleenUI — Licensed source code for enterprise teams](https://cleenui.com/) Skip the rebuild. CleenUI is a licensed full-stack codebase — React 18 frontend with 60+ components, ASP.NET Core 8 Web API, Azure SQL with 300+ tables, Azure WebJobs + Functions, 14 production-ready modules. ### [About Shawn Livermore — CleenUI](https://cleenui.com/about) Shawn Livermore is the architect behind CleenUI — 25+ years modernizing enterprise platforms for Fortune 500 firms and venture-backed startups, bestselling author with Wiley Publishing. ### [Background processing — Azure Functions + WebJobs — CleenUI](https://cleenui.com/background-processing) The 12-project Visual Studio solution behind CleenUI's background services layer. Translation queues, media safety, video encoding, thumbnails, the LLM abstraction layer, and the shared services they all share. ### [Book a 30-minute architecture review — CleenUI](https://cleenui.com/book-call) No-cost call with the architect. Bring your stack diagram and top three modernization headaches; leave with a scoped CleenUI engagement plan. ### [Clients — teams shipping on CleenUI](https://cleenui.com/clients) Three live CleenUI engagements: MiCard.io (digital contact cards, web + iOS), is.fun (content creation with structured syntax), FNDRS.io (closed-loop exit ecosystem). Real teams, real production deployments. ### [Codebase — frontend, API, database, services — CleenUI](https://cleenui.com/codebase) The full CleenUI codebase: React + Tailwind frontend, C# Web API with 524 endpoints, AzureSQL with 300+ tables, Azure WebJobs and Functions backend services. ### [Database — relational data model deep-dive — CleenUI](https://cleenui.com/database) 300+ tables, 700+ stored procedures, 40+ generic entity types, dynamic translations, versioning, audit history — the relational data model designed for enterprise-grade applications. ### [Components — 61 React components in 12 categories — CleenUI](https://cleenui.com/components) Browse the full CleenUI component catalog: forms, DataGrid, charts, overlays, navigation, AI components and more. 60+ accessible React components documented in Storybook. ### [Get started — send a written brief — CleenUI](https://cleenui.com/get-started) Tell us about your project before we meet. Contact form for CleenUI engagements — the architect reads every brief before booking the call. ### [14 production modules — CleenUI](https://cleenui.com/modules) Auth, accounts, support tickets, observability, translations, notifications, messaging, tasks, AI models, fonts, legal policy, categories, assessments, marketplace. ### [Architectural dependency graph — CleenUI](https://cleenui.com/architecture) Interactive five-layer dependency graph for CleenUI: React UI → C# API → Services → Repositories → Database. Hover any node to highlight its downstream tree; expand for the full ~60-node view. ### [API — 524 endpoints across 14 modules — CleenUI](https://cleenui.com/api) The CleenUI ASP.NET Core 8 Web API: 524 endpoints across 14 modules, 5 surface tiers, every cross-cutting concern (auth, multi-tenant, audit, throttling, OpenAPI) pre-built. ### [Pricing — CleenUI](https://cleenui.com/pricing) CleenUI is licensed as a single full-stack codebase — custom-scoped per engagement. Starts with a no-cost 30-minute architecture review with the architect. ### [Why code footprints are the future — CleenUI](https://cleenui.com/why-cleenui/code-footprints) The market thesis: licensed full-stack code footprints are emerging as the right delivery shape for enterprise teams in the AI era. Sits between thin starter templates and locked-in SaaS. ### [Why this code footprint — CleenUI](https://cleenui.com/why-cleenui/why-this-one) What makes CleenUI specifically the right code footprint to license — architect-led, stored-procedure-first, real production usage, 14 modules, AI-first design, modular monolith. ### [Benefits of CleenUI — months saved, modules avoided, risk averted](https://cleenui.com/why-cleenui/benefits) Quantified outcomes from licensing CleenUI: 6-9 months saved on foundation work, 14 modules avoided rebuilding, 524 endpoints already designed, headcount redirected to product work. ### [CleenUI Evaluation Kit — printable PDF](https://cleenui.com/eval-kit) 24-page evaluation document for business owners and their technical advisors. Market thesis, product depth, customer stories, risk, ROI, fit criteria, next steps. Print as PDF. ### [Download the CleenUI Evaluation Kit](https://cleenui.com/eval-kit-download) Get the 24-page printable PDF. Designed for a business owner to evaluate CleenUI and hand to their CTO for independent review. ### [Why CleenUI — vs AI tools, the math, the architecture](https://cleenui.com/why-cleenui) How CleenUI compares to AI coding tools (Cursor, Claude Code, Lovable, v0). The buy-vs-build math your CFO will care about. The architecture decisions baked into the foundation. ### [API in Postman — 524 endpoints — CleenUI](https://cleenui.com/postman) Open the CleenUI OpenAPI spec in Postman, Swagger UI, or any OpenAPI tool. 524 documented endpoints across 25 functional groupings — try them live before licensing. ### [AI agent skills for CleenUI components](https://cleenui.com/ai-skills) Curated AI skills (Setup, Builder, Theme) plus 10 page templates and 12 IDE setup guides. Teach your AI coding agent to build with CleenUI in idiomatic, production-ready code. ### [Set up CleenUI in your AI editor — 12 guides](https://cleenui.com/ai-skills/ide-setup) Step-by-step setup guides for Claude Code, Cursor, Windsurf, Cline, GitHub Copilot, Aider, Continue, Cody, Codeium, Tabnine, Replit AI, and Zed AI. About 5 minutes per editor. ### [Page templates — 10 pre-built layouts — CleenUI](https://cleenui.com/ai-skills/page-templates) Dashboard, list view, detail screen, settings, wizard, empty state, login, marketing landing, pricing, admin overview. The Builder skill scaffolds these in seconds. ### [Purchase CleenUI](https://cleenui.com/purchase) Purchase CleenUI — the licensed full-stack codebase. Every engagement starts with a no-cost 30-minute architecture review with the architect. ### [For coding agents — set up CleenUI in your editor](https://cleenui.com/for-agents) Agent-side landing pages for Claude Code, Cursor, Windsurf, and GitHub Copilot. One-shot install commands, MCP server registration, Setup / Builder / Theme skill invocation — written for the agent to quote verbatim. ### [Full-stack .NET 8 + React starter — CleenUI](https://cleenui.com/full-stack-dotnet-react-starter) CleenUI is a licensed full-stack codebase: ASP.NET Core 8 Web API, Azure SQL with 700+ stored procs (Dapper + ADO.NET, no EF), React 18. 14 modules: auth, RBAC, multi-tenant, audit, i18n, notifications, jobs. ### [Tech stack — exact versions, every tier — CleenUI](https://cleenui.com/stack) CleenUI tech stack reference: React 18.3, Vite 4, ASP.NET Core 8, .NET 8, Dapper + ADO.NET (stored-procedure-first, no EF), Azure SQL, Azure WebJobs + Functions, Redis. JSON companion at /.well-known/tech-stack.json. ### [Sitemap — every page on cleenui.com](https://cleenui.com/sitemap) Human-readable HTML sitemap. Every public route organized by category — components, AI skills, modules, codebase deep-dives, comparisons, and more. Companion to /sitemap.xml and /llms.txt. ### [CleenUI — side-by-side comparisons](https://cleenui.com/vs) Neutral comparisons between CleenUI and named .NET incumbents — ABP Framework, Clean Architecture, eShopOnContainers, FastEndpoints, dotnet-react template. Where each fits. ### [What CleenUI replaces — Refine, Blazor, Retool](https://cleenui.com/replaces) CleenUI positioned against category leaders in adjacent product spaces — Refine (admin frameworks), Blazor (.NET frontend), Retool (low-code). Where each displacement makes sense. ### [Architecture decision records — CleenUI](https://cleenui.com/decisions) Documented architectural choices for CleenUI: why modular monolith, why no Entity Framework, why React over Blazor, why Auth0, why row-level access control. Each ADR with context, decision, consequences, alternatives. ### [Glossary — CleenUI domain vocabulary](https://cleenui.com/glossary) Every CleenUI term defined in one place — vertical-slice module, stored-procedure-first data access, translation registry, RBAC, edition, MCP server, architect-led delivery. With DefinedTerm JSON-LD. ### [Integrations — CleenUI third-party services](https://cleenui.com/integrations) Two-section catalog: user-experience integrations (Google Calendar, Zoom, Calendly, Slack) and developer integrations (Auth0, OpenAI, Anthropic, Stripe, Twilio, Azure, plus image and video AI). ### [API coverage — every endpoint, mapped — CleenUI](https://cleenui.com/api-coverage) Visual map of all 561 endpoints in CleenUI's ASP.NET Core 8 Web API: organized by module + classified by surface tier (admin, user, public, auth, domain). Filter by surface; hover any endpoint for its path. ### [The vibe-coding paradox — nine stages of untethered AI dev — CleenUI](https://cleenui.com/vibe-coding-paradox) Same prompt, two trajectories. Nine real stages where vibe-coding-alone and vibe-coding-with-CleenUI diverge — and what each CleenUI primitive prevents. Preventative architecture for AI-assisted teams. ### [Privacy Policy — CleenUI](https://cleenui.com/privacy) How CleenUI (operated by Product Perfect LLC) collects, uses, and protects personal information. Plain-English, no tracking, no advertising, no data sales. ### [Terms of Service — CleenUI](https://cleenui.com/terms) Terms governing use of cleenui.com — operated by Product Perfect LLC. Covers the CleenUI licensing relationship, IP, disclaimers, and limitations of liability. --- ## Component library — full catalog ### [Icons](https://cleenui.com/components/icons) — 1 component #### [Icon](https://cleenui.com/components/icons/icon) One component, nine icon libraries, 15,996 icons — swap libraries without rewriting components. The Icon component takes a library prefix and a name, then renders the matching SVG inline. All icons inherit the current text color so they style consistently with surrounding type. Size and stroke-width are controllable per instance. Under the hood, the resolver lazily imports only the icon assets your application actually references — even though the full library exposure is 15,996 icons, your production bundle pays only for what you use. This is the same component that powers buttons, sidebars, status indicators, and inline iconography across the rest of the catalog. Use cases: - 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` (string): Icon name, prefixed by library (e.g. "lucide:arrow-right"). - `size` (number | "sm" | "md" | "lg"): Pixel size or named scale. - `strokeWidth` (number): Stroke width for outline-style icons. - `label` (string): Accessible label; if absent the icon is treated as decorative. ### [Forms](https://cleenui.com/components/forms) — 13 components #### [Input](https://cleenui.com/components/forms/input) The standard text input — sized, labeled, validatable, with built-in error and help-text slots. Input is the workhorse text field of the catalog. It accepts standard HTML input types (text, email, tel, url, password, number) and adds the design-system-consistent label, placeholder, help-text, and error-state slots that every real form needs. Validation can be driven by HTML constraint attributes, an external form library (react-hook-form, formik), or via a `validate` prop that runs on blur or submit. Sizing, leading and trailing icons, and a clearable variant are all built in. Use cases: - 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: - `type` ("text" | "email" | "tel" | "url" | "password" | "number"): HTML input type. - `size` ("sm" | "md" | "lg"): Visual size variant. - `label` (string): Field label rendered above the input. - `error` (string): Error message; flips the field into error styling when set. - `leadingIcon` (string): Icon name rendered inside the input on the left. #### [TextArea](https://cleenui.com/components/forms/textarea) Multi-line text input with auto-resize, character count, and the same validation surface as Input. TextArea handles any free-form multi-line text capture. Auto-resize grows the field as the user types up to a configurable maximum, then scrolls — so short inputs stay compact and long inputs stay readable. A character-count indicator can be enabled to show progress against `maxLength`, with red-zone styling as the user approaches the limit. Validation, sizing, and error-state handling match the Input component so multi-line fields fit naturally into existing forms. Use cases: - 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: - `rows` (number): Initial visible row count. - `autoResize` (boolean): Grow with content up to maxRows. - `maxLength` (number): Character cap; enables the counter when set. - `showCount` (boolean): Display the character-count indicator. - `error` (string): Error message; flips into error styling when set. #### [Select](https://cleenui.com/components/forms/select) Dropdown selection with searchable filter, multi-select, custom rendering, and async option loading. Select is the dropdown primitive. By default it renders a simple list of options, but it scales to handle hundreds of items with built-in search filtering, virtualized scrolling, and async loading from any API endpoint. Multi-select mode lets users pick multiple values with a tag-chip preview in the trigger. Custom option rendering supports icons, descriptions, badges, and any JSX inside each item — useful for user pickers, status selectors, and category choosers. Use cases: - 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: - `options` (Option[]): Array of {value, label, icon, description}. - `multi` (boolean): Enable multi-select with chip preview. - `searchable` (boolean): Show a filter input inside the dropdown. - `loadOptions` ((query: string) => Promise): Async option loader. - `renderOption` ((option) => ReactNode): Custom per-option renderer. #### [Checkbox](https://cleenui.com/components/forms/checkbox) Single boolean checkbox with label, indeterminate state, and form integration. Checkbox is the atomic on/off control. It supports a third indeterminate state (the dash glyph) for parent checkboxes whose children are mixed — useful in tree-like selection UIs and bulk-action tables. The label slot accepts any JSX, so you can compose explanations, links, or icons alongside the control. Keyboard focus, space-to-toggle, and ARIA semantics are wired correctly. Use cases: - 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: - `checked` (boolean): Controlled checked state. - `indeterminate` (boolean): Render the indeterminate (dash) glyph. - `label` (ReactNode): Label content; can include JSX. - `onChange` ((checked: boolean) => void): Change handler. - `disabled` (boolean): Disable interaction. #### [CheckboxGroup](https://cleenui.com/components/forms/checkbox-group) Coordinated group of related checkboxes with select-all, controlled state, and validation. CheckboxGroup wraps a set of related Checkbox instances, exposing the selected values as an array. It handles layout (vertical, horizontal, grid), a built-in select-all toggle with indeterminate parent state, and per-group validation messages. When wired to a form library, the group submits as an array of values rather than individual booleans, matching how multi-select data usually wants to be stored. Use cases: - 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: - `options` (Option[]): Array of {value, label, description}. - `value` (string[]): Array of selected values (controlled). - `onChange` ((values: string[]) => void): Change handler. - `layout` ("vertical" | "horizontal" | "grid"): Item arrangement. - `selectAll` (boolean): Render a select-all toggle. #### [Switch](https://cleenui.com/components/forms/switch) On/off toggle with label, sizing, and the same controlled-form integration as Checkbox. Switch is functionally identical to Checkbox but visually communicates an immediate state change rather than a deferred form submission. Use Switch for settings that apply instantly (notifications on/off, feature flags); use Checkbox for selections that apply on submit. The animated thumb has reduced-motion variants and respects user OS preferences. Loading state (small spinner inside the thumb) shows when the toggle is awaiting server confirmation. Use cases: - Settings toggles that apply immediately. - Feature flag UIs in admin panels. - Notification preference rows. - Show/hide toggles in dashboard layouts. Props: - `checked` (boolean): Controlled checked state. - `loading` (boolean): Show in-thumb spinner while awaiting confirmation. - `size` ("sm" | "md" | "lg"): Visual size variant. - `label` (ReactNode): Label content beside the switch. - `onChange` ((checked: boolean) => void): Change handler. #### [RadioButtonGroup](https://cleenui.com/components/forms/radio-button-group) Mutually-exclusive radio group rendered as a connected button bar. RadioButtonGroup presents a small set of mutually-exclusive options as a connected segmented control. Visually compact and immediate — best suited for 2–6 short labels. The selected segment shows a brand-tinted background. Keyboard arrow keys move selection; space and enter commit. For lists longer than 6 items, prefer RadioBoxGroup or Select instead. Use cases: - View-mode switchers (list / grid / cards). - Date range presets (Day / Week / Month / Quarter). - Sort-order pickers. - Compact priority or status selectors. Props: - `options` (Option[]): Array of {value, label, icon}. - `value` (string): Selected value (controlled). - `onChange` ((value: string) => void): Change handler. - `size` ("sm" | "md" | "lg"): Visual size variant. - `fullWidth` (boolean): Stretch the group to fill the container. #### [RadioBoxGroup](https://cleenui.com/components/forms/radio-box-group) Mutually-exclusive radio group rendered as card-style options with descriptions. RadioBoxGroup presents radio options as full-width cards, each with a title, description, and optional icon or visual. The selected card gets a brand-colored border and check indicator. This is the right pattern when each option needs more than a label to make sense — pricing tiers, plan comparisons, deployment options, payment methods. The cards stack vertically by default but can lay out in a grid for shorter descriptions. Use cases: - Pricing tier selection. - Deployment or hosting option picker. - Payment method selection (card / bank / crypto). - Onboarding choice screens with explanatory copy. Props: - `options` (Option[]): Array of {value, label, description, icon}. - `value` (string): Selected value (controlled). - `onChange` ((value: string) => void): Change handler. - `layout` ("stack" | "grid"): Card arrangement. - `columns` (number): Number of columns in grid layout. #### [DatePicker](https://cleenui.com/components/forms/date-picker) Calendar-based date selection with min/max constraints, ranges, and time-of-day extensions. DatePicker is the calendar primitive. Single-date and date-range modes share the same trigger and popover. Time-of-day mode adds hour and minute fields to capture full datetimes. Min and max constraints prevent invalid selections; preset ranges (Last 7 days, This month, Last quarter) appear as a sidebar shortcut for analytics use cases. Timezone-aware mode parses and emits ISO 8601 strings in the user's configured timezone. Use cases: - 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: - `mode` ("single" | "range" | "datetime"): Selection mode. - `min` (Date | string): Earliest selectable date. - `max` (Date | string): Latest selectable date. - `presets` (Preset[]): Sidebar shortcuts like "Last 7 days". - `timezone` (string): IANA timezone identifier. #### [CreditCardInput](https://cleenui.com/components/forms/credit-card-input) Card-number input with brand detection, formatting, and CVC plus expiry sub-fields. CreditCardInput is the composite card-entry control: card number, expiry, and CVC fields wired together with the brand-logo flip animation, formatting (e.g. 4–4–4–4 grouping for Visa, 4–6–5 for Amex), and Luhn-check validation. The component is purely client-side — it never holds card data beyond the React state — so PCI scope stays narrow. Pair with a tokenization callback to hand the captured value directly to your payment processor. Use cases: - Subscription signup flows. - Saved-payment-method management. - One-time checkout for paid services. - Updating an existing card on file. Props: - `value` ({number, expiry, cvc}): Controlled value. - `onChange` ((value) => void): Change handler with formatted parts. - `onValid` ((brand: string) => void): Fires when Luhn check passes. - `acceptedBrands` (string[]): Allow-list of card brands. - `showBrand` (boolean): Display the detected brand logo. #### [RangeSlider](https://cleenui.com/components/forms/range-slider) Two-handle slider for min/max range selection with custom step intervals. RangeSlider lets the user select both ends of a numeric range — minimum and maximum — with two independent draggable handles. The track between handles fills with the brand color to communicate the selected range visually. Use it where the user cares about both endpoints, not just one value. Step size, min/max bounds, and tick marks are all configurable. Keyboard support lets each handle move independently with arrow keys. Use cases: - 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: - `value` ([number, number]): Current [min, max] (controlled). - `min` (number): Lower bound of the range. - `max` (number): Upper bound of the range. - `step` (number): Step increment for each handle. - `marks` (Mark[]): Labeled tick marks along the track. #### [Slider](https://cleenui.com/components/forms/slider) Single-handle numeric slider with marks, step intervals, and live value display. Slider is the single-value variant of RangeSlider. Drag the handle, click on the track to jump, or use arrow keys for fine adjustments. A live value bubble shows the current number above the handle during interaction. Discrete mode with tick marks is useful for choosing from a fixed set (e.g. quality presets); continuous mode is the default for arbitrary numeric input. Use cases: - Volume, brightness, or opacity controls. - Quality preset pickers in settings. - Quantity selection in checkout flows. - Weighting controls in configuration UIs. Props: - `value` (number): Current value (controlled). - `min` (number): Lower bound. - `max` (number): Upper bound. - `step` (number): Step increment. - `showValue` (boolean): Render the live value bubble. #### [Lookup](https://cleenui.com/components/forms/lookup) Async-search autocomplete that hits any API endpoint and returns selectable results with custom rendering. Lookup is the open-ended search-and-select control. The user types, the component hits an API endpoint you configure, and matching results appear as a list of selectable items below the input. The component handles request debouncing, response caching, in-flight cancellation, and empty/loading/error states. Result rendering is fully customizable so you can show avatars, descriptions, badges, or any custom markup per result. Use cases: - 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: - `search` ((query: string) => Promise): Async result fetcher. - `renderResult` ((result) => ReactNode): Custom per-result renderer. - `onSelect` ((result) => void): Fires when a result is chosen. - `debounceMs` (number): Wait time before triggering search. - `allowCreate` (boolean): Allow free-text values not in results. ### [AI](https://cleenui.com/components/ai) — 3 components Pro-tier category. Requires a CleenUI license. #### [AIInput](https://cleenui.com/components/ai/ai-input) AI-augmented single-line input that suggests, autocompletes, or rewrites as the user types. AIInput looks and behaves like a standard Input until the user pauses typing — then ghost-text suggestions appear inline, completable with Tab. The model behind the suggestions is configurable per-component, as is the prompt template and context binding. Use it for short fields where AI assistance feels like a quality-of-life win rather than a distraction: title fields, search queries, command bars. The suggestion engine respects the user's typing speed and a debounce window to avoid hammering the model on every keystroke. Use cases: - 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: - `model` (string): LLM identifier (e.g. "claude-sonnet-4"). - `prompt` (string): Prompt template; supports {context} interpolation. - `context` (object): Variables interpolated into the prompt. - `debounceMs` (number): Delay before requesting a suggestion. - `onAccept` ((suggestion: string) => void): Fires when the user accepts a suggestion. #### [AITextArea](https://cleenui.com/components/ai/ai-textarea) Multi-line input with inline generate, refine, rewrite, and summarize actions powered by your LLM. AITextArea adds a small action bar above the textarea: Generate, Refine, Rewrite, Summarize. Each action runs a configurable prompt against the LLM, streaming the response back into the field with a typewriter animation. Users can accept, reject, or further-refine the output before committing. Custom actions can be added beyond the four defaults — define a prompt template and a label, and the action shows up in the action bar. Use cases: - 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: - `model` (string): LLM identifier. - `actions` (Action[]): Action definitions {label, prompt, icon}. - `stream` (boolean): Stream the response token-by-token. - `context` (object): Variables for prompt interpolation. - `onCommit` ((text: string) => void): Fires when the user accepts the output. #### [AIWidget](https://cleenui.com/components/ai/ai-widget) A full-frame AI interaction surface — chat, generate, transform — embeddable inside any page. AIWidget is the maximalist AI surface: a chat-style frame with message history, action chips, attached context, and streaming responses. Drop it into a page, a drawer, or a modal, and users get a context-aware AI assistant scoped to whatever they're currently doing. The widget binds to the current page or entity automatically, so questions like "summarize this" or "what changed?" resolve against the right context. Conversation history persists per user. Use cases: - 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: - `model` (string): LLM identifier. - `context` (object): Page or entity context bound to the conversation. - `actions` (Action[]): Quick-action chips above the input. - `persistHistory` (boolean): Save history per user. - `onMessage` ((message) => void): Fires on every user or assistant message. ### [DataGrid](https://cleenui.com/components/datagrid) — 3 components Pro-tier category. Requires a CleenUI license. #### [DataGrid](https://cleenui.com/components/datagrid/datagrid) Sortable, filterable, virtualized grid with custom cell renderers and full-stack pagination. DataGrid is the headline component of the Pro tier. Configure columns, point at a data source, and you get sortable headers, resizable columns, virtualized rendering, pagination, row selection, and custom cell renderers — all wired to the underlying API and stored-procedure layer. Column pinning, row grouping, expandable row detail, and bulk-action toolbars are built in. Three size variants (compact, normal, comfortable) let the same grid serve dashboards, admin tables, and dense data exploration use cases. Use cases: - 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: - `columns` (Column[]): Column definitions {key, label, render, sortable, width}. - `data` (Row[]): Row data (or async loader). - `loadPage` ((page, sort, filters) => Promise): Async page loader for server-side pagination. - `density` ("compact" | "normal" | "comfortable"): Row height density. - `selectable` (boolean | "single" | "multi"): Row selection mode. #### [DataGridWithFilters](https://cleenui.com/components/datagrid/datagrid-with-filters) Pre-wired DataGrid plus FilterDrawer plus URL-shareable filter state. DataGridWithFilters bundles DataGrid and FilterDrawer into one component. Filter state is serialized to the URL automatically, so users can share a filtered view by copying the link. Filter combinations can be pinned per user, saved with a name, and shared across team members — a workflow most teams end up re-implementing badly. This component ships it as one prop. Use cases: - 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: - `columns` (Column[]): Column definitions. - `filters` (FilterDef[]): Filter definitions {field, operator, type}. - `loadPage` ((page, sort, filters) => Promise): Async page loader. - `syncWithUrl` (boolean): Serialize filter state to query params. - `savedFilters` (SavedFilter[]): Pinned/shared filter sets. #### [FilterDrawer](https://cleenui.com/components/datagrid/filter-drawer) Dynamic filter builder UI with save, pin, and share. FilterDrawer is the filter-construction surface. Users add filter rules, pick operators, enter values, and combine them with AND/OR logic. The result is a filter object that any data-fetching layer can consume. Filter combinations can be saved with a name, pinned for quick access, and shared with teammates. This is the customer-facing power-user feature that turns a generic data view into a personalized one. Use cases: - Custom filter construction in admin grids. - Saved filter management UIs. - Per-user pinned filter shelves. - Team-shared filter collections. Props: - `fields` (FieldDef[]): Filterable field definitions. - `value` (FilterTree): Current filter tree (controlled). - `onChange` ((filter: FilterTree) => void): Change handler. - `saved` (SavedFilter[]): Saved/pinned filters to display. - `onSave` ((filter, name) => void): Fires when user saves a filter. ### [Project Management](https://cleenui.com/components/project-management) — 5 components Pro-tier category. Requires a CleenUI license. #### [KanbanBoard](https://cleenui.com/components/project-management/kanban-board) Multi-column drag-and-drop board with WIP limits, custom card rendering, and live backend persistence. KanbanBoard is the standard work-tracking board: columns represent status, cards represent tasks, drag-and-drop moves work between states. The component handles touch and pointer drag inputs uniformly, fires events for every drag, drop, and reorder, and persists state via a single async handler. WIP (work-in-progress) limits per column enforce flow constraints visually — columns over their limit get a red-border treatment. Cards accept any custom render function so you can show priority badges, assignees, due dates, or whatever your domain needs. Use cases: - 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: - `columns` (Column[]): Column definitions {key, label, limit}. - `cards` (Card[]): Cards keyed by column. - `onMove` ((card, from, to, index) => Promise): Async persistence on drop. - `renderCard` ((card) => ReactNode): Custom card renderer. - `limits` (Record): WIP limits per column key. #### [KanbanList](https://cleenui.com/components/project-management/kanban-list) Vertical list-mode variant of the Kanban primitive for narrow viewports or single-column workflows. KanbanList trades the multi-column board layout for a vertical stack — same drag-and-drop, same persistence model, same card renderer. Use it on narrow screens (mobile, side panels) or for single-status workflows like personal task lists or daily standup queues. Sections within the list can collapse and group tasks by category, priority, or any custom dimension. Use cases: - 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: - `items` (Item[]): Ordered list of items. - `groupBy` (string): Field to group items by (renders section headers). - `onReorder` ((items) => Promise): Persistence on reorder. - `renderItem` ((item) => ReactNode): Custom item renderer. - `collapsibleGroups` (boolean): Allow user to collapse group sections. #### [TaskRoadmap](https://cleenui.com/components/project-management/task-roadmap) Timeline-based task visualization with phases, dependencies, and zoom from day to quarter. TaskRoadmap presents tasks as horizontal bars on a timeline. Phases group related work; dependencies render as connecting arrows. Zoom levels span from day-by-day all the way to quarter-by-quarter so the same data serves both sprint planning and roadmap reviews. Drag a bar to reschedule, drag its edge to resize, drag from one bar to another to create a dependency. Critical-path calculation highlights the longest chain of dependent work automatically. Use cases: - Quarterly roadmap planning across teams. - Sprint-level Gantt for individual project tracking. - Customer implementation timelines with dependencies. - Marketing campaign and content calendars. Props: - `phases` (Phase[]): Phase groupings. - `tasks` (Task[]): Task records with start, end, dependencies. - `zoom` ("day" | "week" | "month" | "quarter"): Initial zoom level. - `onReschedule` ((task, newRange) => void): Fires on drag. - `showCriticalPath` (boolean): Highlight the critical path. #### [Wizard](https://cleenui.com/components/project-management/wizard) Multi-step flow with validated transitions, progress persistence, and branching paths. Wizard is the multi-step form primitive. Each step renders its own content; transitions can be gated on validation; users can save progress and return later. Branching logic lets the user's step-N answer determine which step-N+1 they see. Progress is automatically persisted to the backend so a user can close their browser and resume hours or days later. Step state can also be derived from URL so each step is independently linkable. Use cases: - 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: - `steps` (Step[]): Step definitions {key, label, render, validate}. - `currentStep` (string): Currently active step key (controlled). - `onStepChange` ((step) => void): Fires when step changes. - `persistKey` (string): Backend persistence key for saved progress. - `branches` (Branch[]): Conditional step-routing rules. #### [Assessment](https://cleenui.com/components/project-management/assessment) Wizard-driven evaluation engine — sections, questions, scoring, and result valuations through data. Assessment is a higher-level workflow primitive built on top of Wizard. Configure sections, questions, response types, and scoring rules through data alone — no per-assessment code needed. Responses are persisted as a typed object, scores are computed against configured rules, and result valuations (low/medium/high, specific recommendation) are returned for display. Used for everything from product onboarding quizzes to compliance audits to internal skill assessments. Use cases: - 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: - `config` (AssessmentConfig): Sections, questions, and scoring rules. - `responseSet` (ResponseSet): Existing responses (for editing or resuming). - `onComplete` ((result) => void): Fires when assessment is submitted. - `onSave` ((partial) => void): Fires on partial save. - `showScore` (boolean): Reveal the computed score after completion. ### [Media](https://cleenui.com/components/media) — 4 components #### [CardMedia](https://cleenui.com/components/media/card-media) Card variant with built-in image or video media slot — aspect-ratio control, hover overlays, play-on-hover. CardMedia extends the base Card with a media slot at the top. Supports static images, autoplaying or hover-triggered video, and overlay content positioned on top of the media. Aspect ratio is locked to prevent layout shift on load; lazy loading is on by default; reduced-motion users get a static-poster fallback for video. Useful anywhere a card needs visual emphasis. Use cases: - 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: - `media` ({ type: "image" | "video", src: string }): Media source. - `aspectRatio` (string): CSS aspect ratio (e.g. "16/9"). - `playOnHover` (boolean): Start video on hover. - `overlay` (ReactNode): Content rendered on top of the media. - `lazy` (boolean): Lazy-load the media asset. #### [Carousel](https://cleenui.com/components/media/carousel) Touch- and keyboard-friendly horizontal slider with autoplay, pagination dots, and custom slides. Carousel rotates through a set of slides. Supports touch swipe on mobile, mouse drag on desktop, and arrow-key navigation when focused. Autoplay can run with a configurable interval, pausing on hover or focus. Slides can contain any JSX — images, cards, testimonials, hero panels. Pagination dots and prev/next arrows are themable; transition styles include slide, fade, and cross-dissolve. Use cases: - Homepage hero rotators. - Testimonial sliders. - Image galleries with multi-image previews. - Feature showcase rotators. Props: - `slides` (ReactNode[]): Array of slide content. - `autoplay` (boolean): Auto-advance through slides. - `intervalMs` (number): Autoplay interval. - `transition` ("slide" | "fade"): Transition style. - `showDots` (boolean): Display pagination dots. #### [AvatarRow](https://cleenui.com/components/media/avatar-row) Stacked group of avatars with overlap, "+N more" overflow, and per-avatar tooltips. AvatarRow shows a group of users as overlapping avatar circles. Cap the visible count to keep the row compact — any extras collapse into a "+N" indicator that opens a popover listing the remaining users. Each avatar can show a tooltip on hover with the user's name, role, or any custom content. Use it anywhere multiple users are associated with a single entity: a task's collaborators, a document's editors, a meeting's attendees. Use cases: - 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: - `users` (User[]): Users to render. - `max` (number): Max visible avatars before overflow. - `size` ("sm" | "md" | "lg"): Avatar size. - `overlap` (number): Pixel overlap between avatars. - `tooltipContent` ((user) => ReactNode): Custom tooltip renderer. #### [Avatar](https://cleenui.com/components/media/avatar) Single user avatar with image, initials fallback, status indicator, and sizing. Avatar renders a user's identity. Pass a URL and you get an image avatar; if the image fails to load (or no URL is provided), the component falls back to colored initials computed from the user's name. An optional status dot in the bottom-right corner shows presence (online, away, busy, offline). The component is fully accessible — name is exposed as the avatar's accessible label. Use cases: - User identity in headers and navigation. - Author bylines on posts and articles. - Assignee chips on tasks. - Profile previews in user-pickers. Props: - `src` (string): Image URL. - `name` (string): User name (for initials fallback and a11y label). - `size` ("xs" | "sm" | "md" | "lg" | "xl"): Avatar size. - `status` ("online" | "away" | "busy" | "offline"): Presence indicator. - `shape` ("circle" | "square"): Avatar shape. ### [Overlays](https://cleenui.com/components/overlays) — 5 components #### [Modal](https://cleenui.com/components/overlays/modal) Centered modal with backdrop, focus trap, ESC-to-close, and stacked-modal support. Modal is the centered-dialog primitive. Three size variants (small, medium, large) and a full-screen mode cover the common dialog patterns. Header, body, and footer slots structure the content consistently. Focus is trapped inside the modal while open; on close, focus returns to the element that triggered the modal. Stacked modals (a modal opening another modal) work correctly — z-index and dismissal stack predictably. Use cases: - 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: - `open` (boolean): Controlled open state. - `onClose` (() => void): Fires on backdrop click, ESC, or close button. - `size` ("sm" | "md" | "lg" | "full"): Modal size. - `closeOnBackdrop` (boolean): Allow backdrop click to close. - `title` (string): Header title. #### [Drawer](https://cleenui.com/components/overlays/drawer) Custom slide-out panel — configurable from any edge, with size variants and complex contextual workflows. Drawer slides in from an edge of the screen (top, right, bottom, or left) to show contextual content without leaving the current page. Where Modal interrupts the workflow, Drawer extends it. The component handles nested drawers (a drawer opening another drawer) with a back-button at the top, configurable widths/heights, and resizable edges for desktop power users. The DataGrid FilterDrawer is built on this primitive. Use cases: - 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: - `open` (boolean): Controlled open state. - `edge` ("top" | "right" | "bottom" | "left"): Slide-in edge. - `size` ("sm" | "md" | "lg" | string): Width or height; supports CSS units. - `resizable` (boolean): Allow user to resize the drawer. - `onClose` (() => void): Fires on dismissal. #### [Popover](https://cleenui.com/components/overlays/popover) Floating contextual panel anchored to a trigger with collision-aware positioning and keyboard dismissal. Popover is the generic anchored-content primitive. Click a trigger, a panel appears positioned relative to it; click outside or press ESC to dismiss. Positioning is collision-aware — if the panel would extend off the viewport, the placement automatically flips (right → left, bottom → top). Arrow indicators show the connection to the trigger. The Menu and Tooltip components use Popover under the hood. Use cases: - 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: - `trigger` (ReactNode): Element that opens the popover. - `content` (ReactNode): Popover body content. - `placement` (Placement): Preferred position (e.g. "bottom-start"). - `showArrow` (boolean): Render the connection arrow. - `onOpenChange` ((open: boolean) => void): Fires on open/close. #### [Tooltip](https://cleenui.com/components/overlays/tooltip) Hover-triggered text label with configurable delay, position, and arrow direction. Keyboard accessible. Tooltip is the lightweight hover-label primitive. Wrap any element, supply a string or short JSX label, and a small floating panel appears on hover or keyboard focus. Configurable open and close delays prevent flickering as users move the pointer through dense UIs. The component respects reduced-motion preferences and is accessible by keyboard via focus events. For longer content or interactive elements, use Popover instead. Use cases: - Icon button labels ("Edit", "Delete", "Settings"). - Truncated text expansion on long labels. - Help text on form-field labels. - Status indicator explanations. Props: - `content` (ReactNode): Tooltip content. - `placement` (Placement): Preferred position. - `openDelayMs` (number): Delay before appearing. - `closeDelayMs` (number): Delay before hiding. - `disabled` (boolean): Suppress the tooltip without removing it from the DOM. #### [ReviewModal](https://cleenui.com/components/overlays/review-modal) Pre-built review/approval modal with comment threading, status transitions, and audit trail. ReviewModal is the higher-level approval surface. Drop it onto any entity that needs reviewer sign-off: pending edits, content moderation, change requests, hiring decisions. The modal shows the item under review, a comment thread, status-transition actions, and an audit log of who did what when. Statuses, transitions, and required-approver counts are all configurable. Approvers see action buttons; non-approvers see the read-only history. Use cases: - Content moderation review queues. - Pending-edit approval workflows. - Document and proposal sign-off. - Hiring or candidate review tracks. Props: - `entity` (object): Item under review. - `statuses` (Status[]): Allowed statuses. - `transitions` (Transition[]): Allowed status transitions. - `requiredApprovers` (number): Approvers required to commit. - `onTransition` ((from, to, comment) => Promise): Async transition handler. ### [Data Display](https://cleenui.com/components/data-display) — 5 components #### [Card](https://cleenui.com/components/data-display/card) The base card primitive — padding, border, shadow, and a slot for any content. Card is the foundational content container. Three size variants and an optional hover-lift effect handle most common card-style layouts. Header and footer slots structure content into a predictable visual rhythm. Use Card directly when none of the specialized variants (CardIcon, CardMedia, EditableCard) fit. The other card variants extend this base with additional slots and behavior. Use cases: - Generic content containers in dashboards. - List item wrappers with consistent padding. - Settings and preferences panels. - Empty-state messages with action buttons. Props: - `padding` ("sm" | "md" | "lg" | string): Internal padding. - `hoverable` (boolean): Add lift-on-hover effect. - `header` (ReactNode): Header slot content. - `footer` (ReactNode): Footer slot content. - `as` (ElementType): Render-as element (e.g. "a" for clickable cards). #### [CardIcon](https://cleenui.com/components/data-display/card-icon) Card variant with a leading icon block — feature lists, capability grids, module overviews. CardIcon places an icon block at the top of the card, paired with a title and short description. The icon block can be a solid brand color, a tinted background, or a custom-styled wrapper. Useful anywhere a feature, capability, or module needs a visual identity. The Codebase page's category grid uses this pattern. Use cases: - Feature grids on marketing pages. - Module or capability lists in product overviews. - Category navigation cards on category pages. - Quick-action grids in dashboards. Props: - `icon` (string): Icon name to render. - `title` (string): Card title. - `description` (string): Body text. - `iconColor` (string): Color token for the icon background. - `as` (ElementType): Render-as element. #### [EditableCard](https://cleenui.com/components/data-display/editable-card) In-place-editable card — click to edit, blur or commit to save. EditableCard renders content in display mode by default. Click on it (or the explicit edit-button slot) and the same area becomes editable. Blur or hit the commit button to save; ESC reverts to display mode. The component tracks dirty state and exposes events for save, cancel, and discard. Form-field validation runs on save attempts to prevent invalid commits. Use cases: - Inline-editable settings and preferences. - Editable cell groups in detail views. - Quick-edit blocks in admin tooling. - Bio and profile field editing. Props: - `value` (any): Current value (controlled). - `renderDisplay` ((value) => ReactNode): Display-mode renderer. - `renderEdit` ((value, onChange) => ReactNode): Edit-mode renderer. - `onSave` ((value) => Promise): Async save handler. - `validate` ((value) => string | undefined): Validation function returning an error message. #### [InfoLabels](https://cleenui.com/components/data-display/info-labels) Compact key-value display for metadata rows in detail views and side panels. InfoLabels renders a list of label/value pairs. Useful anywhere static metadata needs to display cleanly — record details, status panels, account info, profile summaries. Variants include inline (label and value on one line), stacked (label above value), and table (definition-list style). Values can be plain text, links, badges, or any JSX. Use cases: - Detail panels on a record screen. - Account and subscription info displays. - Profile metadata blocks. - Status summaries on dashboard cards. Props: - `items` ({ label: string, value: ReactNode }[]): Label/value pairs. - `layout` ("inline" | "stacked" | "table"): Visual layout. - `labelWidth` (string): Label column width (inline/table modes). - `size` ("sm" | "md"): Typography size variant. - `divider` (boolean): Render dividers between items. #### [PillBadge](https://cleenui.com/components/data-display/pill-badge) Small pill-shaped badge with semantic variants and optional icon. PillBadge is the small status indicator: pill-shaped, semantic-colored, optional leading icon. Use it for short status labels, counts, and category tags. Five semantic variants (info, success, warning, error, neutral) plus a brand variant cover the typical needs. Sizes range from tiny inline-with-text to standalone medium. Use cases: - Status indicators on records (Active, Pending, Failed). - Category or tag chips. - Notification count indicators on icons. - Plan or tier badges (Free, Pro, Enterprise). Props: - `variant` ("info" | "success" | "warning" | "error" | "neutral" | "brand"): Semantic color. - `size` ("xs" | "sm" | "md"): Pill size. - `icon` (string): Optional leading icon name. - `children` (ReactNode): Pill content. - `outline` (boolean): Outline-style variant. ### [Feedback](https://cleenui.com/components/feedback) — 7 components #### [Loader](https://cleenui.com/components/feedback/loader) Inline spinner with size variants for short async loads where a skeleton would be overkill. Loader is the small-scale spinner: a brand-tinted rotating indicator with three size variants. Use it for short pauses (a few hundred milliseconds to a second or two) where a full skeleton would feel heavier than the wait deserves. The component respects reduced-motion preferences — users with that setting see a pulsing dot instead of rotation. Centered-in-container and inline-with-text positioning are both supported. Use cases: - Button-internal loaders during submit. - Inline loading states inside menu items or chips. - Quick API call feedback in popovers. - Lazy-loaded section placeholders. Props: - `size` ("sm" | "md" | "lg"): Spinner size. - `color` (string): Override color (defaults to currentColor). - `label` (string): Accessible label. - `centered` (boolean): Center within parent. - `thickness` (number): Stroke thickness. #### [ProgressBar](https://cleenui.com/components/feedback/progress-bar) Linear progress indicator with percent, indeterminate mode, and label. ProgressBar is the standard linear progress indicator. Pass a value from 0 to 100 to render determinate progress; omit the value for an indeterminate striped animation. Label and percentage display can be enabled in any combination. Use it for file uploads, multi-step processes, and any user-facing long-running work. Use cases: - File upload and download progress. - Form completion percentage in long flows. - Multi-step process indicators. - Storage or quota meters. Props: - `value` (number): Progress 0–100. - `indeterminate` (boolean): Striped animation when progress is unknown. - `label` (string): Label above the bar. - `showValue` (boolean): Render percentage value. - `color` (string): Color variant or token. #### [ProgressCircle](https://cleenui.com/components/feedback/progress-circle) Radial progress indicator — the same modes as ProgressBar, sized for compact contexts. ProgressCircle is the round variant of ProgressBar. Useful where horizontal space is constrained or a circular shape fits the surrounding design better — dashboards, header indicators, sidebar badges. The percentage value (or a custom label) can render in the center of the ring. Same determinate and indeterminate modes as the linear version. Use cases: - Compact loading indicators in headers. - Storage gauges in account dashboards. - Inline progress in tight table cells. - Score or rating gauges. Props: - `value` (number): Progress 0–100. - `indeterminate` (boolean): Spinning animation when progress is unknown. - `size` (number): Diameter in pixels. - `thickness` (number): Ring stroke width. - `label` (ReactNode): Center label (defaults to percent). #### [AdvancedProgressBar](https://cleenui.com/components/feedback/advanced-progress-bar) Stepped progress bar with named milestones, completion timestamps, and per-step error states. AdvancedProgressBar is the multi-stage variant. Pass an array of milestones, each with a label and status (pending, in-progress, complete, error), and the bar renders a connected sequence of dots with the bar fill reflecting overall progress. Click a milestone to see its timestamp and any error details. Use it for long-running operations with distinct phases — deployments, batch imports, integration sync runs. Use cases: - 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: - `milestones` (Milestone[]): Ordered milestones {label, status, timestamp, error}. - `currentIndex` (number): Index of the active milestone. - `showTimestamps` (boolean): Display per-step timestamps. - `onMilestoneClick` ((milestone) => void): Click handler. - `vertical` (boolean): Render vertically instead of horizontally. #### [Notification](https://cleenui.com/components/feedback/notification) Toast-style transient notification with semantic variants, dismiss, action button, and queueing. Notification is the toast primitive — small floating message boxes that appear briefly to communicate the result of an action. Five semantic variants (info, success, warning, error, neutral), an optional action button, and a configurable timeout. The notification system queues messages when many fire in rapid succession so users see them sequentially rather than as a stack. Notifications can be pinned to stay open until manually dismissed. Use cases: - Save-confirmation toasts after form submission. - Error notifications when an API call fails. - Background-task completion alerts. - Action confirmations with undo buttons. Props: - `variant` ("info" | "success" | "warning" | "error" | "neutral"): Semantic variant. - `title` (string): Notification title. - `body` (ReactNode): Notification body content. - `action` ({ label, onClick }): Optional action button. - `timeoutMs` (number): Auto-dismiss timeout (0 to disable). #### [Skeleton](https://cleenui.com/components/feedback/skeleton) Placeholder shimmer for loading states — 23 variants matching the primary content components. Skeleton renders a shimmering placeholder shape that matches the layout of the content that will replace it. Use skeletons in place of Loader when the wait is long enough that users would otherwise wonder if anything is happening. The 23 variants correspond to common content shapes: card, list-row, avatar, paragraph, chart, image — each pre-styled to match its real counterpart so the visual transition into loaded content is smooth. Use cases: - Initial page load placeholders. - Card grid loading states. - DataGrid row-skeleton displays. - Profile and header loading shimmers. Props: - `variant` (string): Skeleton shape (e.g. "card", "list-row", "avatar"). - `width` (string | number): Override width. - `height` (string | number): Override height. - `count` (number): Repeat the skeleton N times. - `animated` (boolean): Enable shimmer animation. #### [StarRating](https://cleenui.com/components/feedback/star-rating) Read-only or interactive star-rating control with half-star support and accessible keyboard input. StarRating displays a value as a row of filled and unfilled stars. Read-only mode is for displaying existing ratings; interactive mode lets the user click or use arrow keys to set the value. Half-star precision is supported via configurable step. The component handles all the awkward visual details around half-star rendering correctly, including RTL layouts and varying star counts. Use cases: - Customer review displays on product pages. - Internal NPS or satisfaction surveys. - Quality-rating capture in feedback forms. - Recommendation strength indicators. Props: - `value` (number): Current rating (0–max, step-aligned). - `max` (number): Number of stars. - `step` (number): Precision (e.g. 0.5 for half-stars). - `readonly` (boolean): Display-only mode. - `onChange` ((value: number) => void): Fires on user input. ### [Navigation](https://cleenui.com/components/navigation) — 5 components #### [Sidebar](https://cleenui.com/components/navigation/sidebar) Collapsible side navigation with nested sections, active-state tracking, and overflow scroll. Sidebar is the primary nav-rail primitive. Configure section groups, items within each section, and the component handles collapsed/expanded states, nested-item indentation, and active-route highlighting via React Router. The rail can collapse to icons-only on demand or via a media query for narrow screens. Section headings stick to the top of the visible area when scrolled past. Use cases: - Admin application primary navigation. - Documentation site sidebars with nested chapters. - Settings panel navigation. - Dashboard module switchers. Props: - `sections` (Section[]): Section groups with items inside each. - `collapsed` (boolean): Render in collapsed (icons-only) mode. - `onCollapseChange` ((collapsed: boolean) => void): Fires on collapse toggle. - `activeRoute` (string): Currently active route for highlighting. - `footer` (ReactNode): Optional footer content. #### [Tabs](https://cleenui.com/components/navigation/tabs) Horizontal tab control with controlled or uncontrolled state, keyboard navigation, and per-tab badges. Tabs organizes content into multiple panels with a single visible at a time. The tab strip handles overflow with optional horizontal scroll or compaction into a more-menu. Per-tab badges (counts, status indicators) display alongside the label. Each tab can optionally lazy-render its panel content to defer expensive renders until the tab is active. Use cases: - Multi-aspect detail views (Overview / Activity / Settings). - Settings page section switchers. - Dashboard tab-style filters. - Documentation panel switchers within an article. Props: - `tabs` (Tab[]): Tab definitions {key, label, badge, render}. - `activeKey` (string): Currently active tab (controlled). - `onTabChange` ((key) => void): Fires on tab change. - `lazy` (boolean): Defer tab content rendering until activated. - `overflow` ("scroll" | "menu"): Overflow handling. #### [Breadcrumb](https://cleenui.com/components/navigation/breadcrumb) Path indicator with item separators, dropdown overflow for long paths, and home/back links. Breadcrumb shows the user where they are in a hierarchy and lets them jump back up to any ancestor. The component handles long paths gracefully — items in the middle collapse into a more-menu when space is tight. Custom separators (chevron, slash, dot) and per-item icons let the visual style match the rest of the design system. The component derives state from React Router by default, but can be controlled directly for non-route hierarchies. Use cases: - 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: - `items` ({ label, href, icon }[]): Ordered breadcrumb items. - `separator` (ReactNode): Separator between items (default: chevron). - `maxVisible` (number): Maximum visible items before overflow menu. - `showHome` (boolean): Prepend a home icon link. - `size` ("sm" | "md"): Typography size. #### [Menu](https://cleenui.com/components/navigation/menu) Generic menu primitive used by Sidebar, Popover, and dropdowns — keyboard-navigable, accessible. Menu is the lower-level menu primitive that powers many higher-level components. Configure menu items, sections, dividers, and keyboard shortcuts; the component handles arrow-key navigation, escape-to-close, and ARIA roles correctly. Nested submenus are supported, with consistent open-on-hover-or-click behavior. Menu items can include icons, keyboard shortcut hints, and right-side meta indicators. Use cases: - 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: - `items` (MenuItem[]): Menu items (with nested submenus). - `trigger` (ReactNode): Optional trigger when used standalone. - `onSelect` ((item) => void): Fires when an item is selected. - `size` ("sm" | "md"): Item size and spacing. - `renderItem` ((item) => ReactNode): Custom item renderer. #### [Stepper](https://cleenui.com/components/navigation/stepper) Numbered step indicator for multi-step flows — connects to Wizard or works standalone. Stepper shows a numbered or labeled sequence of steps with the current position highlighted. Pair it with Wizard for state, or use it standalone to display a sequence of phases the user has completed or has yet to complete. Horizontal and vertical orientations are supported. Each step can be clickable (to jump back) or display-only. Step-completion states (done, current, pending, error) drive the visual variant per step. Use cases: - Multi-step form headers (paired with Wizard). - Checkout flow progress indicators. - Onboarding sequence visualizations. - Approval workflow status displays. Props: - `steps` (Step[]): Step definitions {key, label, status}. - `currentIndex` (number): Currently active step index. - `orientation` ("horizontal" | "vertical"): Stepper direction. - `onStepClick` ((step) => void): Make steps clickable when set. - `size` ("sm" | "md" | "lg"): Visual size variant. ### [Layout](https://cleenui.com/components/layout) — 3 components #### [Divider](https://cleenui.com/components/layout/divider) Horizontal or vertical separator with optional centered label. Divider creates visual separation between content blocks. The simplest variant is a thin rule across the full width of its container; the more elaborate variant adds a centered label in the middle of the rule ("OR", "Recent", etc.) with the rule flanking it on either side. Vertical mode separates inline content with a small vertical rule — useful between flexible row items like nav menus and toolbar buttons. Use cases: - 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: - `orientation` ("horizontal" | "vertical"): Divider direction. - `label` (string): Centered label rendered on the divider. - `spacing` ("sm" | "md" | "lg"): Vertical margin (horizontal mode only). - `color` (string): Override line color. - `dashed` (boolean): Render as dashed line. #### [FormGroup](https://cleenui.com/components/layout/form-group) Form-section wrapper providing label, help text, error display, and consistent spacing for related inputs. FormGroup is the section-level form primitive — one level up from individual input fields. It wraps a group of related inputs with a section title, help text, and section-level error/validation messaging. Not strictly required around every input (the input components have their own label and error slots), but useful when grouping a logical cluster of fields — "Address", "Payment", "Contact preferences". Use cases: - Address forms (street, city, state, zip as one group). - Payment-information forms. - Settings panels organized by category. - Multi-section single-page forms. Props: - `label` (string): Group title. - `help` (string): Optional help text under the title. - `error` (string): Group-level error message. - `spacing` ("compact" | "normal" | "relaxed"): Vertical spacing between child inputs. - `collapsible` (boolean): Allow the group to collapse. #### [Collapsible](https://cleenui.com/components/layout/collapsible) Expand/collapse panel with smooth height animation and chevron rotation. Collapsible toggles the visibility of its children with a smooth height-animating transition. The trigger area shows a chevron that rotates as the panel opens and closes. Use Collapsible for content that's useful but not always needed — FAQs, advanced settings, optional form sections. Controlled and uncontrolled modes are both supported. Use cases: - 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: - `title` (ReactNode): Trigger content (also clickable area). - `open` (boolean): Controlled open state. - `defaultOpen` (boolean): Initial open state (uncontrolled). - `onOpenChange` ((open: boolean) => void): Open/close handler. - `duration` (number): Animation duration in ms. ### [Charts](https://cleenui.com/components/charts) — 7 components #### [Chart](https://cleenui.com/components/charts/chart) Generic chart primitive supporting bar, column, and line types with configurable axes and legends. Chart is the multi-type primitive that handles bar, column, line, and area charts. Series can be stacked or grouped; axes can be linear, log, or category-based; legends are interactive (click to hide/show series). Use Chart when you need a customizable, multi-series visualization. For simpler one-shot displays, prefer SimpleChart. Use cases: - Revenue or metric trends over time (line). - Category comparisons (bar/column). - Multi-series performance dashboards. - Cumulative or stacked area charts. Props: - `data` (Series[]): Series data with x/y points. - `type` ("bar" | "column" | "line" | "area"): Chart type. - `stacked` (boolean): Stack series instead of grouping. - `xAxis` (AxisConfig): X-axis configuration. - `yAxis` (AxisConfig): Y-axis configuration. #### [SimpleChart](https://cleenui.com/components/charts/simple-chart) Sparkline-style chart — no axes, no legend, just the trend. SimpleChart is the inline-sparkline variant. Pass an array of values and you get a tiny chart showing the trend — no axes, no legend, no chrome. Designed to fit inside table cells, KPI cards, or dashboard tiles. Line, bar, and area styles are supported. The minimal styling makes it useful when context (what's being measured, on what scale) is provided elsewhere on the screen. Use cases: - KPI cards with trend indicators. - Inline trend cells in DataGrid. - Dashboard tile mini-charts. - Compact metric summaries. Props: - `data` (number[]): Array of values. - `type` ("line" | "bar" | "area"): Sparkline style. - `color` (string): Series color token or hex. - `height` (number): Pixel height. - `showLast` (boolean): Highlight the last point. #### [BellCurve](https://cleenui.com/components/charts/bell-curve) Normal-distribution visualization with configurable mean, standard deviation, and percentile markers. BellCurve renders a normal-distribution curve with optional percentile markers. Useful for statistical reporting — assessment results plotted against a population, A/B test results, performance distributions across teams. Individual data points can be plotted on the curve to show where a specific result falls. Multiple curves can be overlaid for comparison. Use cases: - Assessment results vs. population benchmarks. - A/B test statistical visualization. - Performance distribution across teams or accounts. - Salary band and compensation analysis. Props: - `mean` (number): Distribution mean. - `stdDev` (number): Standard deviation. - `markers` (Marker[]): Highlighted points or percentiles. - `showPercentiles` (boolean): Display percentile lines (25, 50, 75). - `color` (string): Curve color. #### [RadarChart](https://cleenui.com/components/charts/radar-chart) Multi-axis comparison chart — skill profiles, feature comparisons, assessment results. RadarChart compares multiple dimensions of one or more entities at a glance. Each axis is a separate dimension; each shape is one entity; the area of the shape indicates the overall strength. Multiple entities can overlay on the same chart for direct comparison. Axes can be normalized to the same scale or use their own bounds. Use cases: - Skill or competency profiles. - Feature comparisons between products or plans. - Multi-dimensional assessment results. - Account or customer maturity profiles. Props: - `axes` (Axis[]): Axis definitions {key, label, min, max}. - `data` (Entity[]): Entities with values per axis. - `fill` (boolean): Fill the radar shape with color. - `showGrid` (boolean): Display concentric grid rings. - `maxValue` (number): Normalize all axes to this max. #### [ScatterChart](https://cleenui.com/components/charts/scatter-chart) XY plot with configurable point sizing, grouping by series, and optional regression line. ScatterChart plots two-variable correlations. Each point has an X and Y coordinate; optional Z dimension drives point size for three-variable visualizations. Multiple series can be overlaid with different colors. A regression line (linear, polynomial, or logarithmic) can be drawn through the data to make trends visible. Hover tooltips show the underlying values for any point. Use cases: - Performance correlations (e.g. time-on-page vs. conversion). - Customer segmentation visualizations. - A/B test outcome scatter plots. - Quality vs. cost tradeoff analysis. Props: - `data` (Point[]): Points with {x, y, z?, series?}. - `regression` ("linear" | "polynomial" | "logarithmic" | null): Regression line type. - `sizeBy` (string): Field to drive point size. - `colorBy` (string): Field to drive point color (for grouped series). - `showAxes` (boolean): Display axis labels and ticks. #### [SankeyChart](https://cleenui.com/components/charts/sankey-chart) Flow visualization showing volume between nodes — funnels, traffic flow, resource allocation. SankeyChart shows the flow of quantity from source nodes to destination nodes through intermediate stages. The width of each band reflects the volume of flow through that path. Useful for any process or system where you want to visualize how things split, merge, or transform across stages — conversion funnels, energy flows, budget allocation, user-journey mapping. Use cases: - 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: - `nodes` (Node[]): Node definitions {id, label, color}. - `links` (Link[]): Links {source, target, value}. - `nodeWidth` (number): Pixel width of each node block. - `nodePadding` (number): Vertical padding between nodes. - `showValues` (boolean): Display flow values on each link. #### [TreemapChart](https://cleenui.com/components/charts/treemap-chart) Hierarchical area chart where rectangle size encodes value — portfolio composition, category breakdowns. TreemapChart shows hierarchical data where each rectangle's area represents its value. Nested rectangles show sub-categories within categories. Useful for visualizing portfolio composition, file-system size distribution, market-share breakdowns. Clicking a rectangle drills into its children. Color can encode a secondary dimension (e.g. growth rate while size encodes value). Use cases: - Portfolio composition visualization. - Storage or disk-usage breakdowns. - Market share and competitive analysis. - Category-wise budget or revenue breakdowns. Props: - `data` (Node): Root node with nested children. - `valueKey` (string): Field used for rectangle sizing. - `colorKey` (string): Field used for color coding. - `onClick` ((node) => void): Drill-down handler. - `showLabels` (boolean): Render text labels in rectangles. --- ## Production modules — full catalog ### [M01 — Security](https://cleenui.com/modules/security) *Auth and RBAC foundation for enterprise multi-tenant software.* Centralized authentication, authorization, and session controls that enforce who can access what, when, and how across tenants, accounts, and admin surfaces. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `auth` Capabilities: - User login/signup/social login and token refresh - Session token workflows for public and private paths - Role and permission management - Role to user assignment - Auth-secured health and policy enforcement patterns Benefits: - Reduces privilege drift - Improves security auditability - Supports enterprise access governance Flow of work: Authenticate identity → Resolve tenant/account context → Evaluate role and permission set → Authorize endpoint action → Return data or policy error Sub-features: Login, Signup, Social login, Refresh token, Role filter, Role save, Permission add/remove, Role-user assignment, Auth-secured health check. Per-layer breakdown: - **Frontend (React)**: Login form, Signup form, Password recovery, Role manager, Permission editor. - **API (ASP.NET Core 8 Web API)**: Auth endpoints, Role CRUD, Permission CRUD, Session token, Health check. - **Database (EF Core 8 + AzureSQL)**: Users, Roles, Permissions, Sessions. - **Background services (Azure Functions / WebJobs)**: Session monitor, Token cleanup. Source signals (where the implementation lives): ApiAuth, ApiAdmin roles and permissions, ApiPublic session token, Api error code authorization handling. ### [M02 — Accounts](https://cleenui.com/modules/accounts-companies) *Tenant and account boundaries with user assignment controls.* Multi-account management for organizations, subsidiaries, or entities with strict ownership boundaries, member invitation workflows, and account-level user filtering. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `account` Capabilities: - Account profile save/update - Account detail retrieval - Account user add/remove/invite - Account user filters by role and integration - Plan save and subscription sync hooks Benefits: - Separates customer/company data scopes - Supports delegated administration - Scales enterprise onboarding Flow of work: Create or update account → Invite or add users → Assign roles and access → Manage plan/subscription state → Query account scoped data Sub-features: Account save, Account details, Account user filter, Account user add, Account user remove, Account user invite, Account plan save, Account subscription sync. Per-layer breakdown: - **Frontend (React)**: Account dashboard, Member invite, User filter, Plan selector, Subscription panel. - **API (ASP.NET Core 8 Web API)**: Account CRUD, User add/remove, User invite, Plan save, Subscription sync. - **Database (EF Core 8 + AzureSQL)**: Accounts, AccountUsers, Plans, Subscriptions. - **Background services (Azure Functions / WebJobs)**: Subscription sync job, Account provisioning. Source signals (where the implementation lives): ApiAccount, ApiUtils account proc mappings. ### [M03 — Support](https://cleenui.com/modules/support) *Knowledge base and support content operations in one place.* Full help-content lifecycle management for categories and articles, with association/disassociation patterns, public delivery endpoints, and admin/private editing workflows. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `help-content` Capabilities: - Help content category and article CRUD - Article filter/detail endpoints - Article association and disassociation - Public help content endpoints - Exposure area filtering Benefits: - Lowers support load via self-service - Keeps guidance synchronized with product changes - Supports public and private support surfaces Flow of work: Create support category → Draft article content → Associate to exposure area → Publish and expose publicly → Iterate via filter/detail analytics Sub-features: Category save, Article save, Article filter, Article detail, Article associate, Article disassociate, Public categories, Public article filter, Public article detail. Per-layer breakdown: - **Frontend (React)**: Help center, Article editor, Category nav, Search bar, Article viewer. - **API (ASP.NET Core 8 Web API)**: Article CRUD, Category CRUD, Article association, Public help. - **Database (EF Core 8 + AzureSQL)**: HelpCategories, HelpArticles, Associations, ExposureAreas. - **Background services (Azure Functions / WebJobs)**: Article indexer, Translation worker. Source signals (where the implementation lives): ApiHelpContent, ApiPublic help content endpoints. ### [M04 — Infrastructure and Logging](https://cleenui.com/modules/infrastructure-logging) *Operational observability, API activity, and cache/system diagnostics.* Admin-focused telemetry and operational controls to monitor entity activity, database cache statistics, system-level performance behavior, and vendor integration call traces. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `admin` Capabilities: - DB cache statistics endpoint - Entity activity endpoint - System performance cache clear - Vendor call-log filtering - Overall statistics and operational insights Benefits: - Faster incident triage - Improved cache and performance confidence - Higher operational transparency Flow of work: Capture API and entity activity → Aggregate cache and system metrics → Review operational anomalies → Apply cache/system remediation → Re-validate system health Sub-features: DB cache statistics, Entity activity history, System performance cache clear, Vendor call log filter, Overall statistics. Per-layer breakdown: - **Frontend (React)**: Telemetry dashboard, Cache stats viewer, Activity log, Vendor call log. - **API (ASP.NET Core 8 Web API)**: DB cache stats, Entity activity, Performance cache clear, Vendor log filter, Overall statistics. - **Database (EF Core 8 + AzureSQL)**: ActivityLogs, CacheStats, SystemMetrics, VendorCallLogs. - **Background services (Azure Functions / WebJobs)**: Cache stats collector, Telemetry aggregator, Vendor log harvester. Source signals (where the implementation lives): ApiAdmin DB cache statistics, ApiAdmin all entity activity, ApiAdmin system performance cache clear, ApiAdmin vendor call log. ### [M05 — Translation and Languages](https://cleenui.com/modules/translation-languages) *Dynamic language operations with fallback-safe global delivery.* Language discovery, filtering, and browser-code language resolution patterns that support multilingual data presentation and translation-aware module behavior. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `language` Capabilities: - Language all/country/filter APIs - Browser code to language/edition resolution - Fallback to English behavior - Translation hooks in content/template flows - Language IDs across multiple modules Benefits: - Accelerates global rollout - Reduces localization breakage - Supports large multilingual surfaces Flow of work: Register language catalog → Resolve user/browser language → Load translated entity content → Fallback when unavailable → Cache resolved language context Sub-features: Language all, Language by country, Language filter, Browser-code language resolution, Translation fallback, Cross-module language IDs. Per-layer breakdown: - **Frontend (React)**: Language switcher, Translation editor, Locale settings. - **API (ASP.NET Core 8 Web API)**: Language list, Country resolver, Browser code lookup, Translation hooks. - **Database (EF Core 8 + AzureSQL)**: Languages, Translations, LocaleMappings. - **Background services (Azure Functions / WebJobs)**: Translation worker, Cache warmer. Source signals (where the implementation lives): ApiLanguage, ApiPublic browser code language resolution, ApiPublic fallback comments, Translation usage across API modules. ### [M06 — Notify Templates](https://cleenui.com/modules/notify-templates) *Versioned, translatable templates for SMS, email, and push channels.* Admin template management with clone, restore, history, preview-send, phrase translation, merge-field dependency analysis, and editor preview generation. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `admin/notify-template` Capabilities: - Notify template save/clone/delete/filter/detail - Preview send and editor preview - Template history and restore - Phrase translation and re-translation - Merge field management and dependency retrieval Benefits: - Faster cross-channel messaging launches - Lower risk with version history and restore - Better localization quality Flow of work: Create or clone template → Add channel content and merge fields → Preview and test send → Publish by event trigger → Iterate via history and restore Sub-features: Template save, Template clone, Template delete, Template filter, Template by ID, Preview send, Editor preview, Template history, Template restore, Phrase translation, Merge field save/delete. Per-layer breakdown: - **Frontend (React)**: Template editor, Preview pane, Translation editor, History viewer, Send tester. - **API (ASP.NET Core 8 Web API)**: Template CRUD, Preview send, History/restore, Phrase translation, Merge fields. - **Database (EF Core 8 + AzureSQL)**: NotifyTemplates, Phrases, TemplateVersions, MergeFields. - **Background services (Azure Functions / WebJobs)**: Notification sender, Template renderer, Phrase translator. Source signals (where the implementation lives): ApiAdmin notify template endpoints, Notify template phrase translation endpoints, ApiPushNotification send endpoint. ### [M07 — Messaging](https://cleenui.com/modules/messaging) *Secure threaded conversations with real-time collaboration.* Conversation, participant, message, reaction, and media APIs backed by SignalR hub events for real-time delivery, read states, presence, and draft handling. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `chat/conversation` Capabilities: - Conversation create/detail/filter/update/delete - Participant add/update/remove - Message save/detail/filter/delete with attachments - Reaction add/remove and read receipts - SignalR presence and group broadcasting Benefits: - Enables real-time collaboration - Supports private threaded communication - Improves engagement and response time Flow of work: Create conversation → Add participants → Send threaded messages and media → Broadcast read/reaction presence events → Archive or delete per policy Sub-features: Conversation CRUD, Participant management, Message CRUD, Reaction add/remove, Media attach/remove, Read receipts, Presence online/offline, Draft save. Per-layer breakdown: - **Frontend (React)**: Conversation list, Thread view, Composer, Reactions UI, Presence indicator. - **API (ASP.NET Core 8 Web API)**: Conversation CRUD, Participant, Message CRUD, Reaction, Media attach. - **Database (EF Core 8 + AzureSQL)**: Conversations, Messages, Participants, Reactions, MessageMedia. - **Background services (Azure Functions / WebJobs)**: SignalR hub, Presence tracker, Notification dispatcher. Source signals (where the implementation lives): ApiChat, Hubs/MessagingHub. ### [M08 — Tasks](https://cleenui.com/modules/tasks) *Project-agnostic task templates, events, phases, and execution flows.* Task primitives integrated with project and assessment workflows, including template groups, event actions, statuses, phases, and association to assessment questions. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `project/task` Capabilities: - Project task template save/filter - Task template group save/delete/filter - Task event action save/filter - Task status type and phase management - Assessment question to task-template mapping Benefits: - Reusable execution framework across domains - Consistent delivery through templates - Direct bridge from assessment to action Flow of work: Define task templates and groups → Map templates to workflow triggers → Assign status and phase progression → Execute and update tasks → Analyze and refine templates Sub-features: Task template save/filter, Task template group save/delete/filter, Task event action save/filter, Task status filter, Task phase save, Task delete, Assessment-task template mapping. Per-layer breakdown: - **Frontend (React)**: Task list, Kanban board, Task editor, Phase manager, Status timeline. - **API (ASP.NET Core 8 Web API)**: Task templates, Event actions, Status types, Phase mgmt, Assessment mapping. - **Database (EF Core 8 + AzureSQL)**: Tasks, TaskTemplates, TaskGroups, Phases, Statuses. - **Background services (Azure Functions / WebJobs)**: Task scheduler, Event runner. Source signals (where the implementation lives): ApiProject task endpoints, ApiAssessment question task-template endpoints. ### [M09 — AI Models, Prompts, Agents, Avatars](https://cleenui.com/modules/ai-models-prompts-agents-avatars) *LLM operations with governance, prompt versioning, and agent orchestration.* Centralized AI operations layer for model/platform setup, utilization control, dynamic prompts, call-history outcomes, agent lifecycle management, and AI execution diagnostics. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `ai` Capabilities: - AI model type and platform configuration - Utilization percentage assignment by use type - Prompt save/filter/delete/history/version restore - Dynamic prompt runtime execution - AI agent filter/save/detail/delete Benefits: - Controls AI spend and quality - Supports safe experimentation - Enables targeted automation Flow of work: Configure models and platform → Allocate utilization by use case → Author and version prompts → Execute and monitor outcomes → Tune and redeploy agents/prompts Sub-features: Model type filter/save, Platform filter/save, Utilization save/assignment, Prompt CRUD, Prompt history outcomes, Prompt version restore, Dynamic prompt run, Agent CRUD. Per-layer breakdown: - **Frontend (React)**: Prompt editor, Model config, Agent panel, Avatar gallery, Utilization dashboard. - **API (ASP.NET Core 8 Web API)**: Model CRUD, Platform config, Utilization rules, Prompt run, Agent CRUD. - **Database (EF Core 8 + AzureSQL)**: AIModels, Prompts, PromptVersions, Agents, Avatars. - **Background services (Azure Functions / WebJobs)**: Prompt executor, Model router, Avatar sync. Source signals (where the implementation lives): ApiAI model/platform/utilization endpoints, ApiAI prompt and version endpoints, ApiAI agent endpoints. ### [M10 — Fonts](https://cleenui.com/modules/fonts) *Enterprise font and asset lifecycle with licensing attachment support.* Font family/type management with static font-file ingestion, hosted URL linkage, attachment management, and filterable retrieval for design systems and license oversight. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `styles/font` Capabilities: - Font family and font CRUD - Static font file ingestion to blob and DB - Font attachment upload/filter/delete - Font vendor/reference URL linkage - Font details and inventory filtering Benefits: - Reduces font licensing risk - Creates trackable typography asset inventory - Improves design consistency Flow of work: Create font family → Add font variants → Upload files and license attachments → Link vendor/reference URLs → Filter and govern active font inventory Sub-features: Font family save/delete, Font save/delete, Font details, Static font file ingest, Font file filter/delete, Font attachment save/filter/delete, Font URL save. Per-layer breakdown: - **Frontend (React)**: Font browser, Family editor, Upload UI, License viewer. - **API (ASP.NET Core 8 Web API)**: Font family CRUD, Font CRUD, File ingest, Attachment upload, URL save. - **Database (EF Core 8 + AzureSQL)**: FontFamilies, Fonts, FontFiles, FontAttachments. - **Background services (Azure Functions / WebJobs)**: Font file processor, Static asset uploader. Source signals (where the implementation lives): ApiStyles font endpoints, Static font storage configuration. ### [M11 — Legal Policy Management](https://cleenui.com/modules/legal-policy-management) *Versioned agreements with per-user acceptance and audit trails.* Agreement authoring and version lifecycle management combined with user-side pending-agreement retrieval and acceptance recording for compliance-ready governance. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `admin/agreement` Capabilities: - Agreement filter/list/detail/save/by-code - Agreement version history and restore - Public agreement list and lookup - User pending agreement retrieval - User agreement acceptance recording Benefits: - Compliance-ready acceptance trail - Safe policy evolution with rollback - Lower legal operations overhead Flow of work: Draft legal agreement → Publish new version → Surface pending agreement to user → Capture user acceptance → Retain history and restore when required Sub-features: Agreement save, Agreement filter/list/detail, Agreement by code, Agreement versions filter, Agreement version restore, User latest agreement, User agreement accept, Public agreement list/by-code. Per-layer breakdown: - **Frontend (React)**: Agreement editor, Version history, Acceptance flow, Public viewer. - **API (ASP.NET Core 8 Web API)**: Agreement CRUD, Version history, Public lookup, User acceptance. - **Database (EF Core 8 + AzureSQL)**: Agreements, AgreementVersions, UserAcceptances. - **Background services (Azure Functions / WebJobs)**: Agreement notifier, Version archiver. Source signals (where the implementation lives): ApiAdmin agreement endpoints, ApiUser agreement accept/latest endpoints, ApiPublic agreement endpoints. ### [M12 — Categories and Topics](https://cleenui.com/modules/categories-topics) *Reusable hierarchical taxonomy for content and entities.* Deep category hierarchy and topic assignment architecture supporting proposal flows, autocomplete/search patterns, featured taxonomy feeds, and content association use cases. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `category` Capabilities: - Category hierarchy retrieval - Category propose/search/autocomplete/featured - Topic search/propose/parent-topic retrieval - Topic assignment to entities - Public category/hierarchy patterns Benefits: - Standardizes taxonomy platform-wide - Improves search and discovery - Supports reusable semantic organization Flow of work: Define taxonomy roots → Propose and curate nodes → Assign topics/categories to entities → Expose featured/public taxonomies → Iterate structure as domain evolves Sub-features: Category hierarchy, Category propose, Category search, Category autocomplete, Featured categories, Topic search, Topic propose, Parent topics, Topic assignment. Per-layer breakdown: - **Frontend (React)**: Category tree, Topic editor, Autocomplete, Featured panel. - **API (ASP.NET Core 8 Web API)**: Hierarchy, Propose/curate, Search, Autocomplete, Topic ops. - **Database (EF Core 8 + AzureSQL)**: Categories, Topics, Assignments, Hierarchies. - **Background services (Azure Functions / WebJobs)**: Hierarchy rebuilder, Search indexer. Source signals (where the implementation lives): ApiCategory, ApiTopic, ApiPublic category endpoints. ### [M13 — Assessments and Surveys](https://cleenui.com/modules/assessments-surveys) *Wizard-style, sectioned assessment composition and execution.* End-to-end assessment builder with type management, section and step orchestration, form/question composition, and optional question-to-task-template automation mapping. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `assessment` Capabilities: - Assessment save/filter/detail - Assessment type save/filter - Section and step save/filter - Step-form and question save/filter - Question to task-template mapping Benefits: - Faster onboarding/qualification design - Higher quality structured data capture - Actionable outcomes through task mapping Flow of work: Create assessment and type → Build sections and steps → Add forms, questions, options, dependencies → Map actions/templates → Run and review outcomes Sub-features: Assessment save/filter/detail, Assessment type save/filter, Section save/filter, Step save/filter, Step form save/filter, Question save/filter, Question-template association. Per-layer breakdown: - **Frontend (React)**: Assessment builder, Wizard player, Section editor, Question editor. - **API (ASP.NET Core 8 Web API)**: Assessment CRUD, Type mgmt, Section/step, Step form, Question CRUD. - **Database (EF Core 8 + AzureSQL)**: Assessments, Sections, Steps, Questions, Responses. - **Background services (Azure Functions / WebJobs)**: Result calculator, Question-task mapper. Source signals (where the implementation lives): ApiAssessment. ### [M14 — Vendor Marketplace](https://cleenui.com/modules/vendor-marketplace) *Vendor ecosystem controls, service monetization, and payment rails.* Marketplace primitives spanning vendor typing and call-log telemetry, account-level marketplace visibility flags, and Stripe-backed subscription/payment workflows for supply-demand ecosystems. Tech: C#, .NET 8, ASP.NET Core 8, EF Core 8, AzureSQL, React 18 + TypeScript. API base path: `admin/vendor` Capabilities: - Vendor type filtering - Vendor call-log filtering - Marketplace visibility/vetting indicators - Stripe subscription creation - Stripe webhook processing Benefits: - Accelerates marketplace launch - Improves vendor oversight - Supports scalable demand/supply operations Flow of work: Define vendor types and visibility rules → Onboard and classify vendors → Enable billing/subscription pathways → Monitor vendor call and service activity → Optimize marketplace conversion and quality Sub-features: Vendor type filter, Vendor call log filter, Marketplace visibility/vetting flags, Stripe subscription create, Stripe webhook processing, Integration connect/disconnect. Per-layer breakdown: - **Frontend (React)**: Vendor browse, Visibility settings, Subscription panel, Stripe checkout. - **API (ASP.NET Core 8 Web API)**: Vendor types, Call logs, Stripe subscription, Webhook handler, Integration. - **Database (EF Core 8 + AzureSQL)**: Vendors, Subscriptions, VendorCallLogs, IntegrationTokens. - **Background services (Azure Functions / WebJobs)**: Stripe webhook handler, Vendor activity tracker. Source signals (where the implementation lives): ApiAdmin vendor endpoints, ApiPayment, ApiAccount marketplace flags, ApiIntegration lifecycle endpoints. --- ## AI agent skills — full catalog ### [Setup skill](https://cleenui.com/ai-skills/setup) *Scaffold a CleenUI project from zero — dependencies, tokens, theme, component registration.* The Setup skill is the one your agent runs first. It bootstraps a new CleenUI project from scratch — installing dependencies, wiring up the design tokens, configuring the build tooling, and registering the component library so subsequent agent work has the primitives available. It also handles the messier integration cases: adding CleenUI to an existing React codebase without breaking existing styles, conflict-resolving Tailwind config, and verifying that fonts and CSS variables load correctly. Run it once per project. **What the skill does** - Installs CleenUI packages and peer dependencies appropriate to your stack (Vite, Next.js, Create React App, Remix). - Adds tokens.css and styles.css to the global stylesheet import chain. - Configures Tailwind (or the equivalent for your toolchain) with the CleenUI preset. - Sets up Google Font preconnects for Inter, Roboto Mono, and the script faces. - Adds a working example component to confirm the install is functional. **When to invoke it** - At project initialization — "set up CleenUI in this Vite + React project." - When adding CleenUI to an existing React app for the first time. - After a major version upgrade if the install steps have changed. - When recovering a project that has broken CleenUI imports. ### [Builder skill](https://cleenui.com/ai-skills/builder) *Teaches your AI agent how to build pages and features using CleenUI primitives.* The Builder skill is the workhorse — the one your agent calls whenever you ask it to add a feature, build a screen, or refactor existing UI to use CleenUI. It carries the catalog: which component fits which job, what variants exist, what props each accepts, and the layout patterns that work well together. It also knows what not to do — when to compose primitives instead of bringing in a new dependency, when to use a Drawer vs. a Modal, when to reach for the DataGrid vs. a hand-rolled table. The result is consistent, idiomatic CleenUI code instead of approximated Tailwind. **What the skill does** - Maps natural-language requests onto specific CleenUI components and variants. - Generates idiomatic JSX with correct imports, props, and accessibility attributes. - Composes patterns: forms-with-validation, list-with-filter, dashboard-with-cards, drawer-driven-detail-view, etc. - Suggests refactors when existing code could use a CleenUI primitive instead of bespoke styling. - Knows when to defer to a Page Template instead of building from primitives. **Common requests it handles well** - "Add a settings page with sectioned form fields." - "Build a customer detail screen with a left-rail sidebar and a tabbed main area." - "Wire up a DataGrid with pinned filters for this entity." - "Turn this plain table into a CleenUI DataGrid with row selection." ### [Theme skill](https://cleenui.com/ai-skills/theme) *Customizes colors, typography, spacing, and shadows to match your brand.* The Theme skill handles the visual layer. CleenUI ships with a complete design-token system — every color, type scale, radius, shadow, and spacing value is a named CSS custom property. The Theme skill knows how those tokens relate so it can re-skin the entire system from a small brand brief. Tell your agent "theme this with our brand colors — primary navy #1B2A4E, accent coral #FF6B6B, slightly tighter type" and the skill produces a complete tokens override, runs a sanity pass over contrast ratios, and updates the example screens to verify. **What the skill does** - Generates a complete brand-color palette from one or two seed colors — including hover/active/disabled variants. - Adjusts the typography scale (sizes, line heights, letter spacing) coherently rather than one value at a time. - Updates radii, shadows, and spacing on a single dial (subtle / standard / pronounced). - Runs accessibility checks on the resulting palette (WCAG AA contrast ratios at minimum). - Outputs a tokens-override CSS file plus a one-line import to apply it globally. **When to invoke it** - After Setup, to apply your brand to a fresh install. - Any time the brand evolves and you need to re-theme. - When white-labeling for a customer in a deployment. - Quickly trying out a few palette ideas in early-stage design exploration. ### [API Builder skill](https://cleenui.com/ai-skills/api-builder) *Scaffolds ASP.NET Core 8 controllers, services, and the Dapper data-access calls that wire to your stored procs.* The API Builder skill is the backend counterpart to the frontend Builder. When a developer says "add an /admin/category/restore endpoint," the skill generates the controller method, the service-layer call, the Dapper invocation, the auth + RBAC attribute wrappers, and the route registration — following CleenUI's exact ASP.NET Core 8 conventions across the 524-endpoint surface. It knows the 14-module folder structure, the per-module API base (e.g., /admin/notify-template/*), the validation idiom, the response shape conventions, and where impersonation + row-level access checks belong. Output looks like it was written by someone who's been in the codebase for years. **What the skill does** - Generate a controller method following CleenUI's request/response shape conventions. - Wire the service-layer abstraction and the Dapper stored-procedure call. - Apply the correct auth attribute (admin / user / public) based on the path prefix. - Register the endpoint in the appropriate module's controller class. - Emit the OpenAPI summary + parameter docs so Swagger UI picks it up. ### [Schema & Procs skill](https://cleenui.com/ai-skills/schema-procs) *Authors T-SQL tables + stored procedures following CleenUI's schema conventions (sibling *Language tables, audit history, soft-delete, row-level access).* The Schema & Procs skill is the AzureSQL counterpart. When a developer says "add a Notes table for tasks" or "add a sp_NotesGetByFilter procedure," the skill produces hand-tuned T-SQL that matches the 300+ tables and 700+ stored procs already in CleenUI. It knows the schema patterns by heart: sibling Language tables for translation, History tables for versioning, IsDeleted columns for soft-delete, AccountID columns for row-level access. Stored procedures follow the sp_AdminEntitySave, sp_GetEntityByFilter naming + parameter conventions. Migrations are scripted T-SQL files checked into the repo — no ORM-generated surprises. **What the skill does** - Generate a table definition with the standard columns (audit, soft-delete, row-level access, translation siblings). - Author stored procedures following the project naming conventions (sp_). - Embed row-level account-scoping in every read + write proc. - Produce a numbered migration file checked into the migrations folder. - Update the translation registry so new translatable columns get picked up automatically. ### [Background Services skill](https://cleenui.com/ai-skills/background-services) *Scaffolds Azure WebJobs + Functions following the cleen* naming, queue conventions, and the 12-project VS solution layout.* The Background Services skill handles the async-work tier. When a developer says "add a job that sends a daily digest email" or "add a function that processes uploaded videos," the skill scaffolds the WebJob or Function in the right VS project, wires the queue trigger or timer, and follows the cleen* naming convention (cleenNotifyDispatchJob, cleenMediaTranscodeFunction). It knows when to reach for a WebJob (always-on workers — translation queues, scheduled sweeps) vs an Azure Function (event-driven or HTTP-triggered — webhook receivers, queue consumers). Output respects the shared C# class libraries (cleenLLM, cleenServices, cleenDataLayer, cleenDomain, cleenCommon, cleenWebAppBase). **What the skill does** - Choose WebJob vs Function based on the workload shape (always-on, event-driven, scheduled). - Place the new project in the 12-project VS solution under the correct grouping. - Wire the queue or timer trigger using the project's existing dispatch patterns. - Apply the cleen* naming convention. - Register the job in the JobRun telemetry tables so the infrastructure module picks it up. --- ## IDE setup guides — full catalog ### [Claude Code](https://cleenui.com/ai-skills/ide-setup/claude-code) Vendor: Anthropic. *Use the claude mcp add command — Claude Code's built-in MCP installer wires CleenUI up in one shot.* Claude Code is Anthropic's CLI coding agent. CleenUI ships as an MCP (Model Context Protocol) server, which means once registered, every Claude Code session in any project has access to the Setup, Builder, and Theme skills. The easiest way to register is the built-in claude mcp add command, but you can also edit ~/.claude.json (user-scope) or a project-local .mcp.json by hand. Prerequisites: - Claude Code installed (run 'claude --version' to check) - A React project where you want to use CleenUI - Node 18+ on your PATH (Claude Code launches npx) Setup steps: 1. **Confirm Claude Code is installed** — Run a version check in your terminal. If you don't have Claude Code yet, install it from claude.com/claude-code. 2. **Register CleenUI with claude mcp add** — This is the dummy-proof option — Claude Code's CLI handles the JSON edit for you. The --scope user flag makes the server available in every project (use --scope project to limit it to the current repo). 3. **(Alternative) Edit ~/.claude.json by hand** — If you prefer editing JSON directly, the user-scope config lives at ~/.claude.json. Add the cleenui entry to mcpServers — don't replace the rest of the object. 4. **Verify the server registered** — Inside a Claude Code session type /mcp to list registered servers, or run claude mcp list from your shell. cleenui should appear with three tools. 5. **Run the Setup tool** — Ask Claude Code to set up CleenUI. It will detect your stack (Vite, Next.js, Remix, CRA), install dependencies, wire tokens and styles, and add a sample component. 6. **Build your first feature** — From here, use the Builder tool any time you want a new screen, form, or feature. It knows the full component catalog and composes idiomatic CleenUI JSX. Troubleshooting: - **/mcp doesn't show cleenui** — Fully quit and relaunch Claude Code — the MCP config is loaded at startup. If it still doesn't show, run 'claude mcp list' from your shell to see whether the registration actually persisted. - **Server shows 'failed' instead of 'connected'** — The npx process couldn't start. Confirm Node 18+ is on your PATH ('node --version'). If you use nvm, make sure the active version is set before launching Claude Code. - **Permission denied during setup** — Make sure you launched Claude Code from a shell where 'npm install' works without sudo. Avoid sudo'd Claude sessions — npx can't write to a system-owned node_modules. ### [Cursor](https://cleenui.com/ai-skills/ide-setup/cursor) Vendor: Anysphere. *Cursor supports MCP — register CleenUI in .cursor/mcp.json and the skills become available in Composer and Chat.* Cursor has first-class MCP support. The config file lives at .cursor/mcp.json (project-scope) or ~/.cursor/mcp.json (global). Once registered, the three CleenUI tools are available in Composer, Chat, and Cmd-K threads — no rules file needed. Prerequisites: - Cursor v0.42 or later (MCP support landed in 0.40) - A React project to set up - Node 18+ on your PATH Setup steps: 1. **Open Cursor in your project** — Open your project folder in Cursor. The MCP config is project-scoped by default so it lives in the repo you're working on. 2. **Create .cursor/mcp.json** — At the root of your project, create a folder called .cursor (if it doesn't exist), and add a file named mcp.json inside it. You can also use ~/.cursor/mcp.json for a global config available in every project. 3. **Open the MCP settings panel** — Hit ⌘+Shift+J to open Cursor Settings, then go to Features → Model Context Protocol. Cursor will auto-discover the file you just created and list cleenui — toggle it on if it's off. 4. **Open Composer (⌘+I) and ask for setup** — Cursor's Composer is where multi-file agent work happens. Hit ⌘+I, then just describe what you want. Cursor will call the cleenui setup tool automatically. 5. **Apply the changes and run npm install** — Click Apply in the Composer panel. Then run npm install in Cursor's integrated terminal — ⌃` (Ctrl+backtick) — to pull the new dependencies. Troubleshooting: - **cleenui doesn't appear in the MCP panel** — Restart Cursor — the mcp.json file is only re-scanned on startup. Confirm the file is named exactly .cursor/mcp.json, not cursor.mcp.json or .cursor/mcp.json.txt. - **Server shows 'failed' status** — Click the failed entry — Cursor surfaces the npx error message. Most commonly it's a missing Node version or a corporate proxy blocking npx. ### [Windsurf](https://cleenui.com/ai-skills/ide-setup/windsurf) Vendor: Codeium. *Drop cleenui into ~/.codeium/windsurf/mcp_config.json — Cascade picks it up as a registered MCP server.* Windsurf supports MCP servers via Cascade. The config file lives at ~/.codeium/windsurf/mcp_config.json. Once registered, the three CleenUI tools are toggleable from Cascade's MCP settings panel and invokable from any Cascade thread. Prerequisites: - Windsurf installed - A React project to set up - Node 18+ on your PATH Setup steps: 1. **Open the MCP config file** — Windsurf stores MCP server configs at ~/.codeium/windsurf/mcp_config.json. Open it in your editor of choice — Windsurf will create the file automatically if it doesn't exist. 2. **Add the CleenUI server** — Add the cleenui entry under mcpServers. Standard MCP shape — same format Claude Code and Cursor use. 3. **Refresh Cascade's MCP panel** — In Cascade (the chat panel), click the MCPs icon in the top right of the panel header (it looks like a stack of servers). Hit the refresh button — cleenui should appear with its three tools listed. 4. **Run Setup in a Cascade thread** — Start a new Cascade thread and ask Windsurf to set up CleenUI. Cascade will call the cleenui:setup tool and walk through the file changes. Troubleshooting: - **cleenui doesn't show after editing the file** — Use the refresh button in Cascade's MCP panel. Cascade also reloads on Windsurf restart if refresh doesn't pick it up. - **Tools show but won't invoke** — Check Cascade's tool-count indicator. If you're near the 100-tool limit across all MCPs, disable a few unused servers to free slots. ### [Cline](https://cleenui.com/ai-skills/ide-setup/cline) Vendor: Cline. *Cline ships with native MCP support — configure cleenui via the MCP Servers panel in the Cline extension.* Cline runs as a VS Code extension and supports MCP servers out of the box. Configuration is managed through the UI (the stacked-server icon in the Cline panel's top toolbar), which writes to the extension's settings JSON behind the scenes. Prerequisites: - VS Code (or a VS Code-compatible editor) - Cline extension installed (v2.0+ for MCP support) - A React project to set up - Node 18+ on your PATH Setup steps: 1. **Open Cline's MCP Servers panel** — Click the Cline icon in the activity bar to open the Cline panel. In the panel's top toolbar, click the stacked-server icon — this opens the MCP Servers view. 2. **Click Configure → edit the JSON** — Cline opens its MCP settings as an editable JSON file. Add the cleenui entry under mcpServers. The autoApprove array lets you skip approval prompts for specific tools (leave it empty if you want approval each time). 3. **Save the file and reload the panel** — Cline auto-reloads MCP configs on save. The MCP Servers panel will now show cleenui with a green status dot and its three tools. 4. **Ask Cline to run the setup** — Just type the request in the Cline panel. Cline will invoke the cleenui setup tool and ask for approval on each file change unless you've added them to autoApprove. Troubleshooting: - **MCP Servers panel not visible** — Update the Cline extension to its latest version. MCP support requires v2.0 or later. - **npx command fails on Windows** — Replace 'npx' with the full path: %APPDATA%\npm\npx.cmd. Windows shells don't always resolve npx from PATH inside the extension host. - **Server shows 'failed' status** — Click the failed entry — Cline surfaces the error message inline. Most often it's a Node version issue or a network block on npx. ### [GitHub Copilot](https://cleenui.com/ai-skills/ide-setup/github-copilot) Vendor: GitHub. *VS Code's Copilot supports MCP servers — add cleenui to .vscode/mcp.json and the tools become callable from Copilot Chat.* Copilot's MCP support lives inside VS Code (rather than the Copilot Extensions marketplace) and uses a dedicated .vscode/mcp.json file at workspace scope, or a user-level mcp.json for everywhere. Heads up: VS Code's MCP format uses servers as its top-level key — different from the mcpServers key that Claude Code, Cursor, Cline, and Windsurf use. Prerequisites: - VS Code (latest) - GitHub Copilot subscription (Individual, Business, or Enterprise) - Copilot Chat enabled - Node 18+ on your PATH Setup steps: 1. **Open the MCP: Add Server command** — VS Code ships a guided installer. Open the command palette (⌘+Shift+P) and run 'MCP: Add Server'. Choose Workspace (writes to .vscode/mcp.json) or Global (writes to your user profile's mcp.json). 2. **(Alternative) Edit .vscode/mcp.json by hand** — If you prefer raw JSON, create .vscode/mcp.json in your project. Note the top-level key is servers (singular form, NOT mcpServers) — this is VS Code's unique convention. 3. **(Quick option) Use the CLI flag** — One-liner from your terminal — VS Code's --add-mcp flag installs an MCP server without opening the UI. 4. **Invoke via Copilot Chat** — Open Copilot Chat (⌃⌘I on macOS / Ctrl+Alt+I elsewhere) and switch to Agent mode. Tools registered via MCP are surfaced to the agent automatically — just describe what you want. Troubleshooting: - **Tools don't appear in Copilot Chat** — Make sure Copilot Chat is in Agent mode (not Ask). MCP tools are only callable in Agent mode. - **Edited servers key but nothing happens** — VS Code MCP uses servers as the top-level key — not mcpServers. If you copy/pasted from a Claude Code or Cursor example, you'll need to rename the key. - **Add Server command not in palette** — Update VS Code to a current version (MCP shipped stable in mid-2025). Older builds had MCP behind a flag. ### [Aider](https://cleenui.com/ai-skills/ide-setup/aider) Vendor: Open source. *Download the CleenUI skill files locally and reference them in .aider.conf.yml's read directive.* Aider is a terminal-based AI pair programmer. It loads read-only context files at startup via .aider.conf.yml's read directive. The read directive only accepts local file paths, so the install flow is: fetch the CleenUI skill files into your repo (or home dir) once, then point aider at the local copies. Prerequisites: - Aider installed (pip install aider-chat) - A git repo to work in - An API key set (Anthropic, OpenAI, or other supported provider) - curl available for the initial skill-file download Setup steps: 1. **Download the CleenUI skill files locally** — Aider's read: directive expects local paths, so first pull the skill markdown into your repo (or somewhere stable on disk). The npm package @cleenui/mcp-skills ships these as exportable markdown — npx will copy them. 2. **Create or open .aider.conf.yml** — Aider reads YAML config from .aider.conf.yml in your repo root (project-scoped) or your home dir (global). For a single project, project-scoped is best — it lives with the codebase. 3. **Add the skill files to the read: array** — Paste this YAML. The read: directive loads each file as read-only context, so aider can follow the instructions without aider also editing the skill files themselves. 4. **Start aider and confirm the skills loaded** — Launch aider in your project. The startup banner lists every file in read: — you should see the three CleenUI skill files there. 5. **Ask aider to run the setup** — Aider has the skill instructions in context now. Just describe what you want — it'll follow the setup.md procedure step by step, asking before each file edit. Troubleshooting: - **Aider says 'file not found' for the skill files** — Paths in read: are relative to wherever you launched aider, not to .aider.conf.yml. Use absolute paths if you launch from a subdirectory. - **Want skill updates without re-downloading** — Add a git submodule or a small script that re-runs the export command before each aider session. The skill files are version-pinned by your @cleenui/mcp-skills install. ### [Continue](https://cleenui.com/ai-skills/ide-setup/continue) Vendor: Continue.dev. *Continue supports MCP servers — add cleenui to config.yaml or a standalone file in .continue/mcpServers/.* Continue is an open-source AI code assistant. It supports MCP servers but only in agent mode — the Setup, Builder, and Theme tools register cleanly. The config is YAML, and Continue accepts either an inline mcpServers array in config.yaml or a per-server standalone YAML file in .continue/mcpServers/. Prerequisites: - Continue extension installed (VS Code or JetBrains) - A React project to set up - Continue switched to Agent mode (MCP only works in agent mode) - Node 18+ on your PATH Setup steps: 1. **Open Continue's config** — Continue uses YAML config at ~/.continue/config.yaml (the old config.json is legacy and being phased out). Open the file in your editor. 2. **Add cleenui under mcpServers** — Note: mcpServers in Continue is an array of entries (each with a name field), not the object-keyed shape Claude Code and Cursor use. Same fields otherwise. 3. **(Alternative) Use a standalone server file** — Continue also discovers any YAML files dropped into .continue/mcpServers/. Useful if you want CleenUI scoped to a single project rather than your global config. 4. **Switch to Agent mode and run setup** — Open Continue's chat panel and switch from Chat / Edit mode to Agent mode (mode selector at the top of the chat). MCP tools are only available in agent mode. Troubleshooting: - **MCP tools don't show up** — Switch Continue to Agent mode. Chat and Edit modes intentionally don't expose MCP tool calling. - **Config changes don't apply** — Run 'Continue: Reload Configuration' from the command palette. Continue caches the YAML and doesn't always hot-reload on save. ### [Cody (Sourcegraph)](https://cleenui.com/ai-skills/ide-setup/cody) Vendor: Sourcegraph. *Cody supports MCP via the cody.mcpServers setting — enable the feature flag and add cleenui to settings.json.* Cody supports local MCP servers as of recent versions. There are two gotchas: (1) MCP support is behind a feature flag that has to be enabled first, and (2) only local STDIO servers are supported (no remote URL servers). For VS Code the config goes into the standard settings.json under the cody.mcpServers key; JetBrains uses a separate cody_settings.json file. Prerequisites: - Cody extension installed (VS Code or JetBrains) - A Sourcegraph account (free tier works) - A React project - Node 18+ on your PATH Setup steps: 1. **Enable the agentic-context-mcp feature flag** — Cody's MCP support is gated. Open Cody settings via the extension's gear icon and look for the agentic context section. Toggle 'agentic-context-mcp-enabled' on. 2. **Edit settings.json to add the server** — For VS Code, open settings.json (⌘+Shift+P → 'Preferences: Open User Settings (JSON)'). Add cleenui under cody.mcpServers. For JetBrains the file is cody_settings.json — same JSON shape. 3. **Reload Cody** — Cody picks up MCP servers on reload. Run 'Cody: Reload' from the command palette, or restart your editor. 4. **Use the tools in Chat** — Open Cody Chat. With MCP enabled, the cleenui tools surface to the agent automatically — just describe what you want. Troubleshooting: - **agentic-context-mcp-enabled flag isn't visible** — Update the Cody extension. MCP support is recent — older builds don't expose the flag. - **Server registers but tools don't appear** — Confirm you're in Cody Chat (not the older command/recipe surface). MCP tools only flow through the Chat interface. ### [Codeium](https://cleenui.com/ai-skills/ide-setup/codeium) Vendor: Codeium. *Codeium proper doesn't expose MCP — use Windsurf (Codeium's agentic IDE) for the full skill flow.* Codeium's standalone extension is focused on autocomplete and chat with codebase context. As of this writing, it doesn't expose a public MCP-server or custom-skill registration API — Codeium has channeled their agentic work into Windsurf instead. If you want the full CleenUI skill experience inside a Codeium-family product, use Windsurf. This page covers what you can still do inside the Codeium extension itself. Prerequisites: - Codeium extension installed - (Recommended) Windsurf, if you want full MCP support Setup steps: 1. **Install the npm package the normal way** — Without MCP-style skill registration, your best path inside Codeium is to install CleenUI like any other npm package. Codeium's autocomplete and Chat will then suggest CleenUI components from your project's node_modules. 2. **Reference CleenUI in your Codeium prompts** — Codeium Chat reads your codebase, so once a CleenUI component is imported anywhere in your project, you can ask Codeium to use it in new files. The model picks up the pattern from existing usage. 3. **Switch to Windsurf for the real flow** — If you want the Setup, Builder, and Theme skills callable as tools (the dummy-proof flow), Windsurf is the right Codeium product. The detail page for Windsurf walks through it in five steps. Troubleshooting: - **Want richer agent behavior than Codeium offers** — Switch to Windsurf — same Codeium account, full MCP support, no extra subscription needed for individuals. ### [Tabnine](https://cleenui.com/ai-skills/ide-setup/tabnine) Vendor: Tabnine. *Tabnine doesn't expose MCP — use the npm install path and rely on Tabnine's codebase indexing.* Tabnine's flagship product is its autocomplete and Chat — it doesn't currently expose a public MCP-server or custom-skill registration. Your best play with Tabnine is to install CleenUI normally and let Tabnine's codebase awareness pick up the patterns from your imports. This page covers that flow. Prerequisites: - Tabnine installed (Pro or Enterprise plan recommended for Chat) - A React project Setup steps: 1. **Install the npm package** — Without MCP-style skill registration, install CleenUI like any other library. Tabnine's chat-with-codebase will pick up your imports. 2. **Import CleenUI styles in your entry file** — Add the tokens.css and styles.css imports manually — this is the part the Setup skill normally automates, but you can do it once by hand. 3. **Use Tabnine Chat to build features** — Now that CleenUI is in your project, Tabnine Chat can pattern-match from existing imports. Ask it to build new screens using the components. Troubleshooting: - **Suggestions don't use CleenUI components** — Tabnine's suggestions improve as you use the library more. Add one or two CleenUI imports manually, then Tabnine will pattern-match from those. ### [Replit AI](https://cleenui.com/ai-skills/ide-setup/replit-ai) Vendor: Replit. *Replit Agent has Skills — use the AI Settings panel to add CleenUI's skill files as Agent knowledge.* Replit Agent supports per-Repl 'Skills' — text snippets the Agent treats as authoritative instructions. Drop the CleenUI Setup, Builder, and Theme skill content into the Skills panel inside your Repl and the Agent will follow them when working on the project. Prerequisites: - A Replit account with Agent access (Replit Core or higher) - A React or Next.js Repl - The CleenUI skill markdown files (downloadable via npx @cleenui/mcp-skills --export) Setup steps: 1. **Open Replit AI Settings** — In your Repl, click the AI button in the right sidebar to open the Agent panel. Click the gear icon in the panel header to open AI Settings. 2. **Download the CleenUI skill markdown** — Replit Skills are pasted-in markdown. Locally, run the export command from your terminal, then copy each .md file's contents. 3. **Paste each skill into the Skills panel** — In Replit AI Settings → Skills, click 'Add skill', paste in the setup.md content, name it 'CleenUI Setup'. Repeat for Builder and Theme. 4. **Ask Replit Agent to set up CleenUI** — Back in the Agent panel, just describe what you want. The Skills you registered are part of the Agent's instructions now. Troubleshooting: - **Agent ignores the skill content** — Skills work best when you reference them by name in your prompt — 'using the CleenUI Setup skill' rather than just 'set up CleenUI'. ### [Zed AI](https://cleenui.com/ai-skills/ide-setup/zed-ai) Vendor: Zed Industries. *Zed calls them context_servers — add cleenui to ~/.config/zed/settings.json under that key.* Zed supports MCP-style servers but uses its own naming: the top-level key is context_servers (not mcpServers). The Agent Panel in Zed surfaces tools from registered context_servers in every Assistant conversation. The shape of each entry is otherwise the standard MCP command/args/env. Prerequisites: - Zed installed - A React project - Node 18+ on your PATH Setup steps: 1. **Open Zed's settings** — Hit ⌘+, (Cmd+comma) to open settings.json. The file lives at ~/.config/zed/settings.json on macOS/Linux. 2. **Add cleenui under context_servers** — Note the key name — it's context_servers, not mcpServers. Zed uses its own naming convention but the entry shape is otherwise the standard MCP command/args/env. 3. **(Alternative) Use Zed's Add Custom Server modal** — Prefer a UI? Open the Agent Panel → Settings → 'Add Custom Server'. Zed walks you through the same fields and writes settings.json for you. 4. **Verify in the Agent Panel** — Open the Agent Panel — Zed shows a status dot next to each registered server. Green means connected. Hover for the list of available tools. 5. **Run setup from Zed's Assistant** — ⌘+? opens the Assistant panel. Tools from registered context_servers are part of the model's available actions — just ask. Troubleshooting: - **Settings JSON has syntax errors** — Zed validates JSON live — look for the red squiggle indicator and fix the offending block. - **Server doesn't connect** — Click the failed entry in the Agent Panel — Zed surfaces the underlying error. Most often a Node version mismatch with what npx expects. --- ## Page templates — full catalog ### [Analytics](https://cleenui.com/ai-skills/page-templates/analytics) Category: Insights. *Charts, KPIs, and drill-downs — the story your data tells, organized for decisions.* Multi-chart analytics page with a KPI strip on top, three or four primary visualizations underneath, and a filter rail down the left side. Designed for the user who needs to ask 'what's happening?' and then 'why?' without leaving the page. When to use: - Building a reporting page where users explore trends rather than complete a transaction. - Surfacing aggregated metrics with the ability to slice by dimension. - Replacing a dashboard that's outgrown its homepage role and needs its own page. Structure: - **Filter rail** — Left rail of pinned filters; date range, segment, channel. _(FilterChip, FilterDrawer)_ - **KPI strip** — Three or four cards showing top-level numbers + delta. _(StatCard)_ - **Primary chart** — Time-series — the headline metric over time. _(Chart)_ - **Comparison grid** — Two or three smaller charts side by side for cross-cuts. _(Chart, Card)_ - **Drill-in table** — Row-level data that backs the charts above. _(DataGridWithFilters)_ Components used: Chart, StatCard, FilterChip, FilterDrawer, DataGridWithFilters, Card. Substitutions (Builder-skill prompts): - `metric` (e.g. "Revenue") — appears in: KPI labels, chart titles, page title. - `timeRange` (e.g. "Last 90 days") — appears in: Date range picker default. - `segmentDimension` (e.g. "Region") — appears in: Comparison grid axis. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-analytics--preview ### [Dashboard](https://cleenui.com/ai-skills/page-templates/dashboard) Category: Operations. *KPI strip + chart + recent-activity list — the homepage of an internal tool.* The first screen a logged-in user sees in most B2B apps. Four KPI cards across the top, a primary chart for trend at-a-glance, and a recent-activity list on the right rail. Designed to answer 'what should I care about right now?' in under five seconds. When to use: - Building the landing screen for an authenticated user. - Surfacing the top three or four metrics that drive a daily decision. - Replacing a 'home that's actually a list' with something more glanceable. Structure: - **Page header** — Title, date-range selector on the right. _(Breadcrumb, Heading, Button)_ - **KPI strip (4 cards)** — Each card has metric, delta vs. prior period, sparkline. _(StatCard)_ - **Primary chart** — Defaults to time-series line; switch to bar via prop. _(Chart)_ - **Recent activity** — Right-rail list, 5–8 items with avatar + timestamp. _(Card, ActivityFeed)_ Components used: StatCard, Chart, Card, ActivityFeed, Heading, Breadcrumb. Substitutions (Builder-skill prompts): - `entityName` (e.g. "Sales") — appears in: Page title, KPI labels, chart axis. - `kpis` (e.g. "MRR · NPS · CAC") — appears in: The four cards across the top. - `timeRangeDefault` (e.g. "Last 30 days") — appears in: Date range picker initial value. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-dashboard--preview ### [Datagrid](https://cleenui.com/ai-skills/page-templates/datagrid) Category: Operations. *DataGrid with pinned filters, bulk actions, and a slide-out detail drawer.* The workhorse of B2B applications. A filterable, sortable, bulk-selectable table of records with a side drawer that opens on row click. Pinned filter chips at the top, bulk-action bar that appears when rows are selected. Pagination at 10/25/50/100 per page, configurable per user. When to use: - Building any 'records of X' page — customers, orders, tickets, properties, etc. - Replacing a paginated table that has outgrown its hand-rolled controls. - Anywhere you need bulk operations alongside individual row drill-in. Structure: - **Page header** — Title, New-record CTA on right. _(Heading, Button)_ - **Filter strip** — Pinned filters as chips; 'More filters' opens the drawer. _(FilterChip, FilterDrawer)_ - **DataGrid** — Sortable columns, sticky header, 10/25/50/100 pagination. _(DataGridWithFilters)_ - **Bulk-action bar** — Slides in from top when rows are selected. _(Toolbar, Button)_ - **Detail drawer** — Right slide-out on row click; shows full record. _(Drawer)_ Components used: DataGridWithFilters, FilterChip, FilterDrawer, Drawer, Toolbar, Button, Heading. Substitutions (Builder-skill prompts): - `entityName` (e.g. "Customers") — appears in: Page title and new-record CTA label. - `columns` (e.g. "Name, Email, Plan, Created") — appears in: DataGrid column definitions. - `rowAction` (e.g. "Open detail drawer") — appears in: What happens on row click. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-datagrid--preview ### [Email Engine](https://cleenui.com/ai-skills/page-templates/email-engine) Category: Communications. *Template editor + send queue + delivery log — the transactional-email surface for a B2B app.* Three-pane workspace for managing transactional emails. Template list on the left, editor in the middle (subject + body + variable picker), and a preview + delivery log on the right. Includes variable substitution preview so the marketer or ops user can verify before sending. When to use: - Building the admin surface for transactional email templates (invoices, password resets, notifications). - Replacing scattered template management with a single workspace. - Anywhere ops needs to edit copy + preview substitution without involving engineering. Structure: - **Template list** — Left rail with templates grouped by type. _(List, FilterChip)_ - **Editor** — Subject line, body, variable picker, save state. _(RichTextEditor, Form)_ - **Variable preview** — Rendered with sample values so what-you-see-is-what-the-customer-sees. _(Card)_ - **Delivery log** — Recent sends with delivery status, opens, clicks. _(DataGridWithFilters)_ Components used: RichTextEditor, Form, List, FilterChip, DataGridWithFilters, Card. Substitutions (Builder-skill prompts): - `templateScope` (e.g. "Transactional") — appears in: Template list grouping. - `variableSet` (e.g. "userName, accountName, invoiceUrl") — appears in: Variable picker options. - `providerLabel` (e.g. "SendGrid") — appears in: Delivery log source column. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-email-engine--preview ### [Simple Form](https://cleenui.com/ai-skills/page-templates/simple-form) Category: Forms. *A focused single-screen form — labels, inputs, validation, submit. No multi-step ceremony.* The canonical single-screen form. Vertical stack of labeled inputs with inline validation, a primary Submit button, and a quiet secondary Cancel. For collecting structured input from a user without the overhead of a multi-step wizard. When to use: - Building a 'create record' or 'update record' screen that fits comfortably on one page. - Anywhere multi-step would be ceremony rather than value. - Quick-action surfaces — invite a user, add a contact, submit a request. Structure: - **Page header** — Title + one-line description of the form's purpose. _(Heading)_ - **Form fields** — Labels above inputs; inline validation messages below. _(Input, Select, Toggle)_ - **Action row** — Cancel on the left (ghost), Submit on the right (primary). _(Button)_ Components used: Input, Select, Toggle, Button, Heading, Form. Substitutions (Builder-skill prompts): - `formTitle` (e.g. "Invite a user") — appears in: Page heading + Submit button label. - `fields` (e.g. "Email · Role · Welcome message") — appears in: Form-field stack. - `submitLabel` (e.g. "Send invite") — appears in: Primary action button. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-form--preview ### [Product Catalog](https://cleenui.com/ai-skills/page-templates/product-catalog) Category: Commerce. *Browsable grid of products with filters, search, and quick-view — the storefront entry point.* Card-grid catalog of products with a filter rail on the left and a search bar above. Each card shows image, name, price, and a quick-view affordance. Pagination or infinite-scroll at the bottom. The canonical entry point for any product-listing flow. When to use: - Building a storefront, catalog browser, or item-picker for an internal tool. - Anywhere users need to browse-and-filter many items before drilling into one. - Replacing a list-view that should actually be visual-first. Structure: - **Filter rail** — Left rail with category, price, attribute filters. _(FilterChip, FilterDrawer)_ - **Search + sort** — Top of the grid — keyword search and sort selector. _(Input, Select)_ - **Product grid** — Responsive grid; each card has image, title, price, quick-view button. _(Card)_ - **Pagination** — Bottom-aligned; supports page-size selection. _(Pagination)_ Components used: Card, FilterChip, FilterDrawer, Input, Select, Pagination. Substitutions (Builder-skill prompts): - `itemNoun` (e.g. "Product") — appears in: Page title + empty-state copy. - `filterFields` (e.g. "Category · Price range · Tag") — appears in: Filter rail. - `cardFields` (e.g. "image, name, price, rating") — appears in: Product card content. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-product-catalogue--preview ### [Product Details](https://cleenui.com/ai-skills/page-templates/product-details) Category: Commerce. *Image gallery + variant selector + buy actions + tabbed detail — the canonical PDP.* Two-column product detail page. Image gallery on the left, product info + variant selector + add-to-cart on the right. Underneath, tabbed sections for description, specifications, and reviews. The canonical product detail surface for any catalog flow. When to use: - Building the detail view that a Product Catalog card opens into. - Anywhere a single record needs both visual hero treatment and structured detail tabs. - Replacing a flat product page that's outgrown its scroll length. Structure: - **Image gallery** — Left column — primary image with thumbnail strip. _(Card)_ - **Product summary** — Right column — title, short description, price. _(Heading, Text)_ - **Variant selector** — Size, color, quantity controls. _(Select, Toggle)_ - **Buy actions** — Primary Add-to-cart + secondary Wishlist or Compare. _(Button)_ - **Detail tabs** — Description / Specifications / Reviews — under the fold. _(Tabs, Text, Table)_ Components used: Card, Heading, Text, Select, Toggle, Button, Tabs, Table. Substitutions (Builder-skill prompts): - `productNoun` (e.g. "Product") — appears in: Page title and CTAs. - `variantOptions` (e.g. "Size · Color") — appears in: Variant selector. - `tabSections` (e.g. "Description · Specifications · Reviews") — appears in: Detail tabs. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-product-details--preview ### [Settings](https://cleenui.com/ai-skills/page-templates/settings) Category: Configuration. *Sectioned form with sidebar nav — the canonical settings page.* The canonical settings surface. A left-rail of section anchors (Profile, Notifications, Security, Billing, etc.) scrolls a right-side form into view. Each section is a card with its own Save/Cancel — so a user editing Notifications doesn't have to also commit to Security changes. When to use: - Building the user-settings or workspace-settings page for a SaaS app. - Any configuration screen with more than three distinct concerns. - Replacing a tab-based settings page that's outgrown its tab bar. Structure: - **Left rail** — Section anchors; scroll-spy highlights the active section. _(VerticalNav)_ - **Section card(s)** — One card per concern; each has its own Save/Cancel row. _(Card, Input, Toggle, Button)_ - **Dangerous zone** — Bottom card for destructive actions (delete account, etc.). _(Card, Button)_ Components used: VerticalNav, Card, Input, Toggle, Button, Heading. Substitutions (Builder-skill prompts): - `sectionList` (e.g. "Profile · Notifications · Security · Billing") — appears in: Left-rail sections and section card headings. - `settingsScope` (e.g. "Workspace") — appears in: Page title. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-settings--preview ### [Wizard](https://cleenui.com/ai-skills/page-templates/wizard) Category: Forms. *Multi-step form with progress, validated transitions, and a review step.* A guided multi-step form. Step indicator at the top with a clear current/done/upcoming state. Each step validates before letting the user advance. A final review step shows everything before the commit so the user has a chance to back up. When to use: - Onboarding flows — 'set up your workspace' across 3–6 steps. - Complex configurations where the user benefits from one-thing-at-a-time. - Form flows where conditional branching makes a single-screen form too overwhelming. Structure: - **Step indicator** — Linear progress across N steps; current step bold, done steps checked. _(Steps)_ - **Step body** — The fields for the current step; renders one step at a time. _(Form, Input, Select, Toggle)_ - **Navigation** — Back (ghost) + Next (primary). Next disables until validation passes. _(Button)_ - **Review step** — Final step — a summary of all answers + Confirm + Edit-this-section affordances. _(Card, Button)_ Components used: Steps, Form, Input, Select, Toggle, Button, Card. Substitutions (Builder-skill prompts): - `stepCount` (e.g. "5") — appears in: Step indicator. - `stepLabels` (e.g. "Workspace · Team · Integrations · Branding · Review") — appears in: Step indicator labels. - `commitLabel` (e.g. "Create workspace") — appears in: Final step's primary action button. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-wizard--preview ### [Detail Screen](https://cleenui.com/ai-skills/page-templates/detail-screen) Category: Record. *Record header + tabbed main + side rail metadata — the canonical record page.* A generic detail view for any single record: order, account, ticket, project. Header strip up top with the record's identity + status + primary actions, a tabbed main area for the heavy content (overview / activity / files / related), and a right-side metadata rail with the fields that don't need to be in the user's face. The template you reach for whenever a user clicks a row. When to use: - Building the page a user lands on after clicking a row in a list. - Surfacing many facets of a single record without losing the at-a-glance summary. - Replacing a 'detail page' that's actually a modal — once a record has more than ~10 fields, it deserves its own page. Structure: - **Record header** — Record name, status pill, primary actions on the right. _(Breadcrumb, Heading, PillBadge, Button)_ - **Tabbed main** — Overview / Activity / Files / Related — the deep content lives here. _(Tabs, Card, EditableCard)_ - **Metadata rail** — Right-side fields: owner, created, modified, tags, IDs. _(Card, InfoLabels, Avatar)_ Components used: Tabs, EditableCard, Avatar, PillBadge, InfoLabels, Breadcrumb, Card. Substitutions (Builder-skill prompts): - `recordNoun` (e.g. "Order") — appears in: Page title, breadcrumb, header. - `tabNames` (e.g. "Overview, Activity, Files") — appears in: Tabs label list. - `metaFields` (e.g. "Owner, Created, Modified, Tags") — appears in: Metadata rail rows. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-detail-screen--preview ### [Empty State](https://cleenui.com/ai-skills/page-templates/empty-state) Category: Edge case. *Illustration + heading + CTA — what users see before any data exists.* The first thing a user sees when a list, table, dashboard, or workspace has nothing in it yet. Designed to make the zero-data case feel intentional — like the app is waiting for them — rather than broken. Pairs with every list, datagrid, dashboard, and detail template to handle the 'I've never used this before' moment. When to use: - Building any screen that can be empty on first visit. - Replacing a 'no results found' line with something that explains what to do next. - Onboarding the first 30 seconds of a brand-new account. Structure: - **Illustration** — Inline SVG or icon — sets the mood, doesn't have to be elaborate. _(Icon)_ - **Headline** — One sentence explaining what's missing. _(Heading)_ - **Supporting copy** — 1–2 sentences on what to do. _(Text)_ - **Primary CTA** — Single action — 'Create your first X'. _(Button)_ Components used: Icon, Heading, Text, Button. Substitutions (Builder-skill prompts): - `itemNoun` (e.g. "customer") — appears in: Headline, CTA label. - `ctaLabel` (e.g. "Create your first customer") — appears in: Button label. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-empty-state--preview ### [Login](https://cleenui.com/ai-skills/page-templates/login) Category: Auth. *Centered auth card with email/password, social options, and password reset.* The canonical sign-in screen. Centered card on a neutral page, logo at the top, email + password fields, primary CTA, divider, social-login row, and a 'forgot password' link in the footer. The goal of a login page is to get out of the user's way — this template optimizes for familiarity. When to use: - Building the unauthenticated entry point for an authenticated app. - Adding social login alongside email/password without redesigning the page. - Replacing a generic auth form with something that matches the rest of the app's polish. Structure: - **Card header** — Logo + 'Welcome back' + 1-line subtitle. _(Heading, Text)_ - **Email + password** — Two fields, labels above, password field with show/hide toggle. _(Input)_ - **Primary CTA** — Full-width 'Sign in' button below the fields. _(Button)_ - **Social row** — Divider with 'or' text, then 2–3 social-provider buttons. _(Button)_ - **Footer link** — 'Forgot password?' and 'Create an account' link line. _(Text)_ Components used: Input, Button, Heading, Text, Checkbox. Substitutions (Builder-skill prompts): - `appName` (e.g. "CleenUI") — appears in: Card header. - `socialProviders` (e.g. "Google, GitHub, Microsoft") — appears in: Social-row buttons. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-login--preview ### [Marketing Landing](https://cleenui.com/ai-skills/page-templates/marketing-landing) Category: Marketing. *Hero + feature grid + social proof + CTA strip — for product or feature launches.* A full marketing page structure for announcing a product, feature, or campaign. Hero with the headline + CTA pair, dim logo row for social proof, three-up feature grid below, and a closing CTA strip. Fast to assemble, slow to grow stale. When to use: - Announcing a new feature, product, or campaign with its own URL. - Replacing a landing page that's grown into 12 stacked sections of noise. - Building the first impression for a marketing-driven audience. Structure: - **Hero** — Centered headline, sub-copy, two CTAs — primary + ghost secondary. _(Heading, Text, Button)_ - **Logo row** — Dim grayscale customer logos — 5–6 in a row. _(Image)_ - **Feature grid** — Three feature cards: icon + headline + 1-paragraph copy. _(Card, Icon, Heading)_ - **Closing CTA** — Repeat the primary CTA on a contrast strip near the bottom. _(Heading, Button)_ Components used: Heading, Button, Card, Icon, Text. Substitutions (Builder-skill prompts): - `productName` (e.g. "CleenUI") — appears in: Hero headline. - `primaryCta` (e.g. "Start free trial") — appears in: Hero + closing CTA buttons. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-marketing-landing--preview ### [Pricing](https://cleenui.com/ai-skills/page-templates/pricing) Category: Marketing. *Tier cards with comparison toggle — pricing as a decision tool, not a wall of text.* Three tier cards across the page, a monthly/annual toggle above, and a feature-comparison table below. Designed to answer 'which plan is right for me?' in under 30 seconds, with progressive depth for the user who needs the full breakdown. When to use: - Building a SaaS pricing page with 2–4 plans. - Surfacing a featured tier without making the others feel like rejects. - Replacing a single CTA + 'contact sales' with something that helps the buyer self-qualify. Structure: - **Page header** — Title, sub-copy, monthly/annual toggle. _(Heading, Text, Toggle)_ - **Tier cards** — Three cards, middle one featured with a 'Most popular' pill. _(Card, Button, PillBadge)_ - **Comparison table** — Feature-by-tier matrix for the user who wants the details. _(DataGrid)_ - **FAQ** — 6–10 questions answered inline. _(Collapsible)_ Components used: Card, Button, PillBadge, Toggle, Collapsible, Heading. Substitutions (Builder-skill prompts): - `tierNames` (e.g. "Starter, Pro, Enterprise") — appears in: Card headings. - `currency` (e.g. "USD") — appears in: Price labels. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-pricing--preview ### [Admin Overview](https://cleenui.com/ai-skills/page-templates/admin-overview) Category: Back office. *Heavy data tables with bulk operations — the back-office workhorse.* The screen that runs the operation. Header strip with system-status pills, dense toolbar with bulk actions (export / archive / reassign / status change), and a high-density DataGrid taking up the full page. For the user who lives in this screen all day and cares about throughput, not aesthetics. When to use: - Building the screen an internal ops user spends 4+ hours a day in. - Surfacing multi-row bulk operations on top of a real-time-ish data source. - Replacing a 'list view' that's grown into something more like a workbench. Structure: - **Status strip** — System-state row at the top: error count, warning count, queue depth. _(PillBadge, Card)_ - **Bulk action bar** — Export, archive, reassign, status change — wide toolbar. _(Button, Menu)_ - **DataGrid** — Full-page dense grid with row checkboxes, pinned filters, infinite scroll. _(DataGrid, FilterDrawer)_ Components used: DataGrid, PillBadge, Button, Menu, FilterDrawer, Card. Substitutions (Builder-skill prompts): - `entityNoun` (e.g. "User") — appears in: Page title + bulk-action labels. - `bulkActions` (e.g. "Export, Archive, Reassign") — appears in: Toolbar buttons. Storybook reference: https://storybook.cleenui.com/?path=/story/examples-admin-overview--preview