What it does
MoonUI is a TypeScript React component library that works with React 18 and 19 and Tailwind CSS 3 and 4. Its catalog spans 19 categories, from inputs to backgrounds. Each component name in the catalog opens its documentation. To start, add the package to a React project that already uses Tailwind CSS by running npm install @moontra/moonui. Components are plain imports, with no wrapper and no build plugin. Then wrap your app once in ThemeProvider and adjust tokens to match your brand. The Pro components include data tables, editors, drag-and-drop and command palettes.
Capabilities
- The Pro dashboard components include a chart that takes live data, KPI tiles with trends, and a data table with search, filters, selection, export and paging.
- The Pro Rich Text Editor comes with a full toolbar.
- The Pro Credit Card Input and Phone Number Input components handle card numbers and international phone numbers.
- The Pro Kanban component lets users drag cards between lanes, the Draggable List component reorders a list, and the Swipeable Card component responds to swiping.
- Backgrounds, effects and text animations ship as Pro components, including Starfield, Particles, Waves, Meteors, Typewriter Text and Glitch Text.
When to use it
- You need a dashboard with a chart, KPI tiles and a table with search, filters, selection, export and paging.
- You need a rich text editor with a full toolbar.
- You need form fields for card numbers or international phone numbers.
