Package Exports

@nimbuslab/lumina/components/accordion
@nimbuslab/lumina/components/alert
@nimbuslab/lumina/components/alert-dialog
@nimbuslab/lumina/components/analytics
@nimbuslab/lumina/components/aspect-ratio
@nimbuslab/lumina/components/avatar
@nimbuslab/lumina/components/avatar-group
@nimbuslab/lumina/components/badge
@nimbuslab/lumina/components/breadcrumb
@nimbuslab/lumina/components/button
@nimbuslab/lumina/components/calendar
@nimbuslab/lumina/components/card
@nimbuslab/lumina/components/carousel
@nimbuslab/lumina/components/chart
@nimbuslab/lumina/components/checkbox
@nimbuslab/lumina/components/collapsible
@nimbuslab/lumina/components/combobox
@nimbuslab/lumina/components/command
@nimbuslab/lumina/components/context-menu
@nimbuslab/lumina/components/date-picker
@nimbuslab/lumina/components/dialog
@nimbuslab/lumina/components/drawer
@nimbuslab/lumina/components/dropdown-menu
@nimbuslab/lumina/components/error-page
@nimbuslab/lumina/components/form
@nimbuslab/lumina/components/hover-card
@nimbuslab/lumina/components/icons
@nimbuslab/lumina/components/icons/custom
@nimbuslab/lumina/components/icons/lucide
@nimbuslab/lumina/components/icons/phosphor
@nimbuslab/lumina/components/input
@nimbuslab/lumina/components/input-group
@nimbuslab/lumina/components/input-otp
@nimbuslab/lumina/components/label
@nimbuslab/lumina/components/menubar
@nimbuslab/lumina/components/navigation-menu
@nimbuslab/lumina/components/pagination
@nimbuslab/lumina/components/popover
@nimbuslab/lumina/components/progress
@nimbuslab/lumina/components/radio-group
@nimbuslab/lumina/components/resizable
@nimbuslab/lumina/components/scroll-area
@nimbuslab/lumina/components/select
@nimbuslab/lumina/components/separator
@nimbuslab/lumina/components/sheet
@nimbuslab/lumina/components/sidebar
@nimbuslab/lumina/components/skeleton
@nimbuslab/lumina/components/slider
@nimbuslab/lumina/components/sonner
@nimbuslab/lumina/components/switch
@nimbuslab/lumina/components/table
@nimbuslab/lumina/components/tabs
@nimbuslab/lumina/components/textarea
@nimbuslab/lumina/components/toggle
@nimbuslab/lumina/components/toggle-group
@nimbuslab/lumina/components/tooltip
@nimbuslab/lumina/hooks/use-mobile
@nimbuslab/lumina/hooks/use-mood
@nimbuslab/lumina/lib/utils
@nimbuslab/lumina/og/changelog-card
@nimbuslab/lumina/og/load-font
@nimbuslab/lumina/og/nimbus-og
@nimbuslab/lumina/styles/globals.css
@nimbuslab/lumina/templates/api-health
@nimbuslab/lumina/templates/api-landing
@nimbuslab/lumina/tokens
@nimbuslab/lumina/tokens/colors
@nimbuslab/lumina/tokens/index
@nimbuslab/lumina/tokens/moods
@nimbuslab/lumina/tokens/shadows
@nimbuslab/lumina/tokens/spacing
@nimbuslab/lumina/tokens/typography

Readme

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

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 hugo@nimbuslab.com.br.

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