v1.0.2React Native

Tac UI Native

The React Native component library for Tac UI. 20 components with the same design language, tokens, and API surface — built for iOS, Android, and Expo.

Brand Identity

Tac UI Native is the mobile expression of the Tac design system — clean, structural, and strictly modern minimalist. Every surface has purpose, every edge is definitive, and every interaction asserts physical, tactile weight through spring physics.

Design Philosophy: "Clean & Modern Minimalist"

Native components embrace crisp borders and high-contrast typography, mirroring the web counterparts. Focus states are tight, surfaces are grounded with pure solids or subtle structural shadows, and every visual decision is shared through the token system.

Platform Architecture

Components use theme-driven StyleSheet values consumed from TacNativeProvider. Structural borders, consistent spacing, and semantic colors are resolved at runtime from the shared token definitions — ensuring visual parity with web without platform compromise.

styling

theme context

borders

1px solid structural

motion

snappy spring scaling

Typography & Hierarchy

Typography tokens define font sizes, weights, and line heights shared across platforms. Native components consume these values from the theme context, ensuring consistent typographic hierarchy between web and mobile.

Motion: Spring Physics

UI elements have mass and momentum. Buttons scale down on press with spring physics, alerts slide in with magnetic deceleration, and toggles animate with snappy spring configs — all using the React Native Animated API.

Accessibility

Components include proper accessibilityRole, accessibilityState, and accessibilityLabel props. Disabled states reduce opacity and block interactions consistently. Screen reader support is built into every interactive component.

Features

Design Tokens

Shared color, spacing, typography, and motion tokens via @tac-ui/tokens/native.

20 Components

Production-ready React Native components ported from @tac-ui/web.

Dark Mode

Built-in light, dark, and system themes via TacNativeProvider.

Cross-Platform

Consistent design language shared with @tac-ui/web counterparts.

Animated

Spring physics animations via React Native Animated API.

Layout Primitives

Stack and layout utilities for rapid screen scaffolding.

Quick Start

Install the packages and wrap your app with the provider.

bash

# Install
npm install @tac-ui/native @tac-ui/tokens @tac-ui/icon-native

# or with pnpm
pnpm add @tac-ui/native @tac-ui/tokens @tac-ui/icon-native

Usage

Import components and use them with full TypeScript IntelliSense.

tsx

import { TacNativeProvider, Button } from '@tac-ui/native';

export default function App() {
  return (
    <TacNativeProvider defaultMode="system">
      <Button variant="primary" onPress={() => console.log('pressed')}>
        Hello Native
      </Button>
    </TacNativeProvider>
  );
}