@useokiwi/ui

v0.2.0

Published

a month ago

Design system da kiwi — componentes React tematizados, tokens visuais e patterns para apps internas.

0High
0Medium
0Low

@useokiwi/ui

Design system da kiwi — 41 componentes React tematizados, tokens visuais (CSS vars + Tailwind v4 @theme) e fontes da marca, prontos para outras apps Next.js internas.

Status: v0.1.0-dev — pacote ainda não publicado oficialmente.

Instalação (quando publicado)

pnpm add @useokiwi/ui

Peer deps obrigatórias:

react ^19
react-dom ^19
@base-ui/react ^1.4
lucide-react ^1.0
tailwindcss ^4

Peer deps opcionais (só necessárias se você usar os componentes correspondentes):

sonner (toasts)
vaul (Drawer)
cmdk (Command)
input-otp (OTP input)
react-day-picker + date-fns (Calendar / DatePicker)
react-hook-form + @hookform/resolvers + zod (Form)
recharts (Chart)
next-themes (Sonner dark mode)

Uso

// app/layout.tsx
import "@useokiwi/ui/styles"; // tokens + theme + fontes

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <body>{children}</body>
    </html>
  );
}

// qualquer página
import { Button, Input, Dialog, DialogTrigger, DialogContent } from "@useokiwi/ui";
import { Plus } from "lucide-react";

export default function Page() {
  return (
    <main className="p-8 space-y-4">
      <Button>
        <Plus /> Nova demanda
      </Button>
      <Input placeholder="Buscar cliente…" />
      <Dialog>
        <DialogTrigger render={<Button variant="outline">Abrir</Button>} />
        <DialogContent>Olá</DialogContent>
      </Dialog>
    </main>
  );
}

Imports avulsos de CSS

Se preferir granularidade, dá pra importar separadamente:

import "@useokiwi/ui/styles/fonts";   // só @font-face
import "@useokiwi/ui/styles/tokens";  // só CSS vars
import "@useokiwi/ui/styles/theme";   // só @theme Tailwind v4

Componentes inclusos (41)

Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Banner, Breadcrumb, Button, Calendar, Card, Chart, Checkbox, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Form, HoverCard, Input, InputGroup, InputOTP, Label, Menubar, Pagination, Popover, Progress, RadioGroup, Select, Separator, Sheet, Skeleton, Slider, Sonner (Toaster), Switch, Tabs, Textarea, Toggle, ToggleGroup, Tooltip + utility cn().

Fontes embedadas

O pacote inclui as fontes variáveis da kiwi (auto-hospedadas):

Bricolage Grotesque — display
Work Sans — body
Caveat — script (apenas para o lockup (frame)works)
JetBrains Mono — mono (apenas para o wordmark kiwi)

Importar @useokiwi/ui/styles registra automaticamente todos os @font-face.

Desenvolvimento (no monorepo da kiwi)

pnpm --filter @useokiwi/ui build     # build único
pnpm --filter @useokiwi/ui dev       # watch mode

Patterns inclusos (`@useokiwi/ui/patterns`, 30 componentes)

import {
  // Tier 1 — alta prioridade
  NavBar, NavBarBrand, NavBarLinks, NavBarActions,
  Sidebar, SidebarHead, SidebarToggle, SidebarNav, SidebarItem, SidebarFoot,
  KpiCard, KpiGrid,
  EmptyState,
  SparklineCard, SparklineGrid,

  // Tier 2 — estrutura
  Steps, Step,
  PageHeader,
  Footer, FooterBrand, FooterCols, FooterCol, FooterCompact,
  TreeView, TreeNode,
  AnchorNav, AnchorItem,

  // Tier 3 — page-level
  StateCard,
  ProfileCard,
  AuthCard,
  SettingsLayout, SettingsLink, SettingsSectionTitle,
  DataTable, DataTableHead, DataTableBody, DataTableRow,

  // Tier 4 — variantes shadcn
  TabsUnderline, TabsUnderlineItem,
  TabsVertical, TabsVerticalItem,
  PaginationCompact, PaginationCounter, PaginationDivider, PaginationSelect,
  BadgeDot,
  AvatarStack, AvatarWithStatus,

  // Tier 5 — composições form
  FormInline, FormInlineRow,
  FormWizard,
  MultiSelectChips,
  TextareaCounter,
  FileDropZone,
  InputHelper,

  // Tier 6 — data display + estados
  ListAvatar, ListAvatarItem,
  ListChecklist, ListChecklistToolbar, ListChecklistItem,
  LoadingInline,
  SkeletonStack, SkeletonCard, SkeletonRow,
} from "@useokiwi/ui/patterns";

Charts inclusos (`@useokiwi/ui/charts`, 7 componentes)

import {
  Heatmap,            // calendário 52×7 estilo GitHub
  Funnel,             // pipeline com drop-off
  Gauge,              // semicírculo 180° (metas, NPS, uptime)
  DonutWithCenter,    // donut com KPI no meio
  IsoBars,            // barras isométricas (fake 3D)
  Iso3DHero,          // hero showcase com glow + KPI
  Iso3DDonut,         // donut com profundidade
} from "@useokiwi/ui/charts";

Roadmap

✅ Passo 1 — scaffold do monorepo + Button
✅ Passo 2 — todos os 41 componentes + tokens + fontes + theme Tailwind v4
✅ Passo 3 — patterns (30 componentes) + charts (7 componentes)
⏳ Passo 4 — refatorar app apps/manual substituindo demos inline pelos componentes do pacote
⏳ Passo 5 — CI publish via Bitbucket Pipelines + primeira release v0.1.0 no npm

Licença

UNLICENSED · uso interno da kiwi.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@useokiwi/ui

Instalação (quando publicado)

Uso

Imports avulsos de CSS

Componentes inclusos (41)

Fontes embedadas

Desenvolvimento (no monorepo da kiwi)

Patterns inclusos (@useokiwi/ui/patterns, 30 componentes)

Charts inclusos (@useokiwi/ui/charts, 7 componentes)

Roadmap

Licença

Patterns inclusos (`@useokiwi/ui/patterns`, 30 componentes)

Charts inclusos (`@useokiwi/ui/charts`, 7 componentes)