Intent UI is an open-source set of copy-and-paste React components for developers building accessible, Tailwind-styled interfaces in their own projects.

What it is

Intent UI is a TypeScript component library distributed under the MIT licence, built on top of React Aria Components and Tailwind CSS. Rather than shipping as a package you install and import, its components are meant to be copied directly into a React project, where they can be edited freely. The project publishes its documentation at intentui.com, along with a separate blocks and templates site at design.intentui.com, and it lists topics including components, design-systems, react, react-aria, react-aria-components, tailwind, tailwind-variants and tailwindcss.

The problem it addresses is the tension between accessibility and control in front-end work. React Aria Components supplies the accessible behaviour, and the README frames the project as "all about keeping the web accessible," while Tailwind CSS supplies styling "right out of the box." Because the code lands in your own repository instead of a dependency, you can adjust markup, classes and structure without working around a package's API surface — which is what the copy-and-paste model is intended to replace: pulling a large, harder-to-customise component dependency into your node_modules.

Key capabilities

• Components are built on React Aria Components, so keyboard and screen-reader behaviour comes from Adobe's accessibility layer rather than being reimplemented.
• Styling is handled with Tailwind CSS, giving usable visuals without a separate theme or CSS file to maintain.
• Tailwind variants is one of the listed topics, indicating variant-driven class composition within the components.
• Components are copied and pasted into a React project rather than installed, so they remain editable at the source level.
• Documentation lives at intentui.com/docs/getting-started/introduction, covering setup and individual component guidance.
• Blocks and templates for assembling design pages are published at design.intentui.com.
• A contribution guide at intentui.com/docs/prologue/contribution-guide governs how new components and fixes are proposed.

Who uses it and how

• React developers who want accessible primitives without auditing a dependency's ARIA attributes, copying the component source straight into an application.
• Teams maintaining a design system, given that the listed topics include design-systems and the copy-in-source approach lets a team fork styling to its own conventions.
• designers and engineers pairing on page assembly, using the blocks and templates at design.intentui.com to lay out screens before refining them.
• Contributors working in TypeScript, submitting components through the published contribution guide; the repository currently carries 1 open issue and has 1,960 stars and 90 forks.

Getting started

The README directs you to intentui.com/docs/getting-started/introduction for the setup instructions, and the core workflow is to copy component code from the documentation into your React project, with Tailwind CSS configured as the styling layer.

How it compares

Intent UI sits on top of React Aria Components and Tailwind CSS rather than competing with them: React Aria Components remains the source of accessible behaviour and Tailwind CSS remains the styling system, while Intent UI contributes the preassembled, editable component code that a project copies in. It therefore occupies the layer between those libraries and a full packaged component dependency, in that you adopt the resulting source files rather than a runtime package.

When to use it — and when not

It suits a self-hoster or app developer who is already running a React project with Tailwind CSS and is willing to own the component code in their repository, accepting that updates arrive by re-copying rather than by bumping a version. It is a poorer fit if you need a published npm package with semver guarantees, if your project does not use Tailwind, or if you would rather not maintain vendored UI code; note also that the README is brief and defers most detail to the documentation site, so the scope and maturity of individual components is best judged there.