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

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

Know what is available.

Browse the library by purpose, capability, and package. Native behavior stays in native Storybook, while this catalog gives every component a clear place in the system.

Browse package source

Actions

Button

Trigger primary and secondary actions across sizes, variants, and loading states.

Interactive5 variants

@impulse-ui-native/primitives

Actions

IconButton

Present compact, accessible actions when an icon communicates the intent.

InteractiveAccessible

@impulse-ui-native/primitives

Inputs

Input

Collect typed text with themed labels, validation, and supporting content.

InteractiveValidated

@impulse-ui-native/input

Inputs

Textarea

Collect longer text with character counting and bounded auto-grow behavior.

InteractiveMultiline

@impulse-ui-native/input

Inputs

Checkbox

Toggle checked, unchecked, and indeterminate states with accessible semantics.

Interactive3 states

@impulse-ui-native/checkbox

Inputs

Radio

Present an accessible single-choice control across shared sizes and variants.

InteractiveAccessible

@impulse-ui-native/radio

Inputs

Switch

Toggle settings with animated state changes and disabled or loading behavior.

InteractiveAnimated

@impulse-ui-native/switch

Inputs

Select

Choose one or many values through a themed control and native flyout.

InteractiveFlyout

@impulse-ui-native/select

Inputs

FormField

Compose labels, descriptions, required state, and validation around custom controls.

AccessibleValidated

@impulse-ui-native/form-field

Inputs

DateTimePicker

Select dates with calendar navigation and configurable date constraints.

InteractiveCalendar

@impulse-ui-native/datetime

Inputs

TimePicker

Select hours and minutes using native-friendly scrolling controls.

InteractiveTime

@impulse-ui-native/datetime

Content

Avatar

Represent people and entities with images, initials, fallbacks, and presence states.

Identity5 variants

@impulse-ui-native/primitives

Content

Card

Group related content in compound static or pressable themed surfaces.

CompoundComposable

@impulse-ui-native/primitives

Content

Divider

Separate content horizontally or vertically with logical insets and semantic colors.

LayoutAccessible

@impulse-ui-native/primitives

Content

Accordion

Reveal collapsible sections with single or multiple expansion and keyboard navigation.

CompoundAnimated

@impulse-ui-native/accordion

Feedback

Tag

Label status and categories with semantic colors and optional dismissal.

DisplayClosable

@impulse-ui-native/primitives

Feedback

Badge

Display compact semantic states and metadata with optional leading or trailing content.

DisplaySemantic

@impulse-ui-native/primitives

Feedback

Spinner

Communicate indeterminate work with token-aware sizes and semantic colors.

LoadingIndeterminate

@impulse-ui-native/primitives

Feedback

Progress

Show determinate or indeterminate progress with linear and circular variants.

LoadingAccessible

@impulse-ui-native/primitives

Feedback

Skeleton

Communicate loading layouts with animated bones, text, and shape presets.

AnimatedLoading

@impulse-ui-native/skeleton

Feedback

DataState

Explain empty, error, and completed states with composable actions.

FeedbackComposable

@impulse-ui-native/data-state

Charts

LineChart

Show a continuous trend across numeric, date, or categorical values.

SkiaCartesian

@impulse-ui-native/charts

Charts

MultiLineChart

Compare multiple series against the same axes, domain, and grid.

SkiaMulti-series

@impulse-ui-native/charts

Charts

BarChart

Compare categorical values, including positive and negative measurements.

SkiaCartesian

@impulse-ui-native/charts

Charts

MultiBarChart

Compare grouped series across categories with configurable spacing.

SkiaGrouped

@impulse-ui-native/charts

Charts

PieChart

Communicate proportions as a token-colored pie or donut chart.

SkiaRadial

@impulse-ui-native/charts

Charts

MultiPieChart

Display independently normalized data as concentric proportional rings.

SkiaConcentric

@impulse-ui-native/charts

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

TypeScript-first

React Native

Token-driven

Community-ready

Know what is available.

Actions

Button

IconButton

Inputs

Input

Textarea

Checkbox

Radio

Switch

Select

FormField

DateTimePicker

TimePicker

Content

Avatar

Card

Divider

Accordion

Feedback

Tag

Badge

Spinner

Progress

Skeleton

DataState

Charts

LineChart

MultiLineChart

BarChart

MultiBarChart

PieChart

MultiPieChart

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.