@moontra/moonui-pro

v4.19.2

Published

8 hours ago

Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components

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.

A valid license is required. Without a build-time license token, Pro components render a lock screen instead of their content. See Setup — it is three steps and all three are mandatory.

✨ 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

MoonUI Pro is self-contained — it ships its own primitives (Button, Card, Badge, Input, …), so the free @moontra/moonui package is optional. Install it too if you also want the MIT-licensed base library:

npm install @moontra/moonui

🔐 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>}
/>

🎨 Styling

The ESM build injects component styles from the JavaScript bundle, so there is no stylesheet to import. Do not import @moontra/moonui-pro/styles.css — that entry point does not exist, and adding a stylesheet on top would apply the styles twice.

(The CDN/IIFE bundle is different: it does not inject styles, and ships a companion dist/cdn/index.css. See Package Details.)

MoonUI Pro follows the base MoonUI theming system: HSL values in CSS variables, .dark class for dark mode. Configure it exactly as you configure @moontra/moonui.

⚡ 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, ~3.4 MB unminified), styles injected by JS
CDN: minified IIFE bundle at dist/cdn/index.global.js (~2.9 MB), global name MoonUIPro, with a companion dist/cdn/index.css
Types: full TypeScript definitions included
Peer dependencies: React 18+ or 19, React DOM, next-themes
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)
@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