nmis-ui

v0.2.0

Published

a month ago

A React component library built with TypeScript, Vanilla Extract, and Radix UI primitives.

0High
0Medium
0Low

dalvarez-nm

NMIS-UI

A React component library built with TypeScript, Vanilla Extract, and Radix UI primitives.

Features

React 18 and 19 support
Vanilla Extract - Zero-runtime CSS-in-TypeScript
Radix UI - Accessible, unstyled component primitives
TypeScript with strict mode
Dual module format (ESM + CommonJS)
Storybook documentation and visual testing
Accessibility-first components
Light and dark mode support

Installation

npm install nmis-ui

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-dom

| Package | Version | |---------|---------| | react | ^18.0.0 || ^19.0.0 | | react-dom | ^18.0.0 || ^19.0.0 |

Quick Start

Import the styles (once, in your app's root):

// In your root layout or App.tsx
import 'nmis-ui/styles.css';

Use the components:

import { Button } from 'nmis-ui';

function App() {
  return (
    <div>
      <Button variant="default" size="default">
        Click me
      </Button>
      
      <Button variant="outline" size="lg">
        Large Outline
      </Button>
      
      <Button variant="destructive" loading>
        Deleting...
      </Button>
    </div>
  );
}

Components

Button

A flexible button component with multiple variants and sizes.

import { Button } from 'nmis-ui';

// Variants: default, secondary, outline, ghost, link, destructive
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>

// Sizes: default, xs, sm, lg, icon, icon-xs, icon-sm, icon-lg
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><IconComponent /></Button>

// Loading state
<Button loading>Saving...</Button>

// As child (render as different element)
<Button asChild>
  <a href="/link">Link styled as button</a>
</Button>

Theme Tokens

The library exports theme tokens that you can use for consistent styling:

import { vars } from 'nmis-ui';

// Available tokens:
vars.color.primary
vars.color.secondary
vars.color.destructive
vars.color.background
vars.color.foreground
vars.spacing['4']        // 0, 0.5, 1, 1.5, 2, ... 16
vars.radius.sm           // sm, md, lg, xl, 2xl, full
vars.fontSize.sm         // xs, sm, base, lg, xl, 2xl
vars.fontWeight.medium   // normal, medium, semibold, bold
vars.shadow.md           // xs, sm, md, lg
vars.transition.normal   // fast, normal, slow

Dark Mode

The library supports dark mode via a .dark class on the document root:

<html class="dark">
  <!-- Dark mode styles applied -->
</html>

Documentation

Browse the full component library, props documentation, and interactive examples in Storybook:

npm run storybook

Development

Prerequisites

Node.js 22+
npm, pnpm, or yarn

Setup

# Clone the repository
git clone <repository-url>
cd nmis-ui

# Install dependencies
npm install

# Start Storybook development server
npm run dev

Available Scripts

| Command | Description | |---------|-------------| | npm run dev | Start Storybook development server | | npm run build | Build the library for production (tsup) | | npm run build:vite | Alternative build with Vite | | npm run lint | Run ESLint | | npm run storybook | Start Storybook | | npm run build-storybook | Build static Storybook site |

Build Output

The production build (npm run build) outputs:

dist/
├── index.js        # ESM bundle
├── index.cjs       # CommonJS bundle
├── index.css       # Extracted CSS (import as 'nmis-ui/styles.css')
├── index.d.ts      # TypeScript declarations
└── index.d.cts     # TypeScript declarations (CJS)

Architecture

Styling: Vanilla Extract with recipe() for variants
Primitives: Radix UI for accessible interactions
Icons: Lucide React
Dev Server: Vite + Storybook
Build: tsup with esbuild

Claude Code Skill

This repo includes a SKILL.md file that can be used with Claude Code to give Claude deep context about nmis-ui's components, theme tokens, and development patterns.

To install the skill, copy it into your Claude skills directory:

mkdir -p ~/.claude/skills/nmis-ui
cp SKILL.md ~/.claude/skills/nmis-ui/SKILL.md

Once installed, Claude will understand how to use every nmis-ui component correctly, build new components following the Vanilla Extract + Radix UI patterns, and work with the NMIS design token system.

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.