Introduction

Overview

suiss/ui is a set of components for web and mobile apps: React for Next.js and Vite, React Native for Expo, SwiftUI for iOS and Jetpack Compose for Android. Every platform is built from the same design tokens and uses the same component names, parts and variants.

The components reach your project through the @esuiss/ui command-line tool. The tool copies each component's source into your project instead of installing it as a dependency, and it detects which platform the project is for.

$ pnpm dlx @esuiss/ui@latest init$ pnpm dlx @esuiss/ui@latest add button dialog sheet

Platforms

Every component page has a tab for each platform it supports, with its own preview, installation steps, examples and API reference.

Principles

You own the code

Components live in your project, under components/ui/ on React and React Native, EsuissUI/ on SwiftUI and com/esuiss/ui/ on Compose. Change them however you like. Updates never overwrite your changes silently: you review the difference first, then decide.

The CLI is never installed in your project. It runs with npx, so there is no runtime dependency on it.

One design on every platform

Every color has a light and a dark value, and every platform uses the same values, so a web app, an Expo app and a native app look like one product. On the web, colors use the common theme variables, such as background, foreground, primary and border, so themes written with the same names drop in. See Theming.

Phosphor icons

Components use Phosphor icons on every platform. On the web, the source names each icon in five libraries (Lucide, Tabler, Hugeicons, Phosphor and Remix Icon) with an IconPlaceholder element. The CLI turns every placeholder into a Phosphor import when it copies a file, and the code on this site shows the same Phosphor imports. The registry CLI uses the icon library set in your components.json instead.

Beyond components

Besides components, the CLI can add optional extras:

• Patterns combine several components into one ready-made piece, such as a date picker.
• Interactions add a behavior to something you already have, such as swiping a row to reveal actions.
• Charts are ready-made charts built on the chart component.
• Blocks are ready-made screens and sections built from the components.

See CLI for how to add them.

Next steps

• Installation: set up a project and add your first components.
• Theming: change colors, the font and the corner radius.
• Button: a first component reference.