Knit UI
GitHub
v0.8.0See what's new

Knit one kit.
Ship three platforms.

105 cross-platform components, one design system, one import. Built on Tamagui and React Native — rendered natively on iOS and Android, as real DOM on the web.

Get startedBrowse components105
One codebase
  • iOS
  • Android
  • Web
105
components
1,580
live examples
10
packages
3
platforms, one source
Write once, run everywhere — literally

One import. Three platforms. No forks, no wrappers.

You write <Button variant="filled" /> once. Knit UI resolves it to the right primitive on each target — the props, the theme, the sizing ladder and the tests are shared.

iOS

Real native views through React Native. Drops into an Expo or bare RN app.

Android

The same components, the same props, the same theme — no Android-only fork.

Web

Real DOM and CSS. Not a canvas, not a webview — server-rendered and accessible.

Not just boxes and buttons

Skia canvases, gesture decks, 60fps carousels

Every tile below is running right now, on this page, from the kit's own story files — and the identical code renders on iOS and Android.

@knitui/map

Loading example…

Maps, 10,000 markers

SVG icons rasterised once and drawn by the GPU as a clustered symbol layer — MapLibre on web, native on device.

Docs
@knitui/graphics

Loading example…

Audio mesh

A Skia mesh gradient flowing to live audio bands — the same shader on every platform.

Docs
@knitui/carousel

Loading example…

Coverflow carousel

Ten layout modes, pluggable per-slide transitions, driven by Reanimated on the UI thread.

Docs
@knitui/carousel

Loading example…

Swipe deck

A gesture-driven card deck with swappable effect worklets — fan, stack, or your own.

Docs
@knitui/graphics

Loading example…

Neon visualizer

A crisp waveform with a separately tinted halo, smoothed from a bursty data source.

Docs
@knitui/graphics

Loading example…

Sweep border

Conic gradient borders, glows and inner shadows, painted in Skia rather than faked in CSS.

Docs

Install

npx expo install @knitui/core @knitui/components \
  react-native-gesture-handler react-native-reanimated \
  react-native-svg react-native-teleport react-native-worklets

Live, on this page

Every example in these docs is a real component, mounted for real — and it is the same story file the kit's Storybook and its iOS/Android gallery render, so nothing here can drift from what ships.

Every visual variant side by side, at the default size.

Loading example…

VariantsSourceStorybook
<Box flexDirection="row" flexWrap="wrap" gap="$md" alignItems="center">
  {VARIANTS.map((variant) => (
    <Button key={variant} {...args} variant={variant}>
      {variant}
    </Button>
  ))}
</Box>

Explore

Foundations

Tokens, themes, sizing, motion — the systems every component shares.

Components

105 components with live examples, generated prop tables and slot references.

Satellite kits

Dates, carousel, maps, media, graphics, sheets, icons and emoji.

Guides

Cross-platform authoring, theming, performance, testing, migration.