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.

Icons and primitives

On the web, a component's source names each icon in five libraries (Lucide, Tabler, Hugeicons, Phosphor and Remix Icon) with an IconPlaceholder element. When a file is copied, every placeholder becomes an import from one library: the registry CLI uses the icon library set in your components.json, and the suiss/ui CLI uses Phosphor. React Native, SwiftUI and Compose use Phosphor.

Web components also come in three primitive bases, picked when you set up a project. Code on this site shows Phosphor icons and the default base; choose another icon library or base under code options in the header to see the code you will get. See Installation.

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.