Acrylic

Acrylic is a shadcn/ui component registry with a dark frosted-glass (Big Sur / macOS vibrancy) aesthetic. Color, spacing, and corner radii are lifted from the official Apple macOS 26 UI Kit; every component is theme-aware (light / dark) through one token set.

Install

Add any component straight from its URL — no config required. The Acrylic theme tokens are a dependency of every component, so they come along automatically:

npx shadcn add https://acrylic-ui.vercel.app/r/button.json

Optional: the @acrylic shortcut

If you'll pull in several components, register the namespace once in your components.json:

{
  "registries": {
    "@acrylic": "https://acrylic-ui.vercel.app/r/{name}.json"
  }
}

Then the short form works:

npx shadcn add @acrylic/button

Theme only

To install just the token set — e.g. to theme your own components — add the theme item on its own:

npx shadcn add https://acrylic-ui.vercel.app/r/acrylic.json

Components

Browse the components in the sidebar. Each page has a live Preview, the Code, the install command, and a props/variants reference.

Agent Skill

Acrylic ships a Claude Code skill (.claude/skills/acrylic-ui/) that teaches coding agents the material system, the macOS component axes, and the 1:1 shadcn correspondences — copy it into your project and your agent writes idiomatic acrylic out of the box.