# Introduction

Copy-paste components with a clean, minimal design for React, React Native, SwiftUI and Jetpack Compose.

Source: https://ui.suiss.app/docs

## 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.

```bash title="Terminal"
npx @esuiss/ui@latest init
npx @esuiss/ui@latest add button dialog sheet
```

## Platforms

| Platform | Projects | Built with |
| --- | --- | --- |
| React | Next.js or React with Vite, TypeScript | One of three primitive bases, [Base UI](https://base-ui.com) by default, and [Tailwind CSS](https://tailwindcss.com) 4.2 or later |
| React Native | Expo or React Native, TypeScript | Uniwind (Tailwind CSS v4), NativeWind v4 (Tailwind CSS v3) or plain StyleSheet, with the same API |
| SwiftUI | Xcode projects and Swift packages, iOS 17 or later | SwiftUI and Swift Charts |
| Jetpack Compose | Android Gradle modules, `minSdk` 24 or higher | Compose Foundation and UI, without Material |

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](https://ui.suiss.app/docs/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](https://phosphoricons.com). 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](https://ui.suiss.app/docs/installation#choose-the-primitive-base).

## 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](https://ui.suiss.app/docs/cli) for how to add them.

## Next steps

- [Installation](https://ui.suiss.app/docs/installation): set up a project and add your first components.
- [Theming](https://ui.suiss.app/docs/theming): change colors, the font and the corner radius.
- [Button](https://ui.suiss.app/docs/components/button): a first component reference.