Open-source UI for native momentum.

A token-driven React Native component library for building consistent, expressive, and scalable interfaces across platforms.

Explore components Read the docs GitHub

Quick start

$npm install @impulse-ui-native/toolkit

Version

2.0.1

License

MIT

Package

Toolkit

spacing.mdradii.lgcolors.primaryfontSize.xl

9:41100%

Good morning

Alex Rivera

Sessions

248↑ 12.4%

Active

36live now

AllDesignMobile

Notifications

Push & email

Open source

MIT licensed, public from day one.

TypeScript-first

Strong types across every component.

React Native

Built for iOS, Android, and web.

Token-driven

Primitive, semantic, and component layers.

Community-ready

Built in the open with contributors.

Components

Explore the real building blocks.

Accessible, composable building blocks whose web previews use the same dimensions, variants, colors, and states as the native packages.

Browse package source

Button

<Button />

IconButton

<IconButton />

StableSuccessBetaClosable

Tag

<Tag />

Email addressEnter a valid email address

Input

<Input />

React Native

Options

React Native

Expo

Select

<Select />

August 2026

101112131415161718192021222324252627282930

DateTimePicker

<DateTimePicker />

080910

404142

293031

TimePicker

<TimePicker />

Skeleton

<Skeleton />

No results found

DataState

<DataState />

Playground

Button

variant="filled" size="medium"

Variant

Size

State

Design tokens

One language for the whole interface.

The website consumes the same primitive scale as the native theme instead of maintaining a parallel palette or spacing system.

Color

Semantic roles backed by the native palette.

colors.primary.value#f55d6b

colors.accent.value#FA9EA7

colors.secondary.value#FEE7E9

colors.surface.primary#f1f3f5

colors.surface.elevated#ffffff

Space

The shared layout rhythm in logical pixels.

space.xxs4

space.xs8

space.mxs12

space.sm16

space.msm24

space.md32

Radii

Consistent shape from controls to flyouts.

radii.sm4

radii.md8

radii.lg16

radii.xl32

radii.round100000

Type

Montserrat scales shared by every package.

fontSize.xs12

fontSize.xsm14

fontSize.sm16

fontSize.xl24

fontSize.colossal56

tokens.theme.ts

export const SpaceTokens = {
  xxs: 4, xs: 8, mxs: 12,
  sm: 16, msm: 24, md: 32,
  lg: 48, xl: 64, xxl: 96,
}

export const RadiiTokens = {
  sm: 4, md: 8, lg: 16,
  xl: 32, xxl: 64, round: 100000,
}

Why tokens matter

A shared visual contract across native and web.
Typed primitives instead of scattered magic numbers.
Component factories can evolve without product rewrites.
Theme intent stays visible in every class and prop.

Theming

Adapt the system without faking it.

Primitive values feed semantic roles, then component factories. The preview below intentionally uses the authoritative light theme because the package does not yet define a distinct dark palette.

Theme preview

LightTheme

9:41100%

Good morning

Alex Rivera

Sessions

248↑ 12.4%

Active

36live now

AllDesignMobile

Notifications

Push & email

Semantic tokens

7 values

colors.surface.primary#f1f3f5

colors.surface.secondary#ffffff

colors.text.primary#16191d

colors.text.secondary#212529

colors.text.disabled#868e96

colors.border.subtle#e9ecef

colors.border.focus#f55d6b

How it composes

1Define primitive values and scales.
2Map them into semantic color roles.
3Generate component tokens from the theme.
4Render product interfaces from those components.

Architecture

From tokens to product UI.

A traceable pipeline from raw values to shipping interfaces. Every layer remains replaceable, testable, and documented.

Layer 1

Primitive tokens

Raw colors, dimensions, type, and spacing.

#f55d6bspace.smradii.md

Layer 2

Semantic tokens

Intent-driven roles for surfaces and actions.

surface.primarytext.disabledborder.focus

Layer 3

Component tokens

Factories translate the theme into exact anatomy.

button.sizestag.colorscontrol.variants

Layer 4

UI components

Composable React Native building blocks.

ButtonInputSelect

Layer 5

Product UI

Your screens remain coherent as the system changes.

OnboardingDashboardSettings

components.buttoncomponents.tagcomponents.controlContainercomponents.datetimePickercomponents.skeleton

Developer experience

Built for everyday product work.

Composable by default

Extend, wrap, and recompose components without leaving the token contract.

Semantic styling

Use names that describe intent instead of one-off pixel values.

Cross-platform consistency

Keep behavior and visual language aligned across supported platforms.

<Button />

Actual v2.0.1 API

PropTypeDefault

size"small" | "medium" | "large""medium"

variant"filled" | "outlined" | "soft" | "ghost" | "plain""filled"

loadingbooleanfalse

disabledbooleanfalse

onPressPressableProps['onPress']—

shadow"none" | "xs" | "sm" | "md" | "lg" | "xl"—

Contribute

Build it with us.

ImpulseUI Native is shaped in the open. Explore the source, report issues, suggest improvements, and contribute new ideas.

Repository Open an issue

Build interfaces that stay coherent.

Start with tokens, compose with components, and shape the system around your product.

Read documentation Browse components View GitHub

Open-source UI for native momentum.

Open source

TypeScript-first

React Native

Token-driven

Community-ready

Explore the real building blocks.

Button

IconButton

Tag

Input

Options

Select

DateTimePicker

TimePicker

Skeleton

DataState

Button

One language for the whole interface.

Color

Space

Radii

Type

Adapt the system without faking it.

From tokens to product UI.

Primitive tokens

Semantic tokens

Component tokens

UI components

Product UI

Built for everyday product work.

Composable by default

Semantic styling

Cross-platform consistency

Build it with us.

Report a bug

Request a component

Improve documentation

Submit a pull request

Build interfaces that stay coherent.