@nextyugai/ui

The Nextyug console design system: the components, tokens and runtime that every Nextyug admin app shares.

There are two design systems in this organisation and only two. This is the one for admin consoles. Landing and marketing pages use @nextyugai/ui-landing.

Install

npm i @nextyugai/ui

// next.config.ts
const nextConfig: NextConfig = {
  transpilePackages: ['@nextyugai/ui'],
}

/* app/globals.css -- once, before your own rules */
@import '@nextyugai/ui/styles.css';

Both lines are required. The stylesheet is the kit's visual layer: the shell, the cards, the buttons, the tables and the badges are global classes, and the components render nothing recognisable without it. It reads the CSS variables NextyugUI emits, so the provider must wrap the tree.

This package ships TypeScript source rather than a build: it carries 'use client' directives and CSS modules, and every consumer is a Next.js app that already compiles both. See docs/packaging.md for why.

Peer dependencies: react ^19, react-dom ^19, antd ^6.5, next >=15.

Use

Wrap the app once, inside your AntdRegistry:

import { NextyugUI } from '@nextyugai/ui'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AntdRegistry>
          <NextyugUI>{children}</NextyugUI>
        </AntdRegistry>
      </body>
    </html>
  )
}

That is the org default — green primary, squared controls, 32px control height. It drives antd's ConfigProvider and emits every token as a --color-<name> custom property, so the components' CSS modules and your own stylesheets read the same values. One source of truth per token, in both directions.

Theming

An app may override colour. It may not override shape.

<NextyugUI theme={{ primary: '#0b7dbe' }}>{children}</NextyugUI>
<NextyugUI mode="dark">{children}</NextyugUI>

Overridable: primary, primary-deep, primary-tint, brand, danger, warning, info, plus radius. The list is exported as OVERRIDABLE.

Everything else — spacing, control heights, the type scale, hairlines — is fixed, because those are what make two apps look like one system. Colour is what makes them look like two products; only that is a per-app decision.

Fonts

The package never calls next/font. A font loader inside a package cannot be assigned to the app's CSS variable, so the variable is the contract: the package styles against var(--font-sans), and your app fills it.

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' })

What's in it

| Group | Exports | |---|---| | ui | Button AsyncButton Card Input Textarea Select Tag OtpInput CopyButton Avatar SkeletonCard SkeletonDetail SkeletonTable | | layout | AppShell Sidebar TopBar PageHeader Section Stack Row Stat StatGrid Actions | | form | Form FormActions TextField TextareaField SelectField | | data | DataTable Table SERIAL_WIDTH compareValues | | feedback | EmptyState StatusTag Icon | | runtime | useResource useAction usePagination messageOf ApiError NetworkError StatusTone + the formatters | | theme | NextyugUI light dark alias resolveTokens buildAntdTheme OVERRIDABLE |

The shell takes slots

AppShell, Sidebar and TopBar are layout. Your product's chrome goes in as slot content, and your menu comes in as data:

import { AppShell, Sidebar, type NavGroup } from '@nextyugai/ui'

const NAV: NavGroup[] = [
  { items: [{ label: 'Overview', href: '/account', icon: 'ant-design:appstore-outlined' }] },
]

<AppShell
  sidebar={
    <Sidebar
      brand={<Brand />}
      groups={NAV}
      rootHref="/account"
      header={<AccountCard />}
      footer={<SignOutButton />}
    />
  }
>
  {children}
</AppShell>

rootHref is the one path matched exactly rather than by prefix — the section root, which every other item's path starts with and would otherwise light up alongside them.

What's deliberately not in it

• dashboard/ — charts, the stat kit and the loaders. One consumer today, so no pressure on the API. Candidate for 0.2.0 when a second app needs it.
• AuthLayout — a page frame, not a component: it declares its own palette and mounts its own ConfigProvider over the console theme. Build sign-in pages from Card, the form fields and OtpInput.
• Product status vocabularies — StatusTone and its icons ship; the words ("delivered", "bounced", "mismatch") stay in the app that owns them. Tone is the design system; the words are the product.
• nav data, session, seo, marketing-paths, fonts — per app by definition.

Versioning

Semver from 0.1.0. While on 0.x a token-contract change is a minor bump, so upgrade deliberately.