Nana UI
A framework-agnostic Web Component design system built with Lit and Tailwind CSS v4. Components work in any framework — React, Vue, Svelte, or plain HTML.
Installation
bash
| 1 | npm install @nana-tec/ui-components @nana-tec/ui-tokens |
Quick Start
html
| 1 | <!-- 1. Load design tokens --> |
| 2 | <link rel="stylesheet" href="node_modules/@nana-tec/ui-tokens/dist/tokens.css" /> |
| 3 | |
| 4 | <!-- 2. Import components (tree-shakeable ESM) --> |
| 5 | <script type="module"> |
| 6 | import "@nana-tec/ui-components/button"; |
| 7 | import "@nana-tec/ui-components/input"; |
| 8 | </script> |
| 9 | |
| 10 | <!-- 3. Use in HTML --> |
| 11 | <nana-button variant="primary">Hello world</nana-button> |
CDN Usage
html
| 1 | <link rel="stylesheet" href="https://cdn.example.com/@nana-tec/ui-tokens/dist/tokens.css" /> |
| 2 | <script type="module" src="https://cdn.example.com/@nana-tec/ui-components/dist/nana-ui.iife.js"></script> |
Packages
| Package | Description |
|---|---|
@nana-tec/ui-tokens | Design tokens as CSS variables + ESM object |
@nana-tec/ui-themes | Base + dark theme CSS (Tailwind v4) |
@nana-tec/ui-components | Lit web components (nana-*) |