MoonUI Pro 🌙✨

Premium React components for advanced web applications. MoonUI Pro extends the base MoonUI library with sophisticated, enterprise-grade components designed for complex use cases and professional applications.

Two setups, both mandatory. Styling setup makes the components look right — skip it and they render shapeless and colourless. License setup makes them work — without a build-time license token, Pro components render a lock screen instead of their content.

✨ What's Included

A selection of what ships in the package. The full, always-current component list lives at moonui.dev/docs.

📊 Data & Analytics

• DataTable — Enterprise table with search, faceted/quick filters, export, row selection, expandable rows and bulk actions
• Table — Lower-level styled table primitives
• AdvancedChart, ChartWidget — Data visualization built on Recharts
• Timeline — Event timelines with rich content
• Kanban — Drag-and-drop board layouts

✏️ Editors & Forms

• RichTextEditor — WYSIWYG editor
• FormWizard — Multi-step forms with validation and progress tracking
• ColorPicker — Color selection

🎮 Interactive & Gesture

• DraggableList — Sortable lists with smooth animations
• SwipeableCard — Touch-friendly cards
• GestureDrawer — Mobile-optimized drawer with gestures
• VirtualList, SelectableVirtualList — High-performance virtualized lists
• LazyList, AnimatedList — Lazy and animated list rendering

📅 Calendar

• Calendar, AdvancedCalendar — Date selection and event calendars

🎨 Visual & Motion

• BentoGrid — Modern bento-style layouts
• Spotlight — Search and command launcher
• ParallaxScroll, ScrollReveal — Scroll-driven effects
• GridPattern, GridDistortion — Decorative backgrounds
• Marquee, Meteors — Motion accents
• LightboxProvider — Image lightbox

🔤 Text Effects

• GlitchText, ShinyText, TextReveal, Text3D

🚀 Installation

npm install @moontra/moonui-pro @moontra/moonui

# Tailwind is required; the components also use the animate plugin
npm install -D tailwindcss tailwindcss-animate

Why @moontra/moonui is in that line. Pro ships its own React primitives (Button, Card, Badge, Input, …), so you do not need the free package for its components. You do need it for its design system: the only copy of the Tailwind preset and of the CSS variables the Pro components paint with lives there. Between its inline styles and its Tailwind classes, Pro needs 51 theme variables (--primary, --card, --secondary-500, --info-subtle, …) and defines none of them. Install Pro on its own and every bg-primary resolves to transparent and every text-foreground to plain black — see Styling setup.

The free package is MIT-licensed, and using its components is still optional.

🎨 Styling setup

All three steps are required. Skip step 1 and the utility classes are never generated; skip step 2 and they are generated but every colour resolves to nothing; skip step 3 and the Radix-driven enter/exit animations are missing.

1. Add the Tailwind preset

The preset maps Tailwind's colour, radius and animation scales onto MoonUI's CSS variables. The content entry for Pro's dist/** matters just as much: Tailwind only generates classes it can see, and the Pro component classes live inside the package bundle.

// tailwind.config.js  (Tailwind v3 config format)
module.exports = {
    presets: [require("@moontra/moonui/tailwind-preset")],
    content: [
        "./src/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@moontra/moonui-pro/dist/**/*.{js,mjs}",
        // only if you also use the free components:
        "./node_modules/@moontra/moonui/dist/**/*.{js,mjs}",
    ],
    plugins: [require("tailwindcss-animate")],
};

If your package.json has "type": "module", name the file tailwind.config.cjs. Left as .js, Node parses it as ESM and the module.exports above throws ReferenceError: module is not defined before Tailwind ever sees your config.

There is no separate Pro preset — @moontra/moonui/tailwind-preset is a superset of everything Pro needs. It declares every colour key Pro uses (primary, secondary, success, warning, caution, error, info, destructive, muted, accent, card, popover, border, input, ring, background, foreground) plus brand/brand-accent, and it already sets darkMode: "class".

