← Atlas · Topics: components, landing-pages, inspiration
Untitled UI
- Site
- untitledui.com
- Type
- component library
- Verdict
- Very useful
- Licence
- Conditional licence, mixed
mixedSelected React components marked open source use MIT; paid React and Figma products use a custom licence. Commercial end-product use is allowed, but redistribution, public source exposure and resale as a competing kit are prohibited. React plans include free and paid tiers. - Agent channels
- mcp, cli
- Pricing
- freemium
- Reviewed
What it is
A large Figma design system paired with a React component library. The React documentation follows a crisp white-and-grey visual language with restrained violet accents, while the broader kit covers interface patterns, icons and page layouts. Free components are marked separately from paid material.
When to open it
When you need a detailed, consistent component reference for a SaaS interface, or a Figma kit and React implementation that share a visual system. Use the free component browser to inspect the interaction and API before deciding whether a paid tier is needed.
Most useful
- React Buttons: the component page places a left category tree beside a wide, lightly bordered preview. Its sample row compares destructive red, neutral outline and violet primary actions. The preview includes five sizes and primary, secondary, tertiary, link and destructive variants, as well as icon, loading and disabled states.
- The React landing page keeps its typography and navigation unusually spare: a large black sans headline, pale dotted field and small violet call to action make the kit itself the focus.
Using it with agents
The React docs provide a CLI for adding components and a dedicated MCP integration to browse, search and install them. The free subset is available without purchasing a paid tier; confirm the open-source marker and any component dependencies before installing.
Watch out for
- MIT applies only to components explicitly marked open source. Pro React and Figma products have custom licence terms and may require an appropriate individual or team seat.
- The custom licence allows use in commercial products but prohibits redistribution of source files, publishing raw source in public repositories, or reselling the kit as a competing library or template.
- The Figma and React offers have separate plans; verify which one a price or licence statement describes.
Reusable ideas
- Put a component's common variants and states in one preview so size, hierarchy and disabled/loading behavior are easy to compare.
- A restrained accent color can distinguish the primary action while neutral and destructive variants remain immediately legible.