Glin UIRadix UIBrand marks belong to their owners and are shown for compatibility, via thesvg.org.
Radix UI
Radix UI components, styled with Glin UI
Glin UI sits on top of Radix UI primitives. You keep the keyboard and focus behavior, and get styling, tokens, variants, and animations on top. Here is what that trade looks like.
The short version
Radix UI handles the hard parts of accessible interaction: dialogs, menus, popovers, selects, and more. It leaves the visual design to you.
Glin UI is one way to fill that gap. Components are wired to OKLCH tokens and a shared elevation scale, , and you can edit the source after adding it.
Feature comparison
The Ahead column says who does each row better. Raw Radix wins several of them.
| Feature | Glin UI | Raw Radix | Ahead |
|---|---|---|---|
| Accessibility behavior | Inherited from Radix UI primitives: keyboard handling, focus management, ARIA roles. | The source of that behavior. Maintained directly by the Radix team. | Even |
| Styling out of the box | Styled with Tailwind, OKLCH tokens, and solid, outline, and glass variants. | Primitives are unstyled. Radix Themes is a separate, styled option. | Glin UI |
| Consistent API across components | Shared variant and size conventions across the catalog. | Consistent primitive APIs, but your wrappers define the design-level API. | Glin UI |
| Animations and reduced motion | Motion guidance, an animation hub, and reduced-motion handling. | Exposes animation hooks such as data-state. Motion itself is your code. | Glin UI |
| AI-ready prompts | Copy-for-AI prompt per component page. | Standard API docs only. | Glin UI |
| Primitive breadth and depth | Covers the components the catalog needs. | The full Radix primitive set, plus Radix Themes and Radix Colors. | Raw Radix |
| Styling freedom | Editable code, but it starts from our token and surface language. | Zero visual opinion. Build any design system on top. | Raw Radix |
| Upstream stability | Depends on Radix and on this project's own release cadence. | First-party, widely used, and versioned independently. | Raw Radix |
Which one should you pick
Pick Glin UI if
- You want Radix accessibility behavior without writing all the styles.
- You want tokens, variants, and motion guidance already decided.
- You still want to edit the component source.
- You use AI tools and want prompts that describe each component.
Pick Raw Radix if
- You are building a design system with its own visual language.
- You want the complete Radix primitive set and Radix Themes.
- You prefer to depend only on a first-party library.
- You have designers who specify every pixel.
Frequently asked questions
Does Glin UI use Radix UI?
Yes. Glin UI components are built on Radix UI primitives. Accessibility behavior such as keyboard navigation and focus management comes from the primitives.
What does Glin UI add on top of Radix?
Tailwind styling, OKLCH design tokens, solid, outline, and glass variants, an animation hub, accessibility guides, and copy-for-AI prompts for each component.
Should I use raw Radix primitives instead?
Use raw Radix if you are building your own design system and want zero visual opinion. Use Glin UI if you want styled, tokenized components you can edit.
Are Glin UI components fully accessible?
They start from accessible primitives, but accessibility also depends on how you label and compose them. The accessibility guides in these docs cover forms, focus, screen readers, and contrast.