Introduction

A React Native component library built on Uniwind, Reanimated and the Gesture API.

Delacour UI Native is a React Native component library styled with Uniwind (Tailwind CSS v4 for React Native), animated with Reanimated, and driven by the Gesture Handler API. Every component composes rather than configures: you build a button out of a label and an icon, not out of fifteen boolean props.

import { Button } from "@delacour/native-ui/button";
import { Icon } from "@delacour/native-ui/icon";
import { IconArrowRight } from "@delacour/native-ui/icons/central";

<Button haptic="selection" onPress={next}>
  <Button.Label>Continue</Button.Label>
  <Icon icon={IconArrowRight} />
</Button>;

The icon above names no size and no colour. The button publishes both to its subtree, so a bare <Icon> inside one comes out matching the label it sits beside.

The three patterns

Every component in the library is one of three shapes. Knowing which one you are looking at tells you where its styles live and how to extend it.

What makes it different

Composition over booleans

Icons are children, not props. Loading state swaps the icon it replaces rather than joining it, so nothing shifts when work begins.

One scale, shared

Icon and Spinner resolve md to the same edge length. A Checkbox's square reads the icon scale two steps up rather than minting its own.

Themed by CSS variables

Components name bg-background and text-muted-foreground, never a raw palette colour and never a dark: prefix. Swapping the variables swaps the theme.

Ships as source

No build step. Uniwind's transform has to run inside your app's Metro pipeline, so the package ships raw .tsx and your bundler compiles it.

Scope

This library is React Native only — iOS and Android, Expo or bare. It takes no navigation dependency and no form-library dependency. Where a component needs to talk to a router it takes a callback instead: Screen.Navbar.BackButton has an onPress, not a router.back().

Next

On this page