v3.11.1

One codebase. Every platform. One component API.

Canvas is a universal React Native UI kit. The same components render natively on iOS and Android and on the web through React Native Web, styled with flat, semantic boolean props that read like a sentence.

The prop name is the value.

Browse components

Explore tokens

iOS

Android

Web

React Native Web

Platform-adaptive

One component API. Three native looks.

Real captures from the iPhone simulator, Pixel emulator, and browser. Platform controls keep their native shape; the rest share the Dark Factory look.

Autocomplete

1/37

iOS

iPhone 17 Pro

Android

Pixel 10 Pro

Web

Chrome

canvas.nannier.com

<Autocomplete label="Assigned to" placeholder="Search a person……

See every component live

Open Autocomplete

The system

Four principles, one API.

The rules every component follows, from the smallest atom to a full template.

Universal React Native

One codebase, one component API, every platform. Canvas renders natively on iOS and Android, and on the web through React Native Web. Write a screen once and ship it everywhere, with no per-platform forks to maintain.

Responsive, desktop-first

Every component is highly responsive by default, authored desktop-first: size for the desktop case, then add the variants that scale it down to tablet and phone. The smallest matching breakpoint wins.

Semantic UI

Change a component's style with flat boolean props. Each choice is its own prop, named for its meaning, so the prop name is the value. You write <Button primary large>, never variant="primary". It reads like a sentence.

Tokens, themes, density

Built with atomic design and driven by design tokens: light and dark schemes, a glass surface mode, and density controls. Theming is a token change, not a rewrite, so the boolean props stay your only API.

Quick start

Install. Import. Build.

Use semantic props and the kit's layout components to assemble your first screen.

bash

bun add @nannier/canvas

tsx

import "@nannier/canvas/styles/canvas.css";

import { Button } from "@nannier/canvas";

// The prop name is the value: <Button primary large />

<Button primary large>Save changes</Button>

<Button destructive>Delete</Button>

<Button ghost small>Cancel</Button>

Read the integration guide

Atomic design

A system from tokens to templates.

Explore all 107 component references, live examples, and complete screen templates.

Tokens

The lowest-level decisions: color schemes (light and dark), typography, spacing, radii, and density. Every component derives from these tokens, so theming is a token change, not a rewrite.

Colors & Theme

Theming

Atoms

Indivisible building blocks like Button, Input, Badge, Icon, and Avatar. One job each, styled entirely through semantic boolean props, every state identical on native and web.

Molecules

Small compositions of atoms with a single clear purpose: Card, Description List, Empty State. Reusable across pages and built from the same boolean prop API.

Cards

Description Lists

Empty States

Organisms

Self-contained sections of a screen: Data Table, Sidebar, Dialog, Tabs. The larger pieces that adapt desktop-first down to phone and assemble into product surfaces.

Charts

The data-viz tier: bars, lines, areas, pies, scatter, and the trading set (candlesticks, depth, price lines), all token-themed with a colorblind-validated series palette and scrub-to-inspect.

Templates

Full screen compositions showing how atoms, molecules, and organisms assemble into real product surfaces, from a dashboard to a sign-in flow.

Dashboard

Settings

Patterns

Cross-cutting treatments that span many components: responsive layout, glass surfaces, density, loading, form validation, and accessibility.

Responsive

Glass