Installation

Syncclouds UI is not published yet. The commands on this page are the ones you will run at launch.

Requirements#

• React 19 and React DOM 19
• Any React framework. We build and test with the Next.js App Router.

Install the package#

Then import the parts you need. Each component also has its own entry point, so you can import it on its own.

import { Switch, SwitchThumb } from '@syncclouds/ui'
 
// or, one component at a time
import { Switch, SwitchThumb } from '@syncclouds/ui/switch'

Copy the source with the shadcn CLI#

Each component is also published as a registry item. The shadcn CLI copies its source into your project, along with the small helpers it needs, and installs its dependencies. From then on the code is yours to change.

Your project needs a components.json from shadcn init. The registry files go live with the first release.

Add the optional theme#

The theme is one CSS file. With Tailwind CSS v4, import it into the components layer so your utility classes always win:

@import "tailwindcss";
@import "@syncclouds/ui/theme.css" layer(components);

Without Tailwind CSS, import it once at the root of your app:

import '@syncclouds/ui/theme.css'

Theming lists the variables you can change.