Headless React components with the hard parts already worked out
Syncclouds UI is the component library we are building from the design system behind our studio. Each component handles focus, keyboard and screen reader support, and you decide how it looks.
The core library will be free. We also plan a paid Pro tier.
Every control on this wall works
Each card is built only from Syncclouds UI components with the optional theme. Use them with a mouse, a keyboard or touch, and re-theme them with the controls.
Deploy settings
Where and how this project ships.
Project
Arrow keys move, typing a letter jumps.
Notifications
Choose what we email you about.
Team
Editor
Hover or focus a button to see its shortcut.
Release notes for version 2 go here.
Help
Delete project
Removes the project and its deploy history.
Install
Available at launch.
npm install @syncclouds/uipnpm add @syncclouds/uiyarn add @syncclouds/uibun add @syncclouds/uiBilling cycle
Billed every month. Cancel any time.
Keyboard log
Focus the list and press a key.
- Nothing yet
Share
Anyone with the link can view.
Appearance
This card changes on its own.
Why we made it headless
Most teams we work with already have a brand and a way of writing CSS. They need components that behave correctly and leave the look to them.
Your markup and your styles
Components render plain elements with a data attribute for every state, so you can style them with Tailwind CSS, CSS Modules or plain CSS.
Behaviour you would otherwise rewrite
Focus management, dismissal, typeahead and ARIA wiring are built in, so each project starts from the same tested base.
Only interactive parts run on the client
Each component is its own import, and static content stays server rendered in Next.js.
Install the package or copy the source
Import components from the package and keep them up to date, or copy a component into your project and make it yours.
- The package gives you every component, one import at a time.
- The shadcn CLI copies a component and its helpers into your ui folder.
- Both use the same source, the same data attributes and the same optional theme.
pnpm add @syncclouds/uinpm install @syncclouds/uiyarn add @syncclouds/uibun add @syncclouds/uiimport { Dialog, DialogTrigger, DialogContent } from '@syncclouds/ui'pnpm dlx shadcn@latest add https://ui.syncclouds.com/r/dialog.jsonnpx shadcn@latest add https://ui.syncclouds.com/r/dialog.jsonyarn dlx shadcn@latest add https://ui.syncclouds.com/r/dialog.jsonbunx --bun shadcn@latest add https://ui.syncclouds.com/r/dialog.jsonimport { Dialog, DialogTrigger, DialogContent } from '@/components/ui/dialog'Every component has its own page
Each page has live examples, the code, a props reference and the keyboard support. We add more components as they are ready.
- AccordionA stack of headings that each show or hide a section of content.
- Copy ButtonA button that copies text to the clipboard and announces that it did.
- DialogA modal window over the page that keeps focus inside until it closes.
- ListboxA list of options where one can be selected, with typeahead.
- MenuA button that opens a list of actions.
- Radio GroupA set of options where exactly one can be checked.
- SwitchA control that turns a setting on or off.
- TabsLayered sections of content where one panel shows at a time.
- TooltipA short label that appears when a control is hovered or focused.
Questions we hear
Get Syncclouds UI when it is ready
Leave your email and we'll write when the first release is out.