2. Import the design tokens

The preset only maps the variables; this file defines them, for both light and dark.

/* globals.css */
@import "@moontra/moonui/src/styles/tokens.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

Which specifier, and why they differ. CSS @import and JavaScript import are resolved by different machinery, and the two want different strings:

| Where you write it | Specifier that works | |---|---| | CSS @import, Tailwind v3 + PostCSS (postcss-import) | @moontra/moonui/src/styles/tokens.css | | CSS @import, Vite (its resolver reads exports) | @moontra/moonui/tokens.css | | JavaScript import (Node / any bundler) | @moontra/moonui/tokens.css |

postcss-import does not read a package's exports map, so in that pipeline it needs the physical path (it ships in the tarball via the package files field). Vite and Node are the mirror image: they are exports-aware and reject the physical path. Both routes load the same file — pick one, not both.

// app/layout.tsx — the JavaScript route
import "@moontra/moonui/tokens.css";

Recommended: also add the semantic layer (shadow-xs, animate-fade-in, duration-fast, ease-bounce and the elevation/duration/easing tokens). Components render correctly without it — every variable the preset reads already lives in tokens.css.

@import "@moontra/moonui/src/styles/design-system.css";

3. Keep tailwindcss-animate in plugins

Pro's overlays (Dialog, Popover, Select, Toast, NavigationMenu, …) rely on animate-in, fade-in, slide-in-from-* and data-[state=open]: variants. They come from the tailwindcss-animate plugin, which the preset deliberately does not bundle so that the package cannot force a dependency on you. Without it those 25 classes are simply absent and the overlays pop in without transition.

Bringing your own theme

You are not obliged to use MoonUI's values — the preset reads variables, it does not hardcode colours. Override any of them after the import and Pro follows:

@import "@moontra/moonui/src/styles/tokens.css";

:root {
    --primary: 262 83% 58%;
}

What you cannot do is define nothing. If you skip tokens.css you must supply all 51 variables yourself, including MoonUI-specific families such as --secondary-500, --warning-700, --info-subtle and --brand-*.

🔐 License setup

Pro access is resolved at build time, not per request. The flow is:

MOONUI_LICENSE_KEY  ──►  postinstall.cjs  ──►  .moonui-license-token  ──►  withMoonUIProToken
   (build env)            (validates)          (base64 JSON)              (inlines into bundle)
                                                                                  │
                                                    MoonUIAuthProvider  ◄─────────┘
                                                    (reads it at runtime)

All three steps are required. Skip any one and every Pro component renders ProLockScreen.

1. Provide your license key at build time

# CI / Docker / any build environment
MOONUI_LICENSE_KEY=moonui_xxxxxxxxxxxx

MOONUI_LICENSE_KEY is the canonical name. NEXT_PUBLIC_MOONUI_LICENSE_KEY, VITE_MOONUI_LICENSE_KEY and REACT_APP_MOONUI_LICENSE_KEY are also accepted as fallbacks.

2. Generate the token before the build

Package managers skip lifecycle scripts in many CI setups, so run the token generator explicitly:

{
  "scripts": {
    "prebuild": "node node_modules/@moontra/moonui-pro/scripts/postinstall.cjs",
    "build": "next build"
  }
}

3. Inline the token and mount the provider

Next.js — wrap your config:

// next.config.mjs
import { withMoonUIProToken } from '@moontra/moonui-pro/next-config';

export default withMoonUIProToken({
  // ...your Next.js config
});

Vite — add the plugin:

// vite.config.js
import moonUIProPlugin from '@moontra/moonui-pro/vite';

export default {
  plugins: [moonUIProPlugin()],
};

Then wrap your app once, at the root:

// app/layout.tsx
import { MoonUIAuthProvider } from '@moontra/moonui-pro';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MoonUIAuthProvider>{children}</MoonUIAuthProvider>
      </body>
    </html>
  );
}

