ComponentSphere is a collection of reusable components that you can copy and paste into your web apps. It's designed to streamline development and promote consistency across projects.
ComponentSphere provides a curated set of UI components, modules, and utilities built with Next.js, React, and Tailwind CSS. Inspired by shadcn/ui, MagicUI, and Aceternity UI, it focuses on offering high-quality, reusable solutions that adhere to modern web development practices.
I believe reusability is a cornerstone of efficient and scalable software development. Writing the same code to create identical components in multiple projects is a significant waste of time and effort. It violates the DRY principle and introduces redundancy, increasing the likelihood of inconsistencies and maintenance overhead.
Reusable components demonstrate that the team values efficiency and quality. It shows thoughtful and systematic approaches to challenges across the board.
Ultimately, adhering to DRY principles doesn't just save time; it fosters trust in engineering discipline.
ComponentSphere leverages several interesting techniques and technologies:
- Next.js App Router for modern React server components architecture
- Content Collections for MDX content management
- Tailwind CSS with custom animations and extended theme configuration
- Radix UI for accessible component primitives
- TypeScript for type safety and improved developer experience
- MDX with custom rehype/remark plugins for rich documentation
- Dynamic component registry system for showcasing UI components
ComponentSphere/
├── __registry__/ # Auto-generated component registry
├── .content-collections/ # Generated content from MDX files
├── .vscode/ # VS Code configuration
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── (docs)/ # Documentation routes
│ │ └── (marketing)/ # Marketing pages
│ ├── components/ # React components
│ │ ├── ui/ # UI component library
│ │ └── sections/ # Page section components
│ ├── config/ # Site configuration
│ ├── content/ # MDX content files
│ │ ├── docs/ # Documentation content
│ │ └── pages/ # Static page content
│ ├── hooks/ # React hooks
│ ├── lib/ # Utility functions
│ ├── registry/ # Component registry source
│ │ └── default/ # Default component styles
│ │ ├── ui/ # UI component definitions
│ │ └── example/ # Component examples
│ ├── scripts/ # Build scripts
│ └── styles/ # Global styles
└── tailwind.config.ts # Tailwind configuration
__registry__/: Auto-generated registry that maps component names to their implementations for dynamic loadingsrc/content/: MDX files for documentation and static pages processed by Content Collectionssrc/registry/: Source components that are exposed in the component library for users to copysrc/app/(docs)/: Documentation application routes using Next.js App Routersrc/app/(marketing)/: Marketing pages for the ComponentSphere website
- Geist Font - Vercel's modern sans-serif typeface
- Content Collections - For MDX content management and transformation
- rehype-pretty-code - Syntax highlighting for code blocks
- Framer Motion - Animation library for React
- Tailwind CSS Animate - Animation utilities for Tailwind
- Radix UI - Unstyled, accessible UI component primitives
- Lucide React - Beautiful, consistent icon set
- Node.js 18 or later
- pnpm (preferred package manager)
# Clone the repository
git clone https://github.com/yourusername/componentsphere.git
# Navigate to the project directory
cd componentsphere
# Install dependencies with pnpm
pnpm install
# Start the development server
pnpm devVisit http://localhost:3000 to see the application.
We welcome contributions! Please see our contribution guidelines for details on how to get started.