v3.0.2 · @ionizeio/canvas

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.

iOS

Android

Web

React Native Web

Canvas at the core; iOS, Android, and the web as targets. One component API, rendered natively on every platform.

Platform-adaptive

One component API. Three native looks.

Every Canvas component carries a skin per platform: an iOS look, Material 3 on Android, and a web look, all driven by the same JSX and the same semantic boolean props. These are real captures of every atom's page, straight from the iPhone simulator, the Pixel emulator, and the browser.

Autocomplete

1/37

iOS

iPhone 17 Pro

Android

Pixel 10 Pro

Web

Chrome

canvas.nannier.com

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

The system

Four principles, one API.

The non-negotiable rules every component follows, so the styling stays predictable 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.

Get started

Three props to a styled button.

Install the package, import the stylesheet once, and compose. No enum strings, no className soup, no platform forks. Style props group into orthogonal axes (intent, size, density): pass at most one per axis, stack the rest freely.

Read the integration guide

app.tsx

tsx

bun add @ionizeio/canvas

tsx

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

import { Button } from "@ionizeio/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>

Architecture

Atomic design, end to end.

Every page in this site is one of six levels of abstraction, and all 104 components render as real React Native components, straight from their markdown example docs.

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.

Buttons

Inputs

Badges

Avatars

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.

Data Tables

Sidebar

Dialog

Tabs

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.

LineChart

Candlestick

PieChart

DepthChart

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

Density

Build your first screen.

Browse every component live, copy the JSX, and ship it to iOS, Android, and web.

Canvas

design system

A universal React Native UI kit. Native iOS and Android, plus web.

Components

Buttons

Cards

Data Tables

Dialog

Foundations

Tokens

Theming

Responsive

Integration

Project

GitHub

npm

Universal React Native, native iOS and Android plus web.