{ "$schema": "../schema.json", "components": [ { "name": "countries", "layer": "utils", "type": "util", "title": "Countries", "description": "Shared utility used by Proper UI components.", "registryDependencies": [ "select-item-type" ], "dependencies": [], "cssVars": [], "examples": [], "composes_with": [ "select-item-type" ], "fileCount": 1 }, { "name": "cx", "layer": "utils", "type": "util", "title": "Cx", "description": "Shared utility used by Proper UI components.", "registryDependencies": [], "dependencies": [ "tailwind-merge" ], "cssVars": [], "examples": [], "fileCount": 1 }, { "name": "demo-assets", "layer": "utils", "type": "util", "title": "Demo assets", "description": "Shared utility used by Proper UI components.", "registryDependencies": [], "dependencies": [], "cssVars": [], "examples": [], "fileCount": 1 }, { "name": "is-react-component", "layer": "utils", "type": "util", "title": "Is react component", "description": "Shared utility used by Proper UI components.", "registryDependencies": [], "dependencies": [], "cssVars": [], "examples": [], "fileCount": 1 }, { "name": "select-item-type", "layer": "utils", "type": "util", "title": "Select item type", "description": "Shared utility used by Proper UI components.", "registryDependencies": [], "dependencies": [], "cssVars": [], "examples": [], "fileCount": 1 }, { "name": "timezones", "layer": "utils", "type": "util", "title": "Timezones", "description": "Shared utility used by Proper UI components.", "registryDependencies": [ "select-item-type" ], "dependencies": [ "@properui/icons" ], "cssVars": [], "examples": [], "composes_with": [ "select-item-type" ], "fileCount": 1 }, { "name": "use-active-item", "layer": "hooks", "type": "hook", "title": "Use active item", "description": "Shared hook used by Proper UI components.", "registryDependencies": [], "dependencies": [ "react" ], "cssVars": [], "examples": [], "fileCount": 1 }, { "name": "use-breakpoint", "layer": "hooks", "type": "hook", "title": "Use breakpoint", "description": "Shared hook used by Proper UI components.", "registryDependencies": [], "dependencies": [ "react" ], "cssVars": [], "examples": [], "fileCount": 1 }, { "name": "use-clipboard", "layer": "hooks", "type": "hook", "title": "Use clipboard", "description": "Shared hook used by Proper UI components.", "registryDependencies": [], "dependencies": [ "react" ], "cssVars": [], "examples": [], "fileCount": 1 }, { "name": "use-resize-observer", "layer": "hooks", "type": "hook", "title": "Use resize observer", "description": "Shared hook used by Proper UI components.", "registryDependencies": [], "dependencies": [ "react" ], "cssVars": [], "examples": [], "fileCount": 1 }, { "name": "styles", "layer": "styles", "type": "style", "title": "Styles", "description": "Theme tokens, globals and typography for Proper UI.", "registryDependencies": [], "dependencies": [], "cssVars": [], "examples": [], "token_contract": [ "bg-brand-primary", "bg-brand-primary_alt", "bg-brand-secondary", "bg-brand-section", "bg-brand-section_subtle", "bg-brand-solid", "bg-brand-solid_hover", "bg-error-primary", "bg-error-secondary", "bg-error-solid", "bg-error-solid_hover", "bg-overlay", "bg-primary", "bg-primary-solid", "bg-primary_alt", "bg-primary_hover", "bg-quaternary", "bg-secondary", "bg-secondary-solid", "bg-secondary_alt", "bg-secondary_hover", "bg-success-primary", "bg-success-secondary", "bg-success-solid", "bg-tertiary", "bg-warning-primary", "bg-warning-secondary", "bg-warning-solid", "border-brand", "border-brand_alt", "border-error", "border-error_subtle", "border-primary", "border-secondary", "border-secondary_alt", "border-tertiary", "text-brand-primary", "text-brand-secondary", "text-brand-secondary_hover", "text-brand-tertiary", "text-brand-tertiary_alt", "text-editor-icon-fg", "text-editor-icon-fg_active", "text-error-primary", "text-error-primary_hover", "text-placeholder", "text-primary", "text-primary_on-brand", "text-quaternary", "text-quaternary_on-brand", "text-secondary", "text-secondary_hover", "text-secondary_on-brand", "text-success-primary", "text-tertiary", "text-tertiary_hover", "text-tertiary_on-brand", "text-warning-primary" ], "fileCount": 3 }, { "name": "providers", "layer": "utils", "type": "component", "title": "Providers", "description": "ThemeProvider and RouterProvider — the two providers a Proper UI app wraps its root in.", "registryDependencies": [], "dependencies": [ "next", "next-themes", "react-aria-components" ], "cssVars": [], "examples": [], "fileCount": 3 }, { "name": "avatar", "layer": "base", "type": "component", "title": "Avatar components", "description": "Free and open-source React avatar components built for modern applications and websites. These avatars are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [ "@properui/icons", "react", "react-aria-components" ], "cssVars": [], "examples": [ "avatar", "avatar-example", "border-example", "company-logo-example", "group-example", "initials-example", "label-group-example", "placeholder-example", "profile-photo", "profile-photo-initials-example", "profile-photo-placeholder-example", "status-indicator-example", "verified-badge-example" ], "docs": "/components/avatars", "intent": "Show who or what an item belongs to — a user, team, or company — as a compact image or initials.", "avoid_when": [ "identifying more than one person at once (use avatar-label-group or a stacked list)", "the only way to identify a user (pair it with a visible name)" ], "composes_with": [ "avatar-label-group", "dropdown", "table", "activity-feed", "messaging" ], "a11y_contract": [ "caller must supply `alt` describing the person/entity — the component does not infer one", "falls back to initials or an icon when `src` is missing or fails to load, but does not auto-generate accessible text for that fallback" ], "requires_data": [ "src (image URL) or initials, so the avatar renders a meaningful identity — the placeholder icon alone carries none" ], "token_contract": [ "bg-fg-error-primary", "bg-fg-success-secondary", "bg-primary", "bg-primary-solid", "bg-primary_hover", "bg-tertiary", "bg-utility-neutral-300", "border-primary", "text-fg-quaternary", "text-fg-quaternary_hover", "text-primary", "text-quaternary", "text-tertiary", "text-utility-blue-500" ], "fileCount": 10 }, { "name": "badges", "layer": "base", "type": "component", "title": "Badge components", "description": "Free and open-source React badge components built for modern applications and websites. These badges are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx", "is-react-component" ], "dependencies": [ "@properui/icons", "react" ], "cssVars": [], "examples": [ "badge-example", "badge-group-example", "color", "color-with-icon-leading", "color-with-icon-only", "color-with-icon-trailing", "modern", "modern-leading-brand", "modern-leading-error", "modern-leading-gray", "modern-leading-success", "modern-leading-warning", "modern-trailing-brand", "modern-trailing-error", "modern-trailing-gray", "modern-trailing-success", "modern-trailing-warning", "modern-with-icon-leading", "modern-with-icon-only", "modern-with-icon-trailing", "pill-color", "pill-color-leading-brand", "pill-color-leading-error", "pill-color-leading-gray", "pill-color-leading-success", "pill-color-leading-warning", "pill-color-trailing-brand", "pill-color-trailing-error", "pill-color-trailing-gray", "pill-color-trailing-success", "pill-color-trailing-warning", "with-avatar", "with-avatar-badge-color", "with-avatar-badge-modern", "with-close-x", "with-close-x-badge-color", "with-close-x-badge-modern", "with-dot", "with-dot-badge-color", "with-dot-badge-modern", "with-flag", "with-flag-badge-color", "with-flag-badge-modern", "with-icon-leading", "with-icon-only", "with-icon-trailing" ], "docs": "/components/badges", "intent": "Label an item with a short status, category, or count using a color-coded tag.", "avoid_when": [ "interactive filtering or removable multi-select input (use tags)", "the sole indicator of a critical state — color alone should never be the only signal" ], "composes_with": [ "badge-groups", "table", "avatar", "tabs" ], "a11y_contract": [ "decorative dot/leading/trailing icons are marked aria-hidden by the component", "the close/remove button on a removable badge takes its aria-label from the caller-supplied `buttonLabel` — set it or the control announces nothing useful" ], "requires_data": [ "a short text label; the color prop conveys meaning only visually, not to assistive tech" ], "token_contract": [ "bg-primary", "bg-secondary", "bg-utility-blue-100", "bg-utility-blue-50", "bg-utility-brand-100", "bg-utility-brand-50", "bg-utility-brand-500", "bg-utility-green-100", "bg-utility-green-50", "bg-utility-green-500", "bg-utility-indigo-100", "bg-utility-indigo-50", "bg-utility-neutral-100", "bg-utility-neutral-50", "bg-utility-neutral-500", "bg-utility-orange-100", "bg-utility-orange-50", "bg-utility-pink-100", "bg-utility-pink-50", "bg-utility-purple-100", "bg-utility-purple-50", "bg-utility-red-100", "bg-utility-red-50", "bg-utility-red-500", "bg-utility-sky-100", "bg-utility-sky-50", "bg-utility-slate-100", "bg-utility-slate-50", "bg-utility-yellow-100", "bg-utility-yellow-50", "bg-utility-yellow-500", "text-secondary", "text-utility-blue-400", "text-utility-blue-500", "text-utility-blue-700", "text-utility-brand-400", "text-utility-brand-500", "text-utility-brand-700", "text-utility-green-400", "text-utility-green-500", "text-utility-green-700", "text-utility-indigo-400", "text-utility-indigo-500", "text-utility-indigo-700", "text-utility-neutral-400", "text-utility-neutral-500", "text-utility-neutral-700", "text-utility-orange-400", "text-utility-orange-500", "text-utility-orange-700", "text-utility-pink-400", "text-utility-pink-500", "text-utility-pink-700", "text-utility-purple-400", "text-utility-purple-500", "text-utility-purple-700", "text-utility-red-400", "text-utility-red-500", "text-utility-red-700", "text-utility-sky-400", "text-utility-sky-500", "text-utility-sky-700", "text-utility-slate-400", "text-utility-slate-500", "text-utility-slate-700", "text-utility-yellow-400", "text-utility-yellow-500", "text-utility-yellow-700" ], "fileCount": 3 }, { "name": "button-group", "layer": "base", "type": "component", "title": "Button group components", "description": "Free and open-source React button group components built for modern applications and websites. These button groups are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx", "is-react-component" ], "dependencies": [ "react", "react-aria-components" ], "cssVars": [], "examples": [ "button-group-example", "disabled", "disabled-individual-item", "leading-icon", "multiple-selection", "selection", "with-dot" ], "docs": "/components/button-groups", "intent": "Let a user pick one option from a small, always-visible set of mutually exclusive actions (e.g. list/grid view toggle).", "avoid_when": [ "more than ~5 options, or options that need scrolling (use tabs or select)", "multiple simultaneous selections are allowed (this is single-select by default)" ], "composes_with": [ "buttons", "tabs" ], "a11y_contract": [ "built on React Aria ToggleButtonGroup/ToggleButton — roving-tabindex keyboard navigation and aria-pressed/selection state come for free", "icon-only items still need an accessible name from the caller (visible text or aria-label)" ], "requires_data": [ "2+ ButtonGroupItem children with distinguishable labels or icons" ], "token_contract": [ "bg-primary", "bg-primary_hover", "text-fg-quaternary", "text-fg-quaternary_hover", "text-secondary", "text-secondary_hover" ], "fileCount": 1 }, { "name": "buttons", "layer": "base", "type": "component", "title": "Button components", "description": "Free and open-source React button components built for modern applications and websites. These buttons are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx", "is-react-component", "tooltip" ], "dependencies": [ "@properui/icons", "react", "react-aria-components" ], "cssVars": [], "examples": [ "app-gallery-buttons", "app-gallery-outline-buttons", "app-store-buttons", "app-store-outline-buttons", "apple-social-buttons", "brand-social-buttons-group", "button-example", "close-x", "close-x-dark", "color-social-buttons-group", "disabled", "disabled-buttons-example", "dribble-social-buttons", "facebook-social-buttons", "figma-social-buttons", "galaxy-store-buttons", "galaxy-store-outline-buttons", "google-play-buttons", "google-play-outline-buttons", "google-social-buttons", "gray-social-buttons-group", "icon-leading-buttons-example", "icon-only-buttons-example", "icon-trailing-buttons-example", "icons-brand-social-buttons-group", "icons-color-social-buttons-group", "link-color-buttons-example", "link-gray-buttons", "loading-buttons-example", "mobile-app-store-buttons-example", "primary-buttons", "primary-buttons-destructive-example", "secondary", "secondary-buttons", "secondary-buttons-destructive", "sizes", "social-buttons-example", "tertiary", "tertiary-buttons", "tertiary-buttons-destructive", "twitter-social-buttons", "utility-buttons-example" ], "docs": "/components/buttons", "intent": "Trigger a single primary action — submit, navigate, confirm, or run a command.", "avoid_when": [ "toggling a persistent on/off state (use toggle)", "navigating within a large set of peer destinations (use tabs or app-navigation)" ], "composes_with": [ "button-group", "modals", "page-headers", "card-headers", "empty-state" ], "a11y_contract": [ "built on React Aria Button/Link — keyboard activation (Enter/Space), disabled state and correct role come for free", "icon-only buttons (ButtonUtility, CloseButton, social/app-store icon buttons) need an aria-label from the caller; CloseButton and the app-store icon buttons ship a sensible default but it should be overridden when the action's meaning changes" ], "requires_data": [ "visible label text, or an aria-label when icon-only" ], "token_contract": [ "bg-brand-solid", "bg-brand-solid_hover", "bg-error-primary", "bg-error-solid", "bg-error-solid_hover", "bg-primary", "bg-primary_hover", "text-brand-secondary", "text-brand-secondary_hover", "text-error-primary", "text-error-primary_hover", "text-fg-brand-secondary_alt", "text-fg-brand-secondary_hover", "text-fg-error-primary", "text-fg-error-secondary", "text-fg-primary", "text-fg-quaternary", "text-fg-quaternary_hover", "text-fg-white", "text-secondary", "text-secondary_hover", "text-tertiary", "text-tertiary_hover" ], "fileCount": 7 }, { "name": "checkbox", "layer": "base", "type": "component", "title": "Checkbox components", "description": "Free and open-source React checkbox components built for modern applications and websites. These checkboxes are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [ "react-aria-components" ], "cssVars": [], "examples": [ "base", "checkbox-example", "disabled", "sizes", "with-label", "with-label-and-hint" ], "docs": "/components/checkboxes", "intent": "Capture a single independent on/off or tri-state choice within a form.", "avoid_when": [ "choosing exactly one option from a mutually exclusive set (use radio-buttons)", "an immediate, form-free settings toggle (use toggle)" ], "composes_with": [ "form", "input", "table" ], "a11y_contract": [ "built on React Aria Checkbox — keyboard toggling (Space), checked/indeterminate/disabled state and `role=\"checkbox\"` come for free", "the visible label passed as children is associated with the control automatically; an icon-only checkbox still needs its own aria-label" ], "requires_data": [ "a visible label describing what is being agreed to or selected" ], "token_contract": [ "bg-brand-solid", "bg-primary", "bg-tertiary", "text-fg-white", "text-secondary", "text-tertiary" ], "fileCount": 1 }, { "name": "dropdown", "layer": "base", "type": "component", "title": "Context menu components", "description": "Free and open-source React context menu components built for modern applications and websites. Trigger these menus with a right-click, long-press, or the keyboard menu key, built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "avatar", "buttons", "checkbox", "cx", "demo-assets", "integration-icons", "radio-buttons", "toggle" ], "dependencies": [ "@properui/icons", "react", "react-aria", "react-aria-components" ], "cssVars": [], "examples": [ "account-breadcrumb", "account-button", "account-card-md", "account-card-sm", "account-card-xs", "advanced", "avatar", "button-advanced", "button-link", "button-simple", "context-menu-example", "dropdown-example", "icon-advanced", "icon-simple", "integrations", "search-advanced", "search-simple", "simple" ], "docs": "/components/context-menus", "intent": "Show a menu of actions or a compact set of choices anchored to a trigger, without leaving the page.", "avoid_when": [ "the option list is long and needs search/filtering as a form field (use select or command-menu)", "the trigger must always display the current value inline (use select)" ], "composes_with": [ "buttons", "avatar", "badges", "table", "app-navigation" ], "a11y_contract": [ "built on React Aria Menu/SubmenuTrigger — keyboard navigation (arrow keys, type-ahead, Escape to close) and focus management come for free", "icon-only trigger variants ship a default aria-label (e.g. \"Open menu\"); override it when the trigger's purpose isn't generic" ], "requires_data": [ "one or more MenuItem entries with a visible label; icon and avatar are optional decoration" ], "token_contract": [ "bg-border-secondary", "bg-fg-success-secondary", "bg-primary", "bg-primary_alt", "bg-primary_hover", "bg-secondary_alt", "bg-utility-neutral-300", "border-secondary", "text-brand-secondary", "text-fg-brand-primary", "text-fg-quaternary", "text-fg-quaternary_hover", "text-placeholder", "text-primary", "text-quaternary", "text-secondary", "text-secondary_hover", "text-tertiary" ], "fileCount": 18 }, { "name": "file-upload-trigger", "layer": "base", "type": "component", "title": "File upload trigger", "description": "", "registryDependencies": [], "dependencies": [ "@react-aria/utils", "react" ], "cssVars": [], "examples": [], "intent": "Wrap any pressable element so activating it opens the OS file picker (or camera), without building a custom ``.", "avoid_when": [ "a drag-and-drop drop zone with per-file progress UI is needed (use file-upload)" ], "composes_with": [ "buttons", "image-picker", "file-upload" ], "a11y_contract": [ "clones its single child and wires the native file input — the child must already be an accessible, focusable trigger (e.g. a Button); this component adds no label of its own" ], "requires_data": [ "a single pressable child element to act as the trigger; an onSelect handler to receive the chosen FileList" ], "fileCount": 1 }, { "name": "form", "layer": "base", "type": "component", "title": "Form", "description": "", "registryDependencies": [], "dependencies": [ "react", "react-aria-components", "react-hook-form" ], "cssVars": [], "examples": [], "intent": "Group form fields into a single submit/validation boundary.", "avoid_when": [ "laying out read-only key/value content (use a plain list or table)" ], "composes_with": [ "input", "checkbox", "radio-buttons", "select", "textarea", "buttons" ], "a11y_contract": [ "built on React Aria Form — surfaces native and custom field validation errors and associates them with their fields automatically" ], "requires_data": [ "form field children; the hook-form variant additionally requires a react-hook-form `UseFormReturn` instance" ], "fileCount": 2 }, { "name": "input", "layer": "base", "type": "component", "title": "Input field", "description": "Free and open-source React input field components built for modern applications and websites. These input fields are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "buttons", "cx", "payment-icons", "tags", "tooltip" ], "dependencies": [ "@properui/icons", "@react-stately/utils", "input-otp", "react", "react-aria-components" ], "cssVars": [], "examples": [ "date-input", "default", "disabled", "file-upload", "four-digits", "input-example", "input-otp", "invalid", "leading-dropdown", "leading-icon", "leading-text", "number-input-horizontal", "number-input-vertical", "password-input", "payment-input", "sizes", "tag-input", "tag-input-outer", "trailing-button", "trailing-dropdown", "verification-code-input-example", "with-separator" ], "docs": "/components/inputs", "intent": "Collect a single line of free-text, numeric, date, tag, or payment-card value in a form.", "avoid_when": [ "the value is chosen from a fixed list (use select)", "multi-line free text is expected (use textarea)" ], "composes_with": [ "form", "label", "hint-text", "input-group" ], "a11y_contract": [ "built on React Aria TextField/Input — associates the visible `label` with the field and wires validation state automatically; without a visible label it falls back to an aria-label built from `placeholder`", "the password-visibility toggle and the \"more information\" tooltip icon button ship their own aria-labels", "pin-input labels each digit slot individually (\"Enter digit N of M\") so screen reader users get positional context" ], "requires_data": [ "a `label` (or at minimum a placeholder) so the field has an accessible name" ], "token_contract": [ "bg-brand-solid", "bg-fg-brand-primary", "bg-primary", "bg-primary_hover", "border-brand", "border-error", "border-error_subtle", "border-primary", "text-brand-tertiary", "text-brand-tertiary_alt", "text-error-primary", "text-fg-error-secondary", "text-fg-quaternary", "text-fg-quaternary_hover", "text-placeholder", "text-primary", "text-quaternary", "text-secondary", "text-tertiary", "text-utility-neutral-300" ], "fileCount": 12 }, { "name": "progress-indicators", "layer": "base", "type": "component", "title": "Progress indicator components", "description": "Free and open-source React progress indicator components built for modern applications and websites. These progress indicators are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [], "cssVars": [], "examples": [ "circle-progress-bar", "circle-progress-bar-label", "default", "half-circle-progress-bar", "half-circle-progress-bar-label", "progress-indicator-example", "text-bottom", "text-bottom-floating", "text-right", "text-top-floating" ], "docs": "/components/progress-indicators", "intent": "Show how far a determinate, ongoing process (upload, multi-step task, loading) has progressed.", "avoid_when": [ "the process has no known end point or percentage (use loading-indicator)" ], "composes_with": [ "file-upload", "progress-steps", "metrics" ], "a11y_contract": [ "renders `role=\"progressbar\"` with aria-valuenow/min/max wired to the value/min/max props automatically; a default aria-label of \"Progress\" applies unless the caller supplies `label`" ], "requires_data": [ "a numeric `value` (and optionally min/max) representing real progress" ], "token_contract": [ "bg-fg-brand-primary", "bg-primary_alt", "bg-quaternary", "text-primary", "text-secondary", "text-tertiary" ], "fileCount": 3 }, { "name": "radio-buttons", "layer": "base", "type": "component", "title": "Radio button components", "description": "Free and open-source React radio button components built for modern applications and websites. These radio buttons are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [ "react", "react-aria-components" ], "cssVars": [], "examples": [ "avatar", "checkbox", "disabled", "disabled-individual-option", "icon-card", "icon-simple", "payment-icon", "radio-button", "radio-button-example", "sizes", "with-label", "with-label-and-hint" ], "docs": "/components/radio-buttons", "intent": "Let a user choose exactly one option from a small, always-visible set of mutually exclusive choices.", "avoid_when": [ "more than ~6 options, or the list needs to scroll (use select)", "multiple selections are valid (use checkbox)" ], "composes_with": [ "form", "input" ], "a11y_contract": [ "built on React Aria RadioGroup/Radio — roving-tabindex arrow-key navigation and checked-state semantics come for free; the group itself still needs an aria-label or a visible label element since RadioGroup has no default accessible name" ], "requires_data": [ "2+ options with visible text labels; a group-level label or aria-label" ], "token_contract": [ "bg-brand-solid", "bg-fg-white", "bg-primary", "bg-tertiary", "text-secondary", "text-tertiary" ], "fileCount": 1 }, { "name": "select", "layer": "base", "type": "component", "title": "Select components", "description": "Free and open-source React select components built for modern applications and websites. These select components are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "avatar", "badges", "buttons", "checkbox", "cx", "featured-icon", "input", "is-react-component", "select-item-type", "tags", "use-resize-observer" ], "dependencies": [ "@properui/icons", "react", "react-aria", "react-aria-components" ], "cssVars": [], "examples": [ "avatar-leading", "default", "disabled", "dot-leading", "icon-leading", "multi-select-example", "search", "select-example", "sizes", "tags", "with-leading-icon" ], "docs": "/components/select", "intent": "Choose one (or, in the multi-select/tag-select variants, several) values from a list too long to show as visible options.", "avoid_when": [ "there are only 2-4 options that could stay visible (use radio-buttons or button-group)", "free-text entry with suggestions is the goal without a fixed option set" ], "composes_with": [ "form", "tags", "avatar" ], "a11y_contract": [ "built on React Aria Select/ComboBox/ListBox — keyboard navigation, type-ahead and selected-state semantics come for free; falls back to an aria-label built from `placeholder` when no visible label is supplied", "the multi-select search field and options listbox each carry their own default aria-label (\"Search\", \"Options\") when otherwise unlabelled" ], "requires_data": [ "a list of options with stable keys and visible labels" ], "token_contract": [ "bg-primary", "bg-primary_hover", "border-secondary", "text-fg-brand-primary", "text-fg-quaternary", "text-placeholder", "text-primary", "text-quaternary", "text-secondary", "text-tertiary" ], "fileCount": 8 }, { "name": "slider", "layer": "base", "type": "component", "title": "Slider components", "description": "Free and open-source React slider components built for modern applications and websites. These sliders are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [ "react-aria-components" ], "cssVars": [], "examples": [ "bottom-label", "default", "single-thumb", "slider-example", "top-floating" ], "docs": "/components/sliders", "intent": "Pick a numeric value (or range) by dragging a handle along a track.", "avoid_when": [ "exact numeric entry matters more than a quick visual adjustment (use a numeric input)" ], "composes_with": [ "form", "video-player", "gradient-picker" ], "a11y_contract": [ "built on React Aria Slider — arrow-key value adjustment and aria-valuenow/min/max come for free; the component renders a visually-hidden default label only when the caller has not already supplied aria-label/aria-labelledby, to avoid failing the axe \"form elements must have labels\" rule" ], "requires_data": [ "an accessible name (aria-label/aria-labelledby) unless a visible label is provided separately" ], "token_contract": [ "bg-brand-solid", "bg-primary", "bg-quaternary", "bg-slider-handle-bg", "text-primary", "text-secondary" ], "fileCount": 1 }, { "name": "tags", "layer": "base", "type": "component", "title": "Tag components", "description": "Free and open-source React tag components built for modern applications and websites. These tags are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [ "@properui/icons", "react", "react-aria-components" ], "cssVars": [], "examples": [ "checkbox-close-x-example", "checkbox-count-example", "checkbox-example", "close-x-example", "count-example", "sizes-example", "tags-example" ], "docs": "/components/tags", "intent": "Display, and let a user select or remove, short chip-style values — e.g. active filters or multi-value entry.", "avoid_when": [ "values are read-only status labels rather than user-manipulable chips (use badges)" ], "composes_with": [ "input", "select", "filter-bar" ], "a11y_contract": [ "built on React Aria TagGroup/Tag — keyboard navigation and selection/removal semantics come for free; the group requires a `label` prop, passed through as its aria-label" ], "requires_data": [ "a `label` describing the group of tags, and a list of tag values" ], "token_contract": [ "bg-brand-solid", "bg-primary", "bg-primary_hover", "bg-tertiary", "text-fg-quaternary", "text-fg-quaternary_hover", "text-fg-success-secondary", "text-fg-white", "text-secondary" ], "fileCount": 3 }, { "name": "text-editor", "layer": "base", "type": "component", "title": "Text editor components", "description": "Powerful and customizable React text editor components built for modern applications and websites. Compose a toolbar from bold, italic, underline, colour, alignment, list, link, image and font controls around a resizable editable area.", "registryDependencies": [ "cx" ], "dependencies": [ "@properui/icons", "react", "react-aria-components" ], "cssVars": [], "examples": [ "default-md", "default-sm", "floating-toolbar-md", "floating-toolbar-sm", "text-editor-example", "with-tooltip" ], "docs": "/components/text-editors", "intent": "Let a user compose formatted rich text (bold, lists, links, images, color) rather than a single plain string.", "avoid_when": [ "plain, unformatted text is all that's needed (use textarea)" ], "composes_with": [ "form", "messaging", "code-snippet" ], "a11y_contract": [ "the editable region gets `aria-multiline=\"true\"` and a default aria-label of \"Text editor\" (override via the aria-label prop); the toolbar and each toolbar group carry their own default aria-labels (\"Text formatting\" / \"Selection formatting\") so screen readers can identify each control cluster", "decorative separators between toolbar groups are aria-hidden" ], "responsive_contract": [ "the toolbar's color-swatch and font-size controls narrow below the md breakpoint" ], "requires_data": [ "initial content, and an onChange-style handler if the value should be controlled" ], "token_contract": [ "bg-border-primary", "bg-brand-solid", "bg-brand-solid_hover", "bg-fg-brand-primary", "bg-primary", "bg-primary_hover", "text-brand-secondary", "text-editor-icon-fg_active", "text-fg-quaternary", "text-fg-quaternary_hover", "text-placeholder", "text-primary", "text-primary_on-brand", "text-tertiary" ], "fileCount": 5 }, { "name": "textarea", "layer": "base", "type": "component", "title": "Textarea input field", "description": "Free and open-source React textarea input field components built for modern applications and websites. These textarea input fields are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx", "input" ], "dependencies": [ "react", "react-aria-components" ], "cssVars": [], "examples": [ "default", "disabled", "invalid", "textarea-example" ], "docs": "/components/textareas", "intent": "Collect multi-line free-text input in a form (comments, descriptions, messages).", "avoid_when": [ "a single line of text is expected (use input)", "rich formatting is required (use text-editor)" ], "composes_with": [ "form", "label", "hint-text" ], "a11y_contract": [ "built on React Aria TextField/TextArea — associates the visible label with the field and surfaces `aria-invalid` automatically when validation fails" ], "requires_data": [ "a visible label (or aria-label) so the field has an accessible name" ], "token_contract": [ "bg-primary", "text-placeholder", "text-primary" ], "fileCount": 1 }, { "name": "toggle", "layer": "base", "type": "component", "title": "Toggle field components", "description": "Free and open-source React toggle field components built for modern applications and websites. These toggle fields are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [ "react-aria-components" ], "cssVars": [], "examples": [ "base", "disabled", "sizes", "slim", "slim-with-label-and-hint", "toggle-example", "with-label", "with-label-and-hint" ], "docs": "/components/toggles", "intent": "Let a user immediately switch a single setting on or off, applied right away rather than staged for form submit.", "avoid_when": [ "the change should wait for an explicit form submit (use checkbox)", "there are more than two states" ], "composes_with": [ "form", "table", "notifications" ], "a11y_contract": [ "built on React Aria Switch — `role=\"switch\"`, keyboard toggling and checked-state semantics come for free; visible children become the accessible label, so an icon-only toggle still needs an aria-label" ], "requires_data": [ "a visible label describing the setting being toggled" ], "token_contract": [ "bg-brand-solid", "bg-brand-solid_hover", "bg-fg-white", "bg-tertiary", "border-toggle-border", "border-toggle-slim-border_pressed", "border-toggle-slim-border_pressed-hover", "text-secondary", "text-tertiary" ], "fileCount": 1 }, { "name": "tooltip", "layer": "base", "type": "component", "title": "Tooltip components", "description": "Free and open-source React tooltip components built for modern applications and websites. These tooltips are built using React Aria and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [ "react-aria-components" ], "cssVars": [], "examples": [ "default-example", "placements-example", "tooltip-example", "with-arrow-example", "with-supporting-text-example" ], "docs": "/components/tooltips", "intent": "Reveal a short supplementary hint for a control on hover or focus, without adding it to the tab order.", "avoid_when": [ "the content is essential to complete the task — tooltips aren't reliably reachable on touch, so put essential info in visible text instead", "the content is longer than a short phrase (use a popover or dialog)" ], "composes_with": [ "buttons", "input", "badges", "gradient-picker" ], "a11y_contract": [ "built on React Aria Tooltip/TooltipTrigger — shows on hover and keyboard focus of the trigger and is associated with it via `aria-describedby` automatically" ], "requires_data": [ "a focusable/hoverable trigger element and short hint text" ], "token_contract": [ "bg-primary-solid", "text-tooltip-supporting-text" ], "fileCount": 1 }, { "name": "video-player", "layer": "base", "type": "component", "title": "Video player components", "description": "Powerful and customizable React video player components built for modern applications and websites. These video players are built using React and styled with Tailwind CSS.", "registryDependencies": [ "cx" ], "dependencies": [ "@properui/icons", "react", "react-aria-components" ], "cssVars": [], "examples": [ "video-player-example", "video-player-lg", "video-player-md", "video-player-sm" ], "docs": "/components/video-players", "intent": "Play a single video with custom playback controls (play/pause, seek, volume, speed, fullscreen).", "avoid_when": [ "embedding a video with no custom controls is enough (use a plain