nori-ui — React Native + Web components

pnpm add @nori-ui/core

Optional — any icon library works; Lucide is recommended:

pnpm add lucide-react lucide-react-native

Tailwind preset

Add the @nori-ui/tokens preset to your tailwind.config.ts. The example below targets a Next.js App Router project; adjust the content globs to match your file layout.

import type { Config } from 'tailwindcss';
import noriPreset from '@nori-ui/tokens/tailwind-preset';
 
export default {
    presets: [noriPreset],
    content: ['./app/**/*.{ts,tsx,mdx}', './components/**/*.{ts,tsx}'],
} satisfies Config;

Provider

The library renders with sensible defaults out of the box, so the provider is optional. Wrap your app once if you want to customize theme, i18n, or semantic icons.

'use client';
import { Button } from '@nori-ui/core';
import { NoriProvider } from '@nori-ui/core/client';
 
export default function App() {
    return (
        <NoriProvider>
            <Button>Hello from nori-ui</Button>
        </NoriProvider>
    );
}

First component

import { Button, VStack } from '@nori-ui/core';
 
export default function Demo() {
    return (
        <VStack gap={3}>
            <Button>Primary</Button>
            <Button variant="secondary">Secondary</Button>
        </VStack>
    );
}

To browse all components interactively — live controls, variant switcher, a11y panel — open Storybook.

Getting started

Install

Tailwind preset

Provider

First component

On this page