Open source · MIT License · By Binary Tech Ltd

Build sharp UIs
without the ceremony

Semantic Tailwind CSS components and D3-powered chart Web Components. Works in React, Vue, Svelte, Blade, or plain HTML. No configuration required.

Get started Browse components Genre Builder →
ReactReact ✦ Vue.jsVue.js ✦ SvelteSvelte ✦ LaravelLaravel ✦ TypeScriptTypeScript ✦ Tailwind CSSTailwind CSS ✦ D3.jsD3.js ✦ Next.jsNext.js ✦ NuxtNuxt ✦ AngularAngular ✦ AstroAstro ✦ ViteVite ✦ ReactReact ✦ Vue.jsVue.js ✦ SvelteSvelte ✦ LaravelLaravel ✦ TypeScriptTypeScript ✦ Tailwind CSSTailwind CSS ✦ D3.jsD3.js ✦ Next.jsNext.js ✦ NuxtNuxt ✦ AngularAngular ✦ AstroAstro ✦ ViteVite ✦
4+
UI Components
5
Chart Web Components
0
Required JS (UI only)
MIT
Free & Open Source
Why Zyna UI

Everything you need,
nothing you don't

Built for developers who care about quality, speed, and maintainability. No bloat included.

Tailwind Plugin
Adds semantic class names like .btn and .card on top of Tailwind. No new build step. No config changes.
Web Component Charts
Drop <zyna-waffle> anywhere: React, Vue, Blade, or plain HTML. D3-powered, responsive, no framework lock-in.
Zero Configuration
Install, import, use. No boilerplate, no theme setup. Defaults adapt to your Tailwind colour config automatically.
Accessible by Default
Focus styles, ARIA patterns, and keyboard navigation are included. Colour contrasts meet WCAG 2.1 AA throughout.
Tree-shakeable
Import only what you use. The Tailwind plugin generates only the classes you reference. The chart bundle ships as ESM for code splitting.
TypeScript Ready
Type definitions for all chart Web Component attributes and events. IDE autocomplete works for both the plugin and the chart components.
Theming

Five looks built in.
Build your own.

Genres swap the whole token set at once — colors, easing curves, corner shapes, motion speed. Pick from five built-in aesthetics, tweak live in the browser, and paste one config line into your project.

UI Components

Semantic classes,
instant results

One class name is all it takes. Every component has a live preview, a code tab, and a CSS variable API.

Button
Chamfered-corner buttons with scan-fill hover and glow physics. 4 variants · 3 sizes · icon mode.
Badge
Parallelogram data-chip indicators with radar scan sweep. 7 semantic variants · pulse · outline.
Online Critical Info Alert
Card
HUD-panel containers with corner bracket marks, mono header, and deep glass depth. 4 variants.
Data

Mission Report

Active
Alert
Terminal notifications with a left luminescent bar. 6 semantic variants with icon support.

Button

Chamfered-corner buttons with a scan-fill hover effect and glow physics. Use .btn with a variant modifier: 4 variants, 3 sizes, icon mode.

index.html 
<!-- Variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-danger">Danger</button>

<!-- Sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>

<!-- Disabled -->
<button class="btn btn-primary" disabled>Disabled</button>

Badge

Data-tag style indicators with a left accent bar in luminescent colors. Add .badge-pulse for an animated status dot.

Primary Secondary Success Danger Warning Info Neutral
Online Critical Syncing Large Outline
index.html 
<span class="badge badge-primary">New</span>
<span class="badge badge-success">Active</span>
<span class="badge badge-danger">Error</span>
<span class="badge badge-warning">Pending</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-neutral">Draft</span>

<!-- Large -->
<span class="badge badge-primary badge-lg">Large</span>

Card

HUD-panel containers with corner bracket marks, a mono header readout, and deep glass depth. Four variants: base, .card-dark, .card-glow, .card-sm.

Workspace

Q1 Report

Libya Aid Programme · 2024

Published
Void

Dark Variant

Deepest layer · dashboard use

Classified
Priority

Glow Variant

High-priority surface · focus state

Urgent
Small

Small Variant

Reduced padding · dense layouts

Dense
index.html 
<div class="card">
  <div class="card-header">Title</div>
  <div class="card-body">
    <p class="card-title">Card Title</p>
    <p class="card-subtitle">Subtitle</p>
    <p>Body content here.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm">Save</button>
  </div>
</div>

<!-- Dark variant -->
<div class="card card-dark">...</div>

<!-- Glow variant -->
<div class="card card-glow">...</div>

<!-- Small variant — reduced padding for dense layouts -->
<div class="card card-sm">...</div>

Alert

System terminal notifications with a left luminous bar, translucent tint, and no radius. Luminescent semantic colors instead of conventional ones.

index.html 
<div class="alert alert-success" role="alert">
  <p class="alert-title">Success</p>
  <p>Changes saved.</p>
</div>

<div class="alert alert-danger" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-neutral" role="alert">...</div>
<div class="alert alert-dark" role="alert">...</div>
Data Visualisation

5 Chart Web Components
ready to drop anywhere

Waffle, Timeline, Nightingale, Lollipop, and Orbital. All drawn from real data infographics, built with D3 v7.

Explore chart components
Waffle
zyna-waffle
Timeline
zyna-timeline
Nightingale
zyna-nightingale
Lollipop
zyna-lollipop
Orbital
zyna-orbital
Get Started

Up and running
in 60 seconds

1

Install the package

npm install zynaui
2

Add the plugin to your Tailwind config

const zynaUI = require('zynaui')

module.exports = {
  plugins: [zynaUI],
}
@import "tailwindcss";
@plugin "zynaui";
3

Use the components

index.html 
<button class="btn btn-primary">Execute</button>
<button class="btn btn-secondary">Standby</button>
<span class="badge badge-success badge-pulse">Online</span>
<div class="card card-glow">...</div>
<div class="alert alert-success" role="alert">...</div>
4

Optional: add D3 chart Web Components

First, install the D3 peer dependencies:

npm install d3-array d3-scale d3-selection d3-shape
// main.js — registers all chart components
import 'zynaui/charts'

// Then use anywhere in HTML:
<zyna-waffle
  data='[
    {"label":"A","value":40,"color":"#C9A84C"},
    {"label":"B","value":30,"color":"#7A6230"},
    {"label":"C","value":30,"color":"#5A4820"}
  ]'
  cols="10"
></zyna-waffle>
// Import only what you need
import 'zynaui/charts/waffle'
import 'zynaui/charts/nightingale'
<!-- No bundler — D3 is included -->
<script
  src="https://cdn.jsdelivr.net/npm/zynaui/dist/zyna-charts.iife.js"
></script>
Compatibility

Works in every framework and plain HTML.