142 components, MIT licensed

Design modern UI for the modern web.

142 accessible React components, 8 surface variants, 6 base colors, OKLCH tokens and Copy for AI on every page. Tailwind 3 preset and Tailwind 4 entries included.

Get started Browse components GitHub

$ pnpm add @glinui/ui @glinui/tokens

MIT licensed. Free forever. No sign-up.

Maya Kowalski

Design systems

Live

Migration progress72%

Reduced motion

AKBLCM+1

Surface: glass

One variant, not the whole system.

blurrefraction

OKLCH tokens

Light and dark, one source

Built on open standards

Radix UI
Tailwind CSS
React 19
Next.js
TypeScript
Motion

Works with

Next.js
Vite
Remix
Astro
TanStack

Copy for AI, paste anywhere

Claude
ChatGPT
Cursor
v0
Copilot
Windsurf

Brand marks belong to their owners and are shown for compatibility, via thesvg.org.

What is inside

Four tools for the same job: shipping a coherent interface.

142 components, accessible by default

Built on Radix primitives with keyboard support, focus rings and AA contrast. Copy the source or install the package.

Browse components

Animations you can use for free

Marquees, beams, reveals and tickers. Transform and opacity only, reduced motion respected.

Explore animations

Colors and tokens in OKLCH

One source for light and dark. Surfaces, rings, elevation and type as CSS variables.

Explore colors

Copy for AI on every component

Each page ships a ready prompt with install steps, a working example and our token rules, so your assistant stays on-system.

Live previews

Not screenshots. These are the components.

All components

How it works

From empty project to shipped component in three steps.

Step 1
Install
npx glinui init
Sets up tokens and the config in your project.
Step 2
Add
npx glinui add button
Copies the component source into your repo.
Step 3
Customize
variant="plain" tone="accent"
Change props or tokens. The code is yours.

Read the getting started guide

AI-native docs

Every page speaks to people and to your assistant.

Stop pasting half a component into a chat. Copy a prompt that already knows the install path, the import and the rules.

1
One click. Copy for AI puts a prompt on your clipboard with the install path, the import and our token rules attached.
2
Or hand it off. Open the component in your assistant of choice with a short prompt that links to its Markdown page.
3
Always current. Every component has a plain Markdown page, plus llms.txt and llms-full.txt for whole-library context.

Works with Claude, ChatGPT, Codex, Gemini, Grok, Cursor and more

AI-ready docs

Design tokens

A system you can read in one glance.

Every swatch below is a live CSS variable. Flip the theme and they follow.

Token docs Colors

Click a swatch to copy its CSS variable.

Type scale

Aadisplay
Headingh2
Lead paragraphlead
Body copy for readingbody
caption 12pxcaption

Radius

Elevation

elev-1
elev-2
elev-3

Compared honestly

Where GLINUI fits next to the tools you already know.

shadcn/ui set the standard for owning your components, and we build on the same Radix foundation. Here is where we differ.

Feature comparison of GLINUI, shadcn/ui and Magic UI
Feature	GLINUI	shadcn/ui	Magic UI
Ownership	Yes: Copy the source or install the package	Yes: Copy the source through the CLI	Yes: Copy the source through the CLI
Surface variants	Yes: 8 surface variants: glinr, solid, plain, soft, outline, ghost, gradient, glass	No: One default style, extend it yourself	No: Not the focus
Animations	Yes: Free motion components with reduced motion handling	No: Minimal, bring your own	Yes: Large animated library, a core strength
Colors and tokens	Yes: OKLCH tokens for light and dark	Yes: CSS variable theming	Partly: Inherits your shadcn theme
AI prompts	Yes: Copy-for-AI prompt on every component page	Yes: MCP server and v0 integration	Partly: Works through the shadcn registry
Accessibility	Yes: Radix primitives, AA contrast, keyboard tested	Yes: Radix primitives	Partly: Varies by component

Full comparison with shadcn/ui Full comparison with Magic UI

Ecosystem

Built by GLINCKER, alongside its other products.

Glin UI is the shared design layer for our sibling projects. Some of that work is done, some is still in progress.

theauth
Source of the violet accent tones used across the tokens.
thesvg
Provides the brand icons behind BrandIcon in this library.
levelrail
A GLINCKER product. Adopting Glin UI there is planned, not shipped.

FAQ

Questions before you install.

Is Glin UI really free?

Yes. The code in this repository is MIT licensed and there are no paid tiers. Copies you already have cannot be revoked.

What license does it use?

MIT. You can use it in personal and commercial projects. Third-party adapted code keeps its own attribution, listed in the repository notices.

Which Tailwind versions work?

Tailwind CSS 3 through the @glinui/tokens preset, and Tailwind CSS 4 through the tailwind4.css entries in the same package.

Which React versions are supported?

React 18 and React 19 (peer dependency range ^18.0.0 || ^19.0.0).

How is it different from shadcn/ui?

Both build on Radix and let you own the source. Glin UI adds a shared token system, 8 surface variants (glinr, solid, plain, soft, outline, ghost, gradient, glass) and a Copy for AI prompt on every page. Pick shadcn/ui if you want its larger ecosystem.

Can I install one component at a time?

Yes. Run npx glinui init once, then npx glinui add button, or install the @glinui/ui package.

Start with one component. Keep the whole system.