Skip to content
React · Tailwind · NodeGui

Build for Web
and Desktop.

Syne UI provides React + Tailwind components for the browser and separate NodeGui adapters for native desktop. Check each component’s current support status in the documentation.

Browse ComponentsLearn More
App.tsx
import { Button } from "button"
import { Card } from "card"

// ✦ Web  →  React DOM + Tailwind
// ✦ Desktop  →  NodeGui / Qt

export function App() {
  return (
    <Card heading="Syne UI">
      <Button variant="solid">Get Started</Button>
    </Card>
  )
}
40Components
2Platforms
100%TypeScript
1Tailwind preset

Everything you need

One library, two runtimes. Syne UI handles the complexity so you can focus on building.

Cross-platform

Web components use React DOM; separate desktop adapters use Qt widgets with different APIs and support levels.

Tailwind-first

All web components are styled with Tailwind CSS using a scoped tw- prefix, keeping utility classes collision-free in any project.

TypeScript native

Every prop, event, and variant is fully typed. Ship confidently with autocomplete and compile-time safety for both targets.

Accessible

Accessibility support varies by component. Check its API and current implementation before adopting it.

Bun monorepo

Each component lives in its own package in a Bun workspace. Import only what you need — nothing extra ever ships to your bundle.

Live playground

Every component in the docs ships with an interactive preview, usage snippet generator, and real-time props editor.

How it works

One import path, two render targets.

Web
bun run dev
// index / React DOM
import { Button } from "button"

<Button variant="solid">
  Save changes
</Button>

Renders a Tailwind-styled React button in the browser.

Desktop
bun run desktop:start
// synegui / NodeGui Qt
import { Button } from "button/synegui"

const btn = new Button({
  text: "Save changes"})
layout.addWidget(btn)

Renders a native Qt widget in a desktop window.

Quick start

Up and running in seconds with Bun.

01

Clone the monorepo

git clone https://github.com/your-org/syne-ui
02

Install dependencies

bun install
03

Start the website

bun run dev
04

Launch the desktop app

bun run desktop:start

Ready to build?

Explore all 40 components with live previews, code snippets, and full API docs.

Open Component Docs