An open source creative component library built with Next.js 15, React 19, TypeScript, and Tailwind CSS. NothingCN provides a comprehensive set of unique, visually stunning UI components with live previews and copy-paste code examples for developers.
Inspired by the minimalist design philosophy of NOTHING - bringing that same "nothing" aesthetic to the web with clean, purposeful components.
- 🎨 Creative Design - Unique, visually stunning components that stand out
- 🌙 Dark Mode - Full dark mode support with smooth transitions
- ♿ Accessible - Built with accessibility in mind using Radix UI primitives
- 📱 Responsive - Works perfectly on all device sizes
- 🔧 Customizable - Easy to customize with CSS variables and class variants
- 📋 Copy & Paste - No installation required, just copy the code
- 🔍 Live Previews - See components in action with interactive examples
- 🎯 TypeScript - Full TypeScript support with proper type definitions
- Framework: Next.js 15 with App Router
- React: React 19
- Styling: Tailwind CSS 4
- UI Primitives: Radix UI
- Icons: Lucide React
- Code Highlighting: Prism React Renderer
- Variant Management: Class Variance Authority
- Utilities: clsx, tailwind-merge
- Open Source: Completely free and open for everyone to use
- Creative Focus: Emphasis on unique, creative component designs
- Copy-Paste Ready: No installation required - just copy and use
- Community Driven: Built by developers, for developers
- Modern Stack: Latest web technologies for optimal performance
- Button - Multiple variants and sizes
- Card - Flexible card component with header, content, and footer
- Badge - Status indicators and labels
- Tabs - Tabbed interface for organizing content
- Code Block - Syntax-highlighted code with copy functionality
- Theme System - Comprehensive theming with CSS variables
- Stats Cards - Dashboard-style metric cards
- User Cards - Profile cards with contact information
- Social Media Posts - Social media style layouts
- Event Cards - Event information display
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone https://github.com/nothingcn/nothingcn.git
cd nothingcn- Install dependencies:
npm install
# or
pnpm install- Run the development server:
npm run dev
# or
pnpm dev- Open http://localhost:3000 in your browser.
- Navigate to the Components page to see all available components
- Click on any component to see its live preview
- Switch to the "Code" tab to see the implementation
- Copy the code and paste it into your project
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
export function MyComponent() {
return (
<Card className="w-[350px]">
<CardHeader>
<CardTitle>My Component</CardTitle>
<CardDescription>Description here</CardDescription>
</CardHeader>
<CardContent>
<Button>Click me</Button>
</CardContent>
</Card>
);
}The component library uses CSS custom properties for theming. You can customize the appearance by modifying the CSS variables in your global CSS file.
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
/* ... more variables */
}Dark mode is supported out of the box. Add the dark class to your HTML element to enable dark mode:
<html class="dark"></html>src/
├── app/ # Next.js app router pages
│ ├── components/ # Creative components showcase
│ ├── blocks/ # Pre-built component combinations
│ ├── themes/ # Theme customization examples
│ ├── docs/ # Documentation and guides
│ ├── globals.css # Global styles and theme variables
│ ├── layout.tsx # Root layout
│ └── page.tsx # NothingCN homepage
├── components/
│ ├── ui/ # Core creative UI components
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── badge.tsx
│ │ ├── tabs.tsx
│ │ └── code-block.tsx
│ └── site-header.tsx # Site navigation header
└── lib/
└── utils.ts # Utility functions
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- NOTHING - The minimalist design philosophy and aesthetic that inspired NothingCN's clean, purposeful approach to UI components
- shadcn/ui - Inspiration for the component library structure and architecture
- Commit Mono - The monospace font used throughout the project for code examples and technical text
- Ndot/Nothing Font - Custom typography inspired by NOTHING's design language
- Radix UI - Unstyled, accessible UI primitives
- Tailwind CSS - Utility-first CSS framework
- Lucide - Beautiful & consistent icon toolkit
- Next.js - The React framework for production
- Vercel - Platform for deployment and hosting
NothingCN aims to democratize access to high-quality, creative UI components. Inspired by NOTHING's philosophy of removing the unnecessary and focusing on what matters, we believe that beautiful, minimalist design should be accessible to all developers, regardless of their design background or budget.
If you have any questions or need help, please open an issue on GitHub.
Created by Jassin Al Safe
- 🌐 Company: Zenit Digital - Digital solutions and web development
- 💼 LinkedIn: Jassin Al Safe
- 🧵 Threads: @babajassin
- 📧 Contact: Available through GitHub issues or LinkedIn
Zenit Digital specializes in creating modern web solutions and digital experiences. NothingCN represents our commitment to open source and sharing knowledge with the developer community.
Built with ❤️ by Jassin Al Safe and the NothingCN community using Next.js and React