# Proper UI

> Open-source React 19 component library built for AI-generated code. Behaviour comes from React Aria Components;
> styling is Tailwind CSS v4 resolved through semantic tokens. MIT licensed. Every page below is plain markdown.

## Conventions

- Check the platform first: on a non-React project, write `pui-*` HTML or `<pui-*>` custom elements, never TSX. The rules below apply to React projects; tokens, no `dark:` and logical properties apply everywhere.
- React Aria props: `onPress` not `onClick`, `isDisabled` not `disabled`.
- Semantic tokens only: `bg-primary`, `text-tertiary`, `bg-brand-solid`. Never a raw palette or arbitrary value.
- No `dark:` utilities: a `.dark-mode` ancestor class repoints every token.
- Logical properties for direction: `ms-*`, `pe-*`, `start-*`, `text-start`.
- Icons are passed as component references: `<Button iconLeading={ArrowRight}>`, except inside a React Server
  Component, which needs the element form instead: `<Button iconTrailing={<ArrowRight data-icon="trailing" />}>`.

## Machine-readable endpoints

- [Registry index](https://properui.dev/r/index.json): every component, its layer, type and dependencies.
- Component entry: `https://properui.dev/r/<name>.json` (includes the component's source).
- [components.json schema](https://properui.dev/schema.json).
- Semantic manifest: entries also carry optional `intent`, `avoid_when`, `composes_with`, `a11y_contract`, `responsive_contract`, `token_contract` and `requires_data` fields for choosing a component, not just installing it: see [Registry metadata for agents](https://properui.dev/docs/registry-metadata.md).
- CLI: `npx @properui/cli@latest add <component>` writes the files and resolves dependencies.
- CLI: `npx @properui/cli@latest check` flags raw palette classes and arbitrary values in place of semantic tokens.
- CLI: `npx @properui/cli@latest icons` lists and installs icon components the same way `add` handles the rest of the registry.
- MCP: search screens, flows, sections and components, then plan or run the install. Remote `https://properui.dev/api/mcp` (Streamable HTTP, no account; `search_screens`, `search_sections`, `search_flows`, `search_components`, `compare_screens`, `get_component`, `get_install_plan`) or local `npx -y @properui/mcp` (adds `add_component`, `get_project_info`, `check_tokens`). Overview: [https://properui.dev/mcp](https://properui.dev/mcp); reference: [MCP server](https://properui.dev/docs/mcp.md).
- Non-React projects: `info --json` reports `platform`; on `html` (Vue, Nuxt, Angular, Svelte, Astro, plain HTML) `add <name>` installs the `<name>-html` snippet entry, and [https://properui.dev/css/properui.min.css](https://properui.dev/css/properui.min.css) is a prebuilt stylesheet with the tokens and the `pui-*` component classes. What each platform gets: [Frameworks](https://properui.dev/docs/frameworks.md).
- [Flows](https://properui.dev/flows): curated user journeys (sign up, onboarding, billing and more) as ordered, installable screens; each flow page lists the `add` command for every step.
- Testing components against jsdom needs a few shims React Aria doesn't ship by default: see [Testing](https://properui.dev/docs/testing.md).
- Importing Proper UI into an app with its own Tailwind theme: ten utility names collide and Proper UI's namespaces win regardless of import order; see [Adopting Proper UI](https://properui.dev/docs/adopting.md).

## Pages

- [/](https://properui.dev/)
- [/mcp](https://properui.dev/mcp)
- [/components](https://properui.dev/components)
- [/application-ui](https://properui.dev/application-ui)
- [/marketing](https://properui.dev/marketing)
- [Accessibility](https://properui.dev/docs/accessibility.md): What Proper UI's accessibility testing actually covers: automated axe-core checks in CI, what React Aria provides, and what composition still requires human review.
- [Adopting Proper UI into an existing Tailwind app](https://properui.dev/docs/adopting.md): What happens when Proper UI's theme.css is imported into an app that already has a Tailwind theme, and how to adopt it or remove the old system safely.
- [AI agents & the Proper UI Skill](https://properui.dev/docs/agents.md): One portable Skill for Claude Code, Codex, Cursor and Lovable, plus the two CLI commands that install it and let an agent inspect a project before it writes any UI code.
- [CLI tool](https://properui.dev/docs/cli.md): The Proper UI CLI copies component source into your project and configures Tailwind, straight from the terminal. No copy-pasting required.
- [Component API conventions](https://properui.dev/docs/component-api.md): How Proper UI decides whether a component group is one component or several, the three shapes a compound API takes in this codebase, and the className/children/href idioms that repeat across it.
- [Custom elements](https://properui.dev/docs/elements.md): @properui/elements: Proper UI as light-DOM custom elements for Vue, Angular, Svelte, Astro and plain HTML. Every tag, attribute, event and slot.
- [Dark mode](https://properui.dev/docs/dark-mode.md): Easily swap between light and dark modes with CSS variables.
- [Design tokens (CSS)](https://properui.dev/docs/tokens.md): Use the Proper UI tokens and a prebuilt stylesheet in any project, with or without Tailwind and with or without React.
- [Frameworks](https://properui.dev/docs/frameworks.md): Which Proper UI layer to use in React, Next.js, Vue, Angular, Svelte, Astro, plain HTML and vanilla JS, and exactly which components exist outside React.
- [HTML and vanilla JS](https://properui.dev/docs/html.md): Proper UI without React. CSS component classes on the same tokens, small dependency-free behaviours, and copy-paste HTML snippets.
- [Icons](https://properui.dev/docs/icons.md): Proper UI Icons are a clean, consistent line icon set built for modern interfaces, distributed as tree-shakeable React components.
- [Installation](https://properui.dev/docs/installation.md): This guide walks through installing Proper UI and getting a new or existing project set up quickly.
- [Introduction](https://properui.dev/docs/introduction.md): Proper UI is a collection of React components built on React Aria and styled with Tailwind CSS. Copy the code, own it, and ship faster.
- [Linting](https://properui.dev/docs/linting.md): @properui/eslint-plugin: the ESLint 9 flat-config plugin that flags raw Tailwind palette classes, arbitrary values, dark: variants and physical directional properties inline, with an autofix for the last one.
- [Mapping Figma to the registry](https://properui.dev/docs/figma.md): There is no first-party Proper UI Figma kit yet — Proper UI is visually the Untitled UI design language, so this page is the manual, group-by-group translation from an Untitled UI Figma layer name to a registry entry and its real props.
- [MCP server](https://properui.dev/docs/mcp.md): The Proper UI MCP lets an agent search web-app screens, flows, sections and components, inspect an entry, and plan or run an install. Remote endpoint, local stdio package, every tool, resource and prompt.
- [Quality](https://properui.dev/docs/quality.md): What is actually verified about Proper UI, how it's verified, and what is not: release status, CI checks, clean-room installs, accessibility scope, and known gaps, dated and sourced.
- [Registry metadata for agents](https://properui.dev/docs/registry-metadata.md): The semantic manifest fields on every registry entry (intent, avoid_when, composes_with, a11y_contract, responsive_contract, token_contract and requires_data) and how an agent should use them to choose a component, not just download one.
- [RTL support](https://properui.dev/docs/rtl.md): Build right-to-left interfaces with Proper UI. Arabic, Hebrew, Persian, and other RTL languages are supported through CSS logical properties, not a separate theme.
- [Testing](https://properui.dev/docs/testing.md): How to actually drive Proper UI components in jsdom: the six missing browser APIs, the working recipe for opening each interactive component in a test, and where jsdom's model diverges from a real browser.
- [Theme generator](https://properui.dev/docs/theme-generator.md): Pick a preset or any brand colour, choose a base gray and a radius, and get the CSS, a shareable preset code and the CLI command.
- [Theming](https://properui.dev/docs/theming.md): Learn how to customize Proper UI components effortlessly to make them your own.
- [Typography](https://properui.dev/docs/typography.md): For long-form content like articles or documentation, use our typography styles to ensure consistent formatting. These styles extend the default @tailwindcss/typography plugin.
- [Upgrade guide](https://properui.dev/docs/upgrade.md): How versioning works for Proper UI, how to update the npm package, and how to update components you've copied into your project with the CLI.
- [Angular integration](https://properui.dev/integrations/angular.md): Use Proper UI in Angular with the <pui-*> custom elements and CUSTOM_ELEMENTS_SCHEMA: install, stylesheet, theme toggle and a modal driven by a signal.
- [Astro integration](https://properui.dev/integrations/astro.md): Use Proper UI in Astro: the <pui-*> custom elements (or plain pui- markup) in .astro files, the prebuilt stylesheet, a theme toggle and a modal.
- [Bolt.new integration](https://properui.dev/integrations/bolt.md): Scaffold a Bolt.new project with Proper UI pre-installed, open individual examples in Bolt, or import an existing project by its GitHub URL.
- [Claude Code integration](https://properui.dev/integrations/claude.md): Point Claude Code at Proper UI's registry and CLAUDE.md conventions so it composes screens from real components instead of inventing markup.
- [Codex integration](https://properui.dev/integrations/codex.md): Point Codex at Proper UI's registry with the Proper UI Skill, installed in one command, so it composes screens from real components instead of inventing markup.
- [components.json](https://properui.dev/integrations/components-json.md): components.json is an optional configuration file for the Proper UI CLI, used to customize import aliases and file paths for your project.
- [Cursor integration](https://properui.dev/integrations/cursor.md): Point Cursor at Proper UI's registry with a project rule installed in one command, so Agent mode composes screens from real components instead of inventing markup.
- [Gemini integration](https://properui.dev/integrations/gemini.md): Point Gemini CLI or Gemini-based agents at Proper UI's registry and GEMINI.md conventions so it composes screens from real components.
- [Lovable integration](https://properui.dev/integrations/lovable.md): Set up a Lovable project with Proper UI in minutes: the package installs like any other npm dependency inside Lovable's Vite workspace.
- [MCP integration](https://properui.dev/integrations/mcp.md): @properui/mcp is a Model Context Protocol server, local over stdio and remote at properui.dev/api/mcp, that gives Claude Code, Cursor, Codex, Windsurf and VS Code the Proper UI registry as tools.
- [Monorepo integration](https://properui.dev/integrations/monorepo.md): Consume Proper UI from a Turborepo or pnpm workspace: the workspace protocol, Tailwind source scanning, and TypeScript project references.
- [Next.js integration](https://properui.dev/integrations/nextjs.md): Set up a Next.js App Router or Pages Router project with Proper UI in minutes: providers, dark mode, and Tailwind v4 scanning included.
- [Plain HTML integration](https://properui.dev/integrations/plain-html.md): Use Proper UI on a plain HTML page with no build step: one stylesheet and one script from a CDN, custom elements or pui- markup, a theme toggle and a modal.
- [Replit integration](https://properui.dev/integrations/replit.md): Scaffold a Replit project with Proper UI pre-installed, or import an existing Proper UI project into Replit from its GitHub repo.
- [shadcn CLI integration](https://properui.dev/integrations/shadcn.md): Install any Proper UI component with the shadcn CLI: configure the @properui namespace once and run npx shadcn@latest add @properui/<name>.
- [Svelte integration](https://properui.dev/integrations/svelte.md): Use Proper UI in Svelte 5 and SvelteKit with the <pui-*> custom elements: install, stylesheet, theme toggle and a modal with runes.
- [v0 integration](https://properui.dev/integrations/v0.md): Hand a Proper UI component to v0 and keep iterating on it there: the full source, styles object, and dependencies travel with it.
- [Vanilla JS integration](https://properui.dev/integrations/vanilla-js.md): Use Proper UI from vanilla JavaScript: create and drive <pui-*> elements from script, listen to their events, show toasts and switch themes, with or without a bundler.
- [Vite integration](https://properui.dev/integrations/vite.md): Set up a Vite + React project with Proper UI in minutes: the Tailwind Vite plugin, path aliases, and provider wiring included.
- [Vue integration](https://properui.dev/integrations/vue.md): Use Proper UI in Vue 3 and Nuxt with the <pui-*> custom elements: install, stylesheet, isCustomElement, typed templates, theme toggle and a modal.
- [404 sections](https://properui.dev/components/404-sections.md): Powerful and customizable React 404 sections built for modern applications and websites. These 404 sections are built using React Aria and styled with Tailwind CSS.
- [Activity feed components](https://properui.dev/components/activity-feeds.md): Powerful and customizable React activity feed components built for modern applications and websites. These activity feed components are built using React Aria and styled with Tailwind CSS.
- [Activity gauge components](https://properui.dev/components/activity-gauges.md): Powerful and customizable React activity gauge components built for modern applications and websites. These activity gauges are built using Recharts and styled with Tailwind CSS.
- [AI elements](https://properui.dev/components/ai-elements.md): Accessible React components for AI chat interfaces, built with React Aria and styled with Tailwind CSS. Conversation, streaming messages, markdown responses, reasoning, tool calls, sources, suggestions, a prompt input and a model selector, with no dependency on any AI SDK.
- [Alert components](https://properui.dev/components/alerts.md): Powerful and customizable React alert components built for modern applications and websites. These alert components are built using React Aria and styled with Tailwind CSS.
- [Area chart components](https://properui.dev/components/area-charts.md): Free and open-source React area chart components built for modern applications and websites. These area charts are built using Recharts and styled with Tailwind CSS.
- [Avatar components](https://properui.dev/components/avatars.md): 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.
- [Badge components](https://properui.dev/components/badges.md): 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.
- [Badge group components](https://properui.dev/components/badge-groups.md): Free and open-source React badge group components built for modern applications and websites. These badge groups are built using React Aria and styled with Tailwind CSS.
- [Breadcrumb components](https://properui.dev/components/breadcrumbs.md): Powerful and customizable React breadcrumb components built for modern applications and websites. These breadcrumbs are built using React Aria and styled with Tailwind CSS.
- [Button components](https://properui.dev/components/buttons.md): 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.
- [Button group components](https://properui.dev/components/button-groups.md): 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.
- [Calendar components](https://properui.dev/components/calendars.md): Powerful and customizable React calendar components built for modern applications and websites. These calendars are built using React Aria and styled with Tailwind CSS.
- [Callout components](https://properui.dev/components/callouts.md): Tone-tinted React callout components for inline tips and notices, built for modern applications and websites, styled with Tailwind CSS.
- [Card header components](https://properui.dev/components/card-headers.md): Powerful and customizable React card header components built for modern applications and websites. These card headers are built using React Aria and styled with Tailwind CSS.
- [Carousel components](https://properui.dev/components/carousels.md): Free and open-source React carousel components built for modern applications and websites. These carousels are built using Embla Carousel and styled with Tailwind CSS.
- [Checkbox components](https://properui.dev/components/checkboxes.md): 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.
- [Code editor components](https://properui.dev/components/code-editor.md): Free and open-source React code editor component with syntax highlighting, line numbers, indentation, bracket auto-close and diagnostics. No editor dependency; styled with Tailwind CSS.
- [Code snippet components](https://properui.dev/components/code-snippets.md): Powerful and customizable React code snippet components built for modern applications and websites. These code snippet components are built using React Aria and styled with Tailwind CSS.
- [Color picker components](https://properui.dev/components/color-pickers.md): Powerful and customizable React color picker components built for modern applications and websites. These color pickers are built using React Aria and styled with Tailwind CSS.
- [Combined chart components](https://properui.dev/components/combined-charts.md): Free and open-source React combined chart components — bar + line combos, dual y-axes, waterfalls and funnels — built for modern applications and websites using Recharts and Tailwind CSS.
- [Command menu components](https://properui.dev/components/command-menus.md): Powerful and customizable React command menu components built for modern applications and websites. These command menus are built using React Aria and styled with Tailwind CSS.
- [Confirm dialog components](https://properui.dev/components/confirm-dialogs.md): A React confirmation dialog composed from the modal building blocks, built using React Aria and styled with Tailwind CSS.
- [Content divider components](https://properui.dev/components/content-dividers.md): Powerful and customizable React content divider components built for modern applications and websites. These content dividers are built using React Aria and styled with Tailwind CSS.
- [Context menu components](https://properui.dev/components/context-menus.md): 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.
- [Credit card components](https://properui.dev/components/credit-cards.md): Free and open-source React credit card components built for modern applications and websites. These credit cards are built using React Aria and styled with Tailwind CSS.
- [Dashboards with header navigation](https://properui.dev/components/dashboards-02.md): Powerful and customizable React dashboard examples with a horizontal header navigation layout, built for modern products and web apps. These dashboards are built using React Aria and styled with Tailwind CSS.
- [Dashboards with sidebar navigation](https://properui.dev/components/dashboards.md): Powerful and customizable React dashboard examples with a vertical sidebar navigation layout, built for modern products and web apps. These dashboards are built using React Aria and styled with Tailwind CSS.
- [Data table](https://properui.dev/components/data-table.md): A React data table with sorting, search, faceted and range filters, column visibility, pinning and resizing, row selection with bulk actions, pagination, server-side mode and virtualization. Built on React Aria and styled with Tailwind CSS.
- [Date picker components](https://properui.dev/components/date-pickers.md): Free and open-source React date picker components built for modern applications and websites. These date pickers are built using React Aria and styled with Tailwind CSS.
- [Description list components](https://properui.dev/components/description-lists.md): Accessible React description list components for key-value content, built for modern applications and websites, styled with Tailwind CSS.
- [Drawer components](https://properui.dev/components/drawers.md): Powerful and customizable React drawer components built for modern applications and websites. These drawers are built using React Aria and styled with Tailwind CSS.
- [Dropdown components](https://properui.dev/components/dropdowns.md): Free and open-source React dropdown components built for modern applications and websites. These dropdowns are built using React Aria and styled with Tailwind CSS.
- [Email templates](https://properui.dev/components/email-templates.md): Powerful and customizable React email templates built for modern applications and websites. These email templates are built using React Aria and styled with Tailwind CSS.
- [Empty state components](https://properui.dev/components/empty-states.md): Powerful and customizable React empty state components built for modern applications and websites. These empty states are built using React Aria and styled with Tailwind CSS.
- [Featured icon components](https://properui.dev/components/featured-icons.md): Free and open-source React featured icon components built for modern applications and websites. These featured icons are built using React Aria and styled with Tailwind CSS.
- [File upload components](https://properui.dev/components/file-uploaders.md): Free and open-source React file upload components built for modern applications and websites. These file uploaders are built using React Aria and styled with Tailwind CSS.
- [Filter bar components](https://properui.dev/components/filter-bars.md): Powerful and customizable React filter bar components built for modern applications and websites. These filter bars are built using React Aria and styled with Tailwind CSS.
- [Forgot password pages](https://properui.dev/components/forgot-password-pages.md): Powerful and customizable React password reset pages built for modern applications and websites. These password reset pages are built using React Aria and styled with Tailwind CSS.
- [Gantt chart components](https://properui.dev/components/gantt.md): Free and open-source React Gantt chart components with grouped tasks, drag to move and resize, keyboard editing, dependency arrows and milestones. Built with React Aria and styled with Tailwind CSS.
- [Gradient picker components](https://properui.dev/components/gradient-pickers.md): Powerful and customizable React gradient picker components built for modern applications and websites. These gradient pickers are built using React Aria and styled with Tailwind CSS.
- [Header navigation components](https://properui.dev/components/header-navigations.md): Free and open-source React header navigation components built for modern applications and websites. These header navigations are built using React Aria and styled with Tailwind CSS.
- [Hover card components](https://properui.dev/components/hover-card.md): Free and open-source React hover card components built for modern applications and websites. These hover cards are built using React Aria and styled with Tailwind CSS.
- [Illustration components](https://properui.dev/components/illustrations.md): Free and open-source React illustration components built for modern applications and websites. These illustrations are built using React Aria and styled with Tailwind CSS.
- [Image picker components](https://properui.dev/components/image-pickers.md): Powerful and customizable React image picker components built for modern applications and websites. These image pickers are built using React Aria and styled with Tailwind CSS.
- [Informational pages with header navigation](https://properui.dev/components/informational-pages-02.md): Powerful and customizable React informational page examples with a horizontal header navigation layout, built for modern products and web apps. These informational pages are built using React Aria and styled with Tailwind CSS.
- [Informational pages with sidebar navigation](https://properui.dev/components/informational-pages.md): Powerful and customizable React informational page examples with a vertical sidebar navigation layout, built for modern products and web apps. These informational pages are built using React Aria and styled with Tailwind CSS.
- [Inline CTA components](https://properui.dev/components/inline-ctas.md): Powerful and customizable React inline CTA components built for modern applications and websites. These inline CTAs are built using React Aria and styled with Tailwind CSS.
- [Input field](https://properui.dev/components/inputs.md): 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.
- [Kanban board components](https://properui.dev/components/kanban-boards.md): Free and open-source React kanban board components with drag and drop between columns, keyboard moves and collapsible columns. Built with React Aria and styled with Tailwind CSS.
- [Line & bar chart components](https://properui.dev/components/line-bar-charts.md): Free and open-source React line and bar chart components built for modern applications and websites. These line and bar charts are built using Recharts and styled with Tailwind CSS.
- [Loading indicator components](https://properui.dev/components/loading-indicators.md): Free and open-source React loading indicator components built for modern applications and websites. These loading indicators are built using React Aria and styled with Tailwind CSS.
- [Log in pages](https://properui.dev/components/log-in-pages.md): Powerful and customizable React log in pages built for modern applications and websites. These log in pages are built using React Aria and styled with Tailwind CSS.
- [Menubar components](https://properui.dev/components/menubar.md): Free and open-source React menu bar components built for modern applications and websites. These menubars are built using React Aria and styled with Tailwind CSS.
- [Messaging components](https://properui.dev/components/messaging.md): Powerful and customizable React messaging components built for modern applications and websites. These messaging components are built using React Aria and styled with Tailwind CSS.
- [Metric components](https://properui.dev/components/metrics.md): Powerful and customizable React metric components built for modern applications and websites. These metric components are built using React Aria and styled with Tailwind CSS.
- [Mobile app store button components](https://properui.dev/components/mobile-app-store-buttons.md): Free and open-source React mobile app store button components built for modern applications and websites. These mobile app store buttons are built using React Aria and styled with Tailwind CSS.
- [Modal components](https://properui.dev/components/modals.md): Powerful and customizable React modal components built for modern applications and websites. These modals are built using React Aria and styled with Tailwind CSS.
- [Multi-select components](https://properui.dev/components/multi-select.md): Free and open-source React multi select components built for modern applications and websites. These multi select components are built using React Aria and styled with Tailwind CSS.
- [Notification components](https://properui.dev/components/notifications.md): Powerful and customizable React notification components built for modern applications and websites. These notifications are built using Sonner and styled with Tailwind CSS.
- [Number input components](https://properui.dev/components/number-input.md): Free and open-source React number input components built for modern applications and websites. These number inputs are built using React Aria and styled with Tailwind CSS.
- [Page header components](https://properui.dev/components/page-headers.md): Powerful and customizable React page header components built for modern applications and websites. These page headers are built using React Aria and styled with Tailwind CSS.
- [Pagination components](https://properui.dev/components/pagination.md): Free and open-source React pagination components built for modern applications and websites. These pagination components are built using React Aria and styled with Tailwind CSS.
- [Pie chart components](https://properui.dev/components/pie-charts.md): Powerful and customizable React pie chart components built for modern applications and websites. These pie charts are built using Recharts and styled with Tailwind CSS.
- [Popover components](https://properui.dev/components/popovers.md): A free-form React popover component built for modern applications and websites, built using React Aria and styled with Tailwind CSS.
- [Progress indicator components](https://properui.dev/components/progress-indicators.md): 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.
- [Progress steps components](https://properui.dev/components/progress-steps.md): Powerful and customizable React progress step components built for modern applications and websites. These progress steps are built using React Aria and styled with Tailwind CSS.
- [QR code components](https://properui.dev/components/qr-codes.md): Free and open-source React QR code components built for modern applications and websites. This component is built using QR Code Styling library and styled with Tailwind CSS.
- [Radar chart components](https://properui.dev/components/radar-charts.md): Powerful and customizable React radar chart components built for modern applications and websites. These radar charts are built using Recharts and styled with Tailwind CSS.
- [Radio button components](https://properui.dev/components/radio-buttons.md): 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.
- [Radio group components](https://properui.dev/components/radio-groups.md): Powerful and customizable React radio group components built for modern applications and websites. These radio groups are built using React Aria and styled with Tailwind CSS.
- [Rating badge and stars](https://properui.dev/components/rating-badge-and-stars.md): Free and open-source React rating badge and star components built for modern applications and websites. These rating badge and stars are built using React Aria and styled with Tailwind CSS.
- [Resizable panel components](https://properui.dev/components/resizable-panels.md): Free and open-source React resizable panel components with keyboard-resizable handles, size limits and collapsible panels. Styled with Tailwind CSS.
- [Scatter & bubble chart components](https://properui.dev/components/scatter-bubble-charts.md): Free and open-source React scatter and bubble chart components built for modern applications and websites. These charts are built using Recharts and styled with Tailwind CSS.
- [Scroll area components](https://properui.dev/components/scroll-areas.md): Free and open-source React scroll area components with token-styled scrollbars, fade edges and native, accessible scrolling. Styled with Tailwind CSS.
- [Section footer components](https://properui.dev/components/section-footers.md): Powerful and customizable React section footer components built for modern applications and websites. These section footers are built using React Aria and styled with Tailwind CSS.
- [Section header components](https://properui.dev/components/section-headers.md): Powerful and customizable React section header components built for modern applications and websites. These section headers are built using React Aria and styled with Tailwind CSS.
- [Select components](https://properui.dev/components/select.md): 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.
- [Settings pages with header navigation](https://properui.dev/components/settings-pages-02.md): Powerful and customizable React settings page examples with a horizontal header navigation layout, built for modern products and web apps. These settings pages are built using React Aria and styled with Tailwind CSS.
- [Settings pages with sidebar navigation](https://properui.dev/components/settings-pages.md): Powerful and customizable React settings page examples with a vertical sidebar navigation layout, built for modern products and web apps. These settings pages are built using React Aria and styled with Tailwind CSS.
- [Sidebar navigation components](https://properui.dev/components/sidebar-navigations.md): Free and open-source React sidebar navigation components built for modern applications and websites. These sidebar navigations are built using React Aria and styled with Tailwind CSS.
- [Sign up pages](https://properui.dev/components/sign-up-pages.md): Powerful and customizable React sign up pages built for modern applications and websites. These sign up pages are built using React Aria and styled with Tailwind CSS.
- [Skeleton components](https://properui.dev/components/skeleton.md): Accessible React skeleton loading placeholders built for modern applications and websites, styled with Tailwind CSS.
- [Slider components](https://properui.dev/components/sliders.md): 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.
- [Social button components](https://properui.dev/components/social-buttons.md): Free and open-source React social button components built for modern applications and websites. These social buttons are built using React Aria and styled with Tailwind CSS.
- [Sortable list components](https://properui.dev/components/sortable-lists.md): Free and open-source React sortable list components with drag handles and keyboard reordering. Built with React Aria and styled with Tailwind CSS.
- [Sparkline components](https://properui.dev/components/sparklines.md): Free and open-source React sparkline components for metric cards and table cells, built using Recharts and styled with Tailwind CSS.
- [Stepper components](https://properui.dev/components/stepper.md): Powerful and customizable React stepper components built for modern applications and websites. These form steppers are built using React Aria and styled with Tailwind CSS.
- [Tab components](https://properui.dev/components/tabs.md): Free and open-source React tab components built for modern applications and websites. These tabs are built using React Aria and styled with Tailwind CSS.
- [Table components](https://properui.dev/components/tables.md): Free and open-source React table components built for modern applications and websites. These tables are built using React Aria and styled with Tailwind CSS.
- [Tag components](https://properui.dev/components/tags.md): 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.
- [Tag input components](https://properui.dev/components/tag-input.md): Free and open-source React tag input components built for modern applications and websites. These tag inputs are built using React Aria and styled with Tailwind CSS.
- [Text editor components](https://properui.dev/components/text-editors.md): 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.
- [Textarea input field](https://properui.dev/components/textareas.md): 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.
- [Timeline components](https://properui.dev/components/timeline.md): Powerful and customizable React timeline components built for modern applications and websites. These timelines are built using React Aria patterns and styled with Tailwind CSS.
- [Toggle chip components](https://properui.dev/components/toggle-chips.md): A standalone pressable React toggle chip component built for modern applications and websites, built using React Aria and styled with Tailwind CSS.
- [Toggle field components](https://properui.dev/components/toggles.md): 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.
- [Tooltip components](https://properui.dev/components/tooltips.md): 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.
- [Tree view components](https://properui.dev/components/tree-views.md): Powerful and customizable React tree view components built for modern applications. These tree views are built using React Aria and styled with Tailwind CSS.
- [Utility button components](https://properui.dev/components/utility-buttons.md): Free and open-source React utility button components built for modern applications and websites. These utility buttons are built using React Aria and styled with Tailwind CSS.
- [Verification code input components](https://properui.dev/components/verification-code-inputs.md): Free and open-source React verification code input components built for modern applications and websites. These verification code inputs are built using Input OTP and styled with Tailwind CSS.
- [Verification pages](https://properui.dev/components/verification-pages.md): Powerful and customizable React email verification pages built for modern applications and websites. These email verification pages are built using React Aria and styled with Tailwind CSS.
- [Video player components](https://properui.dev/components/video-players.md): 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.
- [404 pages](https://properui.dev/marketing/404-pages.md): Powerful and customizable React 404 page examples built for modern and responsive websites. These 404 pages are built using React Aria and styled with Tailwind CSS.
- [About pages](https://properui.dev/marketing/about-pages.md): Powerful and customizable React about page examples built for modern and responsive websites. These about pages are built using React Aria and styled with Tailwind CSS.
- [Banners](https://properui.dev/marketing/banners.md): Powerful and customizable React banner section components built for modern and responsive websites. These banner sections are built using React Aria and styled with Tailwind CSS.
- [Blog posts](https://properui.dev/marketing/blog-post-pages.md): Powerful and customizable React blog post examples built for modern and responsive websites. These blog posts are built using React Aria and styled with Tailwind CSS.
- [Blog sections](https://properui.dev/marketing/blog-sections.md): Powerful and customizable React blog section components built for modern and responsive websites. These blog sections are built using React Aria and styled with Tailwind CSS.
- [Blogs](https://properui.dev/marketing/blog-pages.md): Powerful and customizable React blog examples built for modern and responsive websites. These blogs are built using React Aria and styled with Tailwind CSS.
- [Careers sections](https://properui.dev/marketing/careers-sections.md): Powerful and customizable React careers section components built for modern and responsive websites. These careers sections are built using React Aria and styled with Tailwind CSS.
- [Contact pages](https://properui.dev/marketing/contact-pages.md): Powerful and customizable React contact page examples built for modern and responsive websites. These contact pages are built using React Aria and styled with Tailwind CSS.
- [Contact sections](https://properui.dev/marketing/contact-sections.md): Powerful and customizable React contact section components built for modern and responsive websites. These contact sections are built using React Aria and styled with Tailwind CSS.
- [Content rich text sections](https://properui.dev/marketing/content-rich-text-sections.md): Powerful and customizable React content rich text section components built for modern and responsive websites. These content rich text sections are built using React Aria and styled with Tailwind CSS.
- [CTA sections](https://properui.dev/marketing/cta-sections.md): Powerful and customizable React CTA section components built for modern and responsive websites. These CTA sections are built using React Aria and styled with Tailwind CSS.
- [FAQ pages](https://properui.dev/marketing/faq-pages.md): Powerful and customizable React FAQ page examples built for modern and responsive websites. These FAQ pages are built using React Aria and styled with Tailwind CSS.
- [FAQ sections](https://properui.dev/marketing/faq-sections.md): Powerful and customizable React FAQ section components built for modern and responsive websites. These FAQ sections are built using React Aria and styled with Tailwind CSS.
- [Features sections](https://properui.dev/marketing/features-sections.md): Powerful and customizable React features section components built for modern and responsive websites. These features sections are built using React Aria and styled with Tailwind CSS.
- [Footers](https://properui.dev/marketing/footers.md): Powerful and customizable React footer section components built for modern and responsive websites. These footer sections are built using React Aria and styled with Tailwind CSS.
- [Header navigations](https://properui.dev/marketing/header-navigations.md): Powerful and customizable React header navigation components built for modern and responsive websites. These header navigations are built using React Aria and styled with Tailwind CSS.
- [Header sections](https://properui.dev/marketing/header-sections.md): Powerful and customizable React header section components built for modern and responsive websites. These header sections are built using React Aria and styled with Tailwind CSS.
- [Hero header sections](https://properui.dev/marketing/hero-header-sections.md): Powerful and customizable React hero header section components built for modern and responsive websites. These hero header sections are built using React Aria and styled with Tailwind CSS.
- [Landing pages](https://properui.dev/marketing/landing-pages.md): Powerful and customizable React landing page examples built for modern and responsive websites. These landing pages are built using React Aria and styled with Tailwind CSS.
- [Legal pages](https://properui.dev/marketing/legal-pages.md): Powerful and customizable React legal page examples built for modern and responsive websites. These legal pages are built using React Aria and styled with Tailwind CSS.
- [Metrics sections](https://properui.dev/marketing/metrics-sections.md): Powerful and customizable React metrics section components built for modern and responsive websites. These metrics sections are built using React Aria and styled with Tailwind CSS.
- [Newsletter CTA sections](https://properui.dev/marketing/newsletter-cta-sections.md): Powerful and customizable React newsletter CTA section components built for modern and responsive websites. These newsletter CTA sections are built using React Aria and styled with Tailwind CSS.
- [Pricing pages](https://properui.dev/marketing/pricing-pages.md): Powerful and customizable React pricing page examples built for modern and responsive websites. These pricing pages are built using React Aria and styled with Tailwind CSS.
- [Pricing sections](https://properui.dev/marketing/pricing-sections.md): Powerful and customizable React pricing section components built for modern and responsive websites. These pricing sections are built using React Aria and styled with Tailwind CSS.
- [Social proof sections](https://properui.dev/marketing/social-proof-sections.md): Powerful and customizable React social proof section components built for modern and responsive websites. These social proof sections are built using React Aria and styled with Tailwind CSS.
- [Team pages](https://properui.dev/marketing/team-pages.md): Powerful and customizable React team page examples built for modern and responsive websites. These team pages are built using React Aria and styled with Tailwind CSS.
- [Team sections](https://properui.dev/marketing/team-sections.md): Powerful and customizable React team section components built for modern and responsive websites. These team sections are built using React Aria and styled with Tailwind CSS.
- [Testimonials sections](https://properui.dev/marketing/testimonial-sections.md): Powerful and customizable React testimonial section components built for modern and responsive websites. These testimonial sections are built using React Aria and styled with Tailwind CSS.