Skip to content
Nana UI

Getting Started

Nana UI is a professional design system built with Lit web components. The components are standards-based custom elements, so they work across any framework — React, Vue, Svelte, or vanilla JavaScript — with consistent APIs, events, and slots.

Installation

Section titled “Installation”
Terminal window
# npm
npm install @nana-tec/ui-components


# bun
bun add @nana-tec/ui-components

Importing components

Section titled “Importing components”

Import the barrel to register every component at once:

import "@nana-tec/ui-components";

Or import a single component’s subpath for the smallest bundle — this registers only that element:

import "@nana-tec/ui-components/button";
import "@nana-tec/ui-components/color-picker";

Once imported, use the custom element anywhere in your markup:

<nana-button variant="primary">Save changes</nana-button>

Framework usage

Section titled “Framework usage”

Because these are native custom elements, they drop into any template.

Vanilla / HTML

Section titled “Vanilla / HTML”
<script type="module">
  import "@nana-tec/ui-components/button";
</script>


<nana-button variant="primary">Click me</nana-button>

React

Section titled “React”

Typed React wrappers ship alongside the elements:

import { NanaButton } from "@nana-tec/ui-components/react";


export function Save() {
  return <NanaButton variant="primary">Save</NanaButton>;
}

Vue & Svelte

Section titled “Vue & Svelte”

Vanilla tags work directly; the package augments the framework’s template types so <nana-*> tags type-check:

// vue: nuxt.config or main.ts
import "@nana-tec/ui-components";
<script>
  import "@nana-tec/ui-components/button";
</script>


<nana-button variant="primary">Click me</nana-button>

Next steps

Section titled “Next steps”