MoonUIAuthProvider takes no licenseKey prop — it reads the token that step 2 and 3 produced.

⚠️ Without the provider, hasProAccess is always false. useMoonUIAuth() does not throw when no provider is mounted; it silently returns a free-plan state. That is the single most common cause of "my license is valid but everything is locked".

Deploying

The token is written the same way on every platform — Vercel, Netlify, Docker, Kubernetes, Dokploy, or a bare server. Just make sure MOONUI_LICENSE_KEY is present during the build, not only at runtime.

ARG MOONUI_LICENSE_KEY
ENV MOONUI_LICENSE_KEY=$MOONUI_LICENSE_KEY
RUN npm run build

Self-hosted gotcha: if you build with NODE_ENV=production, npm skips devDependencies. Keep autoprefixer, tailwindcss and postcss in dependencies, or the build fails before the token ever matters.

Full deployment matrix: moonui.dev/docs/authentication

🧩 Usage

import { MoonUIAuthProvider, DataTable, RichTextEditor, Card } from '@moontra/moonui-pro';

function App() {
  const data = [
    { id: 1, name: 'John', email: '[email protected]' },
    { id: 2, name: 'Jane', email: '[email protected]' },
  ];

  const columns = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'email', header: 'Email' },
  ];

  return (
    <MoonUIAuthProvider>
      <Card className="p-6">
        <h1 className="text-2xl font-bold mb-4">MoonUI Pro Demo</h1>

        <DataTable data={data} columns={columns} searchable pagination />

        <RichTextEditor placeholder="Start writing..." className="mt-4" />
      </Card>
    </MoonUIAuthProvider>
  );
}

📊 DataTable

DataTable is built on TanStack Table v8. Column definitions are standard ColumnDef objects.

<DataTable
  data={data}
  columns={columns}
  searchable
  filterable
  selectable
  pagination
  pageSize={25}
  exportable={{ formats: ['csv', 'json'], filename: 'users' }}
  onRowSelect={(rows) => console.log(rows)}
/>

Feature flags

features groups the table's optional capabilities:

<DataTable
  data={data}
  columns={columns}
  features={{
    sorting: true,
    filtering: true,
    pagination: true,
    search: true,
    columnVisibility: true,
    rowSelection: true,
    density: true,
    export: ['csv', 'json'],
  }}
/>

Quick filters

Dropdown filters, optionally auto-detecting their options from the data:

<DataTable
  data={data}
  columns={columns}
  quickFilters={[
    { column: 'status', label: 'Status', options: 'auto', showCounts: true },
    { column: 'department', label: 'Department', multi: true },
  ]}
/>

Faceted filters

Checkbox filters with counts:

<DataTable data={data} columns={columns} facetedFilters={['category', 'tags']} />

Filtering custom-rendered cells

When a cell renders a component, tell the filter where the raw value lives:

const columns = [
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ row }) => <Badge>{row.getValue('status')}</Badge>,
    meta: {
      filterType: 'select',
      filterOptions: ['Active', 'Pending', 'Completed'],
      filterValueAccessor: (row) => row.status,
    },
  },
];

Expandable rows

<DataTable
  data={data}
  columns={columns}
  enableExpandable
  renderSubComponent={({ row }) => <pre>{JSON.stringify(row.original, null, 2)}</pre>}
/>

🎨 What the bundle does and does not ship

Setup lives in Styling setup; this section is about why it is needed.

Injected by the JavaScript bundle. The ESM build inlines the eight stylesheets its components import — nprogress, meteors, aurora-background, slash-commands, table-styles, timeline, plus react-grid-layout and react-resizable from their own packages — and appends them to <head> on import. Nothing to do on your side.

Not injected, and this is the part people miss. Those eight files are component CSS. They are not the design system:

• Utility classes are not shipped. Every Pro component styles itself with Tailwind classes (bg-primary, border-border, text-muted-foreground). Those rules are generated by your Tailwind build, which is why your content globs must include node_modules/@moontra/moonui-pro/dist/**.
• Token values are not shipped. dist/index.mjs reads 14 theme variables directly in inline styles, and the utility rules Tailwind generates from its class names pull in the rest — 51 in total. The bundle defines zero of them. They come from @moontra/moonui's tokens.css (or from your own equivalent).

There is no @moontra/moonui-pro/styles.css entry point — importing one fails, and there is no published Pro stylesheet that would define tokens. The CDN/IIFE bundle is the one exception to the injection rule: it does not inject, and ships a companion dist/cdn/index.css — which is likewise component CSS, not tokens. See Package Details.

MoonUI Pro follows the base MoonUI theming system: HSL triplets in CSS variables and a .dark class for dark mode — the same system @moontra/moonui uses, from the same file.

⚡ Performance

• Virtualization — VirtualList, SelectableVirtualList for large collections
• Lazy rendering — LazyList defers offscreen work
• Tree shaking — ESM-only build; import only what you use

import { VirtualList } from '@moontra/moonui-pro';

<VirtualList
  items={thousandsOfItems}
  itemHeight={50}
  renderItem={({ item, index }) => <div key={item.id}>Row {index}: {item.name}</div>}
/>

📱 Mobile & Touch

import { SwipeableCard, GestureDrawer } from '@moontra/moonui-pro';

<SwipeableCard onSwipeLeft={handleSwipeLeft} onSwipeRight={handleSwipeRight}>
  <CardContent />
</SwipeableCard>

📦 Package Details

• Format: ESM only (dist/index.mjs, 2.53 MiB unminified in 4.19.2), component styles injected by JS
• CDN: minified IIFE bundle at dist/cdn/index.global.js (3.23 MiB), global name MoonUIPro, with a companion dist/cdn/index.css (10.4 KB of component CSS — no tokens)
• Types: full TypeScript definitions included
• Peer dependencies (declared): React 18+ or 19, React DOM, next-themes
• Also required, not declared as peers: Tailwind CSS v3 and tailwindcss-animate at build time, and @moontra/moonui for the preset and design tokens — see Styling setup
• Built on: TanStack Table v8, Recharts, Framer Motion

The CDN bundle has no build step, so it cannot receive a license token. Pro components will render their lock screen. Use it for layout prototyping only.

🔒 License & Privacy

• A valid license key is required for production builds; development works without one
• The license key is validated once at build time against moonui.dev
• No telemetry. The package does not phone home at runtime and does not transmit your domain
• The published bundle is plain, readable ESM — it is licensed, not obfuscated

💳 Pricing

MoonUI Pro is a one-time purchase. There is no subscription.

| Plan | Price | Includes | |------|-------|----------| | Professional | $79 one-time | 1 device, 100+ Pro components, lifetime updates | | Team | $199 one-time | 3 developer licenses | | Enterprise | $499 one-time | Unlimited devices, white-label |

View pricing →

🛠️ Development

git clone https://github.com/oguzhanayyldz/moonui
cd moonui/packages/moonui-pro
npm install

npm run dev     # watch build
npm run build   # production build
npm run test    # jest
npm run lint    # eslint

🔗 Ecosystem

• @moontra/moonui — Base component library (MIT). Required by Pro for the Tailwind preset and design tokens; its components are optional
• @moontra/moonui-cli — Command line tools
• @moontra/moonui-mcp-server — AI / MCP integration

📚 Documentation & Support

• Website: moonui.dev
• Docs: moonui.dev/docs
• License & deployment: moonui.dev/docs/authentication
• Issues: github.com/oguzhanayyldz/moonui/issues
• Email: [email protected]

📄 License

Licensed under a Commercial License. See LICENSE for details.

• Valid license key required for production use
• Development usage allowed without a license
• License includes updates and support
• Licensed per device/developer — see the pricing table above

Website • Documentation • Pricing

Built with ❤️ for developers who demand excellence