@nimbuslab/lumina

v0.3.0

Published

a month ago

Design system React acessível construído sobre Radix UI e Tailwind CSS v4, otimizado para Next.js App Router e React 19. Tokens semânticos Apple-friendly, temas dark/light/mood e ícones unificados.

Lumina

Design system React acessível, sobre Radix UI e Tailwind CSS v4. Otimizado para Next.js App Router, React 19 e Server Components.

Componentes · Tokens · Temas · Roadmap

Por que Lumina

Acessível por padrão — primitivos Radix UI cobrem ARIA, foco e teclado
Tailwind CSS v4 nativo — @theme block, @source automático, zero tailwind.config.ts
Tokens semânticos Apple-friendly — canvas, ink, surface, surface-elevated, hairline, tint coexistindo com tokens shadcn
Tree-shakeable de verdade — build por arquivo (ESM puro), só carrega o que você importa
Animation-library-agnostic — moods prontos para interpolação com GSAP, sem dependência obrigatória
OG images nativos — templates Open Graph para Next.js (nimbus-og, changelog-card)
Icons unificados — wrapper único para Lucide + Phosphor + custom

Instalação

bun add @nimbuslab/lumina

Peer dependencies

bun add react react-dom next tailwindcss
# opcional, se for animar com GSAP
bun add gsap

| Peer | Versão | |---|---| | react | ^19.0.0 | | react-dom | ^19.0.0 | | next | >=15.0.0 | | tailwindcss | ^4.0.0 | | gsap (opcional) | >=3.12.0 |

Quick start

/* app/globals.css */
@import "@nimbuslab/lumina/styles/globals.css";

// app/page.tsx
import { Button } from "@nimbuslab/lumina/components/button"
import { Card } from "@nimbuslab/lumina/components/card"

export default function Page() {
  return (
    <Card>
      <Button>Clique aqui</Button>
    </Card>
  )
}

Pronto. Light mode por padrão, dark mode com class="dark" no <html>.

Componentes

70+ componentes baseados em primitivos Radix:

Accordion · Alert · AlertDialog · AspectRatio · Avatar · AvatarGroup · Badge · Breadcrumb · Button · Calendar · Card · Carousel · Chart · Checkbox · Collapsible · Combobox · Command · ContextMenu · DatePicker · Dialog · Drawer · DropdownMenu · Form · HoverCard · Input · InputOTP · Label · Menubar · NavigationMenu · Pagination · Popover · Progress · RadioGroup · Resizable · ScrollArea · Select · Separator · Sheet · Sidebar · Skeleton · Slider · Sonner · Switch · Table · Tabs · Textarea · Toggle · ToggleGroup · Tooltip

E utilitários: Icon (Lucide + Phosphor + custom), OG templates, Hooks.

Tokens de design

shadcn-compatible (padrão mercado)

--background  --foreground
--card        --card-foreground
--popover     --popover-foreground
--primary     --primary-foreground
--secondary   --secondary-foreground
--muted       --muted-foreground
--accent      --accent-foreground
--destructive --destructive-foreground
--border  --input  --ring  --radius
--sidebar-*   --chart-1..5

Apple-friendly (aliases)

--color-canvas             /* → background */
--color-ink                /* → foreground */
--color-ink-muted          /* → muted-foreground */
--color-surface            /* → card */
--color-surface-elevated   /* card + 6% white */
--color-surface-sunken     /* background + 4% black */
--color-hairline           /* border 60% alpha */
--color-tint               /* → primary */
--color-tint-subtle        /* primary 10% alpha */

Brand

--color-nimbus-50 ... --color-nimbus-950

Temas

Light — padrão (sem classe)
Dark — class="dark" no <html>
Moods — .mood-warm, .mood-light, .mood-intense

Aplicação programática (compatível com GSAP):

import gsap from "gsap"
import { buildMoodProxy, applyMoodToElement } from "@nimbuslab/lumina/tokens/moods"

const proxy = buildMoodProxy("dark")
const target = buildMoodProxy("warm")

gsap.to(proxy, {
  ...target,
  duration: 0.6,
  onUpdate: () => applyMoodToElement(proxy, document.documentElement),
})

Roadmap

[x] v0.2.0 — primeira release no npm
[ ] v0.3.0 — release público open source (este)
[ ] v0.4.0 — Storybook hospedado em lumina.nimbuslab.com.br
[ ] v0.5.0 — temas adicionais e variantes de mood
[ ] v1.0.0 — API estável, breaking changes só em majors

Compatibilidade

| Lumina | React | Next.js | Tailwind | |---|---|---|---| | 0.x | ^19 | >=15 | ^4 |

Bundle

Bundle por arquivo (bundle: false no tsup), tree-shaking máximo. Importe só o que usa:

// pega só o Button
import { Button } from "@nimbuslab/lumina/components/button"

Cada componente carrega só seus primitivos Radix necessários.

Contribuindo

Lumina é mantido pela equipe da nimbuslab. PRs externos são aceitos por convite. Para reportar bugs ou sugerir features, contate [email protected].

Veja CONTRIBUTING.md para mais detalhes.

Stack

Radix UI · Tailwind CSS v4 · TypeScript · tsup · Changesets · Bun

Licença

Construído em Brasília, DF — Brasil