Introduction
What Gaudi UI patterns are and how to add them to your project.
Vision
Like Gaudí's buildings, every piece stays visible. Nothing hides behind a facade.
Traditional component libraries, such as MUI and Mantine, ship finished components from a
package. You use them through their props and can't change what's inside. Newer libraries, such as
shadcn/ui, copy the source into your project, but still as wrappers: a Button with variant and
size props that your code calls instead of the component underneath.
Gaudi UI ships neither. Each pattern is an example written directly against Base UI, so your code calls Base UI itself and Base UI's docs apply to it as written.
Why Gaudi UI
You own the source
Patterns are copied into your project as React + Tailwind files. There's no Gaudi UI package to install or update.
No wrappers
Patterns use Base UI parts as Base UI documents them, with all of their props.
Accessible by default
Base UI handles focus, keyboard interaction, ARIA and positioning. Patterns keep it that way.
As simple as possible
A pattern only grows when the problem it solves needs it.
Themed in one place
Colors, radius and font are CSS variables in one theme file. Patterns use those variables, not palette colors.
Readable by AI agents
Patterns are plain Base UI code, so an agent needs no Gaudi UI-specific knowledge to work with them.
Patterns
There are three kinds of pattern, from a single control up to a page section. A component pattern is one file with one default export. Pick the one closest to what you need and change it.
Installation
Set up Gaudi UI in your React + Tailwind CSS v4 project once:
npx gaudi-ui@latest initThen add the patterns you need:
npx gaudi-ui@latest add button-loading button-linkBuilt on Base UI
Base UI is an unstyled, accessible component library from the MUI team. Gaudi UI adds patterns built from its parts and a CLI to install them.
Theming
The theme is a set of CSS variables for color, radius and font, kept in one stylesheet. Change a variable there and everything that uses it updates, with no component files edited.
Typography
Text sizes come from a shared type scale, from large display headings down to small captions. Each style is one class, so text stays consistent across your app.
RTL
Every pattern supports right-to-left languages such as Arabic and Hebrew. Set the direction once on your app and patterns follow it.