Nexul UI

A collection of complex, reusable React components built on top of Shadcn UI

Documentation · Components · Getting Started

---

✨ What is Nexul UI?

Nexul UI is not another custom component library to showcase design skills. Instead, it's a curated collection of complex and reusable components that solve real UX challenges—components that are often difficult and time-consuming to build from scratch.

Key Features

• 🎨 Built on Shadcn UI — Leverages Shadcn's design system and distribution model
• 📦 Copy-paste Components — All code lives in your project for full customization
• 🔧 Minimal Styling — Functional and accessible by default, style with Tailwind or your preferred method
• ⚡ React 19 & Next.js 16 — Built with the latest React and Next.js features
• 📝 TypeScript First — Full type safety out of the box
• 🌐 RSC Compatible — Supports React Server Components

📚 Components

Layout Components

Component	Description
Masonry Row Grid	A responsive masonry layout with justified or naive algorithms for optimal item placement

Art & Visual Components

Component	Description
SVG Particles	Interactive particle system that renders SVG paths with mouse-driven scatter/spill effects

Base UI Components

Built on Radix UI primitives with Shadcn styling:

🚀 Getting Started

Prerequisites

• Node.js 18+
• A project using React 18+ and Tailwind CSS
• Shadcn UI configured in your project

Installation

Nexul UI uses the Shadcn CLI for component installation. Add the Nexul registry to your components.json:

{
  "registries": {
    "@nexul": "https://ui.nexul.in/r/{name}.json"
  }
}

Then install components using:

npx shadcn@latest add @nexul/masonry-row
npx shadcn@latest add @nexul/svg-particles

🛠️ Development

Clone and Install

git clone https://github.com/NeuroNexul/ui.nexul.in.git
cd ui.nexul.in
npm install

Run Development Server

npm run dev

Build for Production

npm run build

Build Registry

npm run registry:build

📁 Project Structure

ui.nexul.in/
├── app/                   # Next.js App Router pages
│   ├── docs/              # Documentation pages
│   └── api/               # API routes
├── components/
│   ├── ui/                # Base UI components
│   ├── mdx/               # MDX-specific components
│   └── extras/            # Additional utilities
├── content/docs/          # MDX documentation content
├── registry/              # Component registry source
│   ├── art/               # Visual/artistic components
│   └── layouts/           # Layout components
├── lib/                   # Utility functions
└── public/r/              # Built registry JSON files

🧰 Tech Stack

• Framework: Next.js 16 with App Router & Turbopack
• UI Primitives: Radix UI
• Styling: Tailwind CSS 4
• Documentation: Fumadocs
• Component System: Shadcn UI
• Icons: Lucide React
• Code Highlighting: Shiki

⚠️ Disclaimer

Nexul UI is a personal project and is not meant to be actively maintained or widely used. It serves as a collection of components for personal applications.

You can use it without any restrictions, but please be aware that it may not receive regular updates or support. Feel free to contact me if you encounter any issues.

— Arif Sardar

📄 License

This project is open source and available under the MIT License.

---

Made with ❤️ by NeuroNexul