Star4
v1.6.0 is live+9 components

Build interfaces
that feel alive.

A premium, developer-first component library. Copy-paste the parts you need, own the code, ship a product that feels like it was designed by the whole team.

Open sourceMIT LicensedTypeScript readyAngular 21+

/ Components

Built from primitives polished like products.

Every component is accessible, themeable and obsessively crafted. Hover anything below— yes, it reacts.

Button

5 variants / 4 sizes

Switch
Neon mode

Brighter accents, louder glow

• Active

Badge
Livev1.6.0TypeScriptPassed
your@email.dev
Progress
Build93%
Coverage94%
Bundle32.4kb
Toast
Deployed to production

zyra-ui.preview.vercel.app

/ Developer Experience

Zero config. TypeScript native.

Import what you need. Tree-shake the rest. ZyraUI is built on Angular standalone components, styled with CSS variables, and ships with fully typed, zero-runtime primitives.

Framework-agnostic: Next.js, Remix, Vite, Astro
100% ownership – copy the code, tweak forever
CSS variables for effortless theming
A11y-first – tested with ARIA + VoiceOver
signup-card.tsx
import { Button, Card, Input } from 'zyra-ui';

export function SignupCard() {
  return (
    <Card className="p-6 text-xl font-display">
      <h2 className="text-xl font-display">
        Join the waitlist
      </h2>
      <Input placeholder="you@company.dev" />
      <Button variant="ghost">
        Reserve your spot ⟶
      </Button>
    </Card>
  )
}

/ Why ZyraUI

Everything you'd build. None of the boilerplate.

Obsessively crafted primitives so you can focus on what actually makes your product memorable.

Accessible

WCAG 2.0 AA compliant. Keyboard nav, focus rings, and screen-reader labels baked in.

Themeable

CSS variables + token-defined colors. Re-skin the entire library with a single token file.

Framework-agnostic

Works with Angular standalone, signals, SSR, and Vite. No bundler magic required.

Tree-shakeable

Tiny per-component footprint. Average button ships under 2kb gzip.

Dark-mode first

Designed in the dark, perfected in the light. Auto-switch based on OS preference.

Smooth animations

Hand-crafted easings for hover, press, enter, and scroll. Never janky.

/ Blocks

Ready-made patterns. Zero rework.

Production-ready UI blocks assembled from Zyra primitives. Copy, paste, ship — no custom styling needed.

Auth formAuth
Sign in
your@email.dev
••••••••••
Continue →
Stats rowDashboard
12.4k
Monthly users
99.9%
Uptime SLA
4.8 / 5
Satisfaction
NotificationsFeedback
Deploy complete

zyra-ui.vercel.app is live

Update available

v1.6.0 is ready

Storage at 80%

Consider upgrading

/ Theming

Your brand. Zyra's engine.

Every color, radius, and font is a CSS variable. Swap one token file and the whole library re-skins. No build step, no class overrides.

Accent--zyr-accent
Blue--zyr-accent-2
Purple--zyr-accent-3
Success--zyr-success
Warning--zyr-warning
theme.css
:root {
  /* Brand — swap these three to re-skin everything */
  --zyr-accent:    #00eaff;  /* primary CTA, focus rings, glows */
  --zyr-accent-2:  #4f8cff;  /* links, info badges */
  --zyr-accent-3:  #b57cff;  /* secondary labels */

  /* Shape & type */
  --zyr-radius-lg: 12px;
  --zyr-font-body: 'Inter', sans-serif;
}
/ v2 waitlist

Be first to try ZyraUI v2.

More components, richer motion, and a design token system built for teams that ship. Join the waitlist and get early access before the public launch.

• 2 developers already on the waitlist

/ Get started

Where do I go next?

Read the docs

Installation guide, theming reference, and full API docs for every component.

Try the playground

Live interactive demos for every component. See it, tweak it, copy the code.