42+ components · React 18+ · Tailwind

Build React interfaces, faster.

A Tailwind component library — fully typed, accessible and Next.js-ready. Discover it through real-world scenarios, not just a grid of buttons.

See the scenarios Install
TypeScript SSR / Next.js Native dark mode Tree-shakeable
AL

Ada Lovelace

Lead Engineer

Active
React TypeScript Tailwind
Profile completed80%
2 3

<Wizard /> — new in v0.35.0

42+
Ready components
1927
Unit tests
0
Third-party UI deps
ESM+CJS
Dual package

Built for production

Not a throwaway theme: composable, accessible and optimized components you stay in control of.

Raw Tailwind, zero runtime CSS

Native Tailwind classes + pre-compiled CSS. No style engine at runtime, no style flash.

Composable & accessible

Compound pattern (Card, Tabs, Wizard…), ARIA roles, keyboard navigation and visible focus included.

Fully typed

Every component exports its Props interface. Autocompletion and type safety across your whole IDE.

Next.js compatible

Clean ESM/CJS exports, "use client" directive only where it's actually needed.

Native dark mode

Every component handles dark: out of the box. Try it with the button in the top right. 🌙

Tree-shakeable

sideEffects: false — import only what you use, the bundle stays small.

Interactive demo

Real scenarios, not fragments

Click, navigate, open. Every demo is alive — and the React code behind it is one click away.

Create your account — <Wizard /> component

    Why it's powerful

    • ▸ Linear / non-linear navigation, steps become clickable once reached.
    • ▸ Per-step status (active / completed / upcoming / error) handled for you.
    • ▸ Controlled mode to wire in your per-step validation.
    • ▸ useWizard() hook for fully custom controls.

    A complete toolbox

    Buttons, badges, avatars, forms, feedback… it's all there, consistent and accessible.

    Button

    Badge & Chip

    solid soft outlined dot React ✕

    Avatar

    AL KT JD +5

    Checkbox & Radio

    ProgressBar & Skeleton

    Banner & Tooltip

    New version v0.39.1 available.
    Accessible tooltip 👋

    Ready in 2 steps

    Install, import the styles. That's it.

    1

    Install

    pnpm add @synertech/ui
    2

    Import & use

    import "@synertech/ui/styles.css";
import { Button } from "@synertech/ui";

    Ship faster, without cutting corners.

    A consistent, tested and maintained component base for all your Synertech apps.

    Explore Storybook Back to scenarios