@nebutra/ui

Public mirror for @nebutra/ui from Nebutra/Nebutra-Sailor.

This repository is generated from the Nebutra Sailor monorepo. Package releases are cut from the monorepo and mirrored here for discovery, standalone cloning, and contribution intake.

• Canonical source: packages/design/ui in Nebutra/Nebutra-Sailor
• Package registry: npm and GitHub Packages
• Contributions: open issues or PRs here; maintainers port accepted changes back into the monorepo source package

---

Nebutra design-system UI primitives, layouts, patterns, hooks, typography, and token-integrated React components.

This package is the shared UI layer for Nebutra products. It combines Nebutra runtime tokens with Nebutra primitives, selected compatibility bridges, icons, and product-ready SaaS composition patterns.

Installation

pnpm add @nebutra/ui

For app rendering, load Nebutra runtime tokens once at the application root:

import "@nebutra/tokens/styles.css";

Usage

Theme Bridge

Use NebutraThemeProvider when consuming compatibility surfaces that depend on Lobe UI or Ant Design:

import { NebutraThemeProvider } from "@nebutra/ui";
import { Button } from "@nebutra/ui/components";

export function App() {
  return (
    <NebutraThemeProvider appearance="auto">
      <Button type="primary">Create workspace</Button>
    </NebutraThemeProvider>
  );
}

Product Layouts

import { AppShell, EmptyState, PageHeader } from "@nebutra/ui/layout";

export function DashboardEmptyState() {
  return (
    <AppShell>
      <PageHeader title="Projects" description="Manage reusable product surfaces." />
      <EmptyState title="No projects yet" description="Create one to start shipping." />
    </AppShell>
  );
}

Components And Patterns

import { AnimateIn, Button } from "@nebutra/ui/components";
import { DashboardPanel } from "@nebutra/ui/patterns";

export function WorkspaceSurface() {
  return (
    <DashboardPanel
      title="Workspace"
      description="Reusable command surfaces for product teams."
    >
      <AnimateIn preset="fadeUp">
        <Button type="primary">Open command center</Button>
      </AnimateIn>
    </DashboardPanel>
  );
}

Icons

import { OpenAI, Search, Settings } from "@nebutra/ui/icons";

<OpenAI size={24} />;
<Search size={20} />;
<Settings size={20} />;

Exports

Path	Description
@nebutra/ui	Theme bridge plus selected common icon exports
@nebutra/ui/components	Nebutra components, chat input/list surfaces, animation helpers, AI prompt box, node graph canvas, and product widgets
@nebutra/ui/layout	App shell, page header, status, section, and empty/loading/error states
@nebutra/ui/layouts	Section container, themed section, and bento grid layouts
@nebutra/ui/icons	Lobe, Lucide, and Nebutra icon exports
@nebutra/ui/theme	NebutraThemeProvider and compatibility theme bridge types
@nebutra/ui/primitives	Low-level UI primitives and visual building blocks
@nebutra/ui/primitives/canonical	Canonical primitive token exports
@nebutra/ui/patterns	SaaS dashboard, command, card, terminal, QA, sidebar, and workspace patterns
@nebutra/ui/typography	Font utilities and typography tokens
@nebutra/ui/typography/fonts.css	Font-face CSS for Nebutra typography
@nebutra/ui/hooks	Responsive, focus, undo, hotkey, media query, and interaction hooks
@nebutra/ui/utils	Shared utilities such as cn
@nebutra/ui/tailwind.preset	Tailwind preset integration

Token Architecture

Runtime design tokens live in @nebutra/tokens/styles.css as CSS variables. Use Tailwind classes backed by those variables, or var() directly in places where Tailwind is not available.

<div className="bg-primary text-foreground border-border" />
<div style={{ color: "var(--color-primary)" }} />

Source-of-truth flow:

@nebutra/brand  -> brand primitives
@nebutra/tokens -> runtime CSS variables and theme provider primitives
@nebutra/ui     -> token-consuming components, layouts, hooks, and patterns

Repository Model

The canonical source for this package lives in the Nebutra Sailor monorepo at packages/design/ui. Public subrepo mirrors are generated from that source for discovery, standalone cloning, and contribution intake.

License

MIT

AI provider and third-party icons may be subject to their respective trademark guidelines.