Nana UI

Framework-agnostic · Built with Lit

Beautiful components. Every framework.

A framework-agnostic library of 60+ web components built with Lit. Drop <nana-button>, <nana-editor>, and <nana-color-picker> into React, Vue, Svelte, or plain HTML — themed, accessible, and tree-shakeable.

Get started Browse components Storybook ↗

app.tsx

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

<nana-card>
  <nana-card-header>
    <nana-card-title>Pro plan</nana-card-title>
    <nana-card-description>Renews Aug 1</nana-card-description>
  </nana-card-header>
  <nana-card-content>Manage your subscription and usage.</nana-card-content>
  <nana-card-footer>
    <nana-button variant="primary">Upgrade</nana-button>
  </nana-card-footer>
</nana-card>

Renders

Pro plan

Active

Renews Aug 1

Manage your subscription and usage.

Upgrade

Manage

Designed to compose

Real components, composed into a real interface — themed, responsive, and accessible out of the box.

Pro plan

Active

Billed monthly · renews Aug 1

7,200 / 10,000 API calls

Upgrade

Manage

Notifications

Email digests

Product updates

Security alerts

Your feedback

Fast

Reliable

Themeable

Why Nana UI

Framework-agnostic

Standards-based custom elements that work anywhere — React, Vue, Svelte, or plain HTML. Typed wrappers ship for all four.

Tree-shakeable

Import the barrel for convenience, or a single component subpath for the smallest possible bundle.

Themeable tokens

A design-token system built on CSS custom properties, with first-class dark mode via one data-theme attribute.

Accessible

Keyboard navigation, ARIA semantics, and focus management are build constraints, not an afterthought.

60+

Components

Framework wrappers

Runtime dependencies

WCAG 2.2

Get started in seconds

npm install @nana-tec/ui-components

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

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

Ready to build?

Drop 60+ accessible, themeable components into your stack today — in any framework.

Get started →