Installation

Start with an app using Solid 2. Both solid-js and @solidjs/web must be version 2.0.0-rc.14 or newer, below version 3. Solid 1 isn't supported.

Install the Packages

npm install @ui-sdk/solid @ui-sdk/core

@ui-sdk/solid provides the Solid components. @ui-sdk/core provides their behavior and is a peer dependency. Install both so the components and any helpers you use share one copy of the core.

Import a Component

Import each component from its own entry:

import { Button } from "@ui-sdk/solid/button"
import { Toggle } from "@ui-sdk/solid/toggle"

A Dialog has separate parts for its trigger, content, and title. Import those parts from the same entry:

import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@ui-sdk/solid/dialog"

Each component page lists the parts you can use.

Add Your Styles

Components are unstyled, so you style them with your app's CSS or with Tailwind CSS. Styling and Animation covers both.

You can render your first component without setting up a provider, importing a UI SDK stylesheet, or adding a portal root. Server Rendering covers rendering initial HTML and hydrating it in the browser.

Continue with First Component to add a working toggle to your app.