v1.0.2Open Source

Interfaces that breathe

A design system where code breathes. Spring physics, sequential illumination, and glassmorphic depth — crafted for interfaces that feel alive.

—components

—tokens

—layouts

—a11y

One system, every platform

Shared tokens, consistent APIs, and the same design language across web and mobile.

@tac-ui/web

React · Tailwind CSS · Framer Motion

39+ accessible components with CSS custom properties, spring animations, and glassmorphic effects. Built for Next.js and any React project.

@tac-ui/native

React Native · Animated API · Expo

35+ components with the same design tokens and API surface. Spring physics via React Native Animated, theme context, and full dark mode.

Fluid Motion

Spring physics with mass and momentum. No mechanical easing — every element arrives with organic deceleration.

Sequential Illumination

Border glows that track and accelerate. Light sweeps across surfaces, creating depth hierarchy through motion.

Glassmorphism Depth

Translucent layers with backdrop blur create spatial depth. Elements float at different altitudes.

Quick Start

Get up and running in seconds.

Install

bash

pnpm add @tac-ui/web @tac-ui/tokens @tac-ui/icon

App.tsx

tsx

import { TacProvider, Button } from '@tac-ui/web';

export default function App() {
  return (
    <TacProvider>
      <Button>Hello Tac UI</Button>
    </TacProvider>
  );
}

Install

bash

pnpm add @tac-ui/native @tac-ui/tokens @tac-ui/icon-native

App.tsx

tsx

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

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

Built for developers

39+ accessible components, ready to compose.

Buttons

Form Controls

Data Display

Newv1.0.2Beta

Feedback

Ready to build?

Start using Tac UI in your next project. It's free, open source, and built for production.