nori-ui

Getting started

Install and render your first component in under five minutes.

Install

yarn add @nori-ui/core
# optional — any icon library works; Lucide is recommended:
yarn add lucide-react lucide-react-native

Tailwind preset

Add the @nori-ui/tokens preset to your consumer tailwind.config.ts:

import noriPreset from '@nori-ui/tokens/tailwind-preset';
export default { presets: [noriPreset], content: [/* your globs */] };

Provider

Wrap your app once. The library works without a provider too — provider only customizes theme / i18n / semantic icons.

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

First component

import { Button } from '@nori-ui/core';
 
<Button variant="primary">Click me</Button>

Previous

Introduction

Next

Text

On this page