Minimalist Next.js Components with Nothing OS Design – NothingCN

NothingCN is a copy-paste UI component library that enables developers to build modern Next.js applications with the minimalist aesthetic inspired by Nothing OS.

Features

How to Use It

1. Create a new Next.js application with TypeScript and Tailwind CSS enabled:

npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge lucide-react

2. Create the utility functions that all NothingCN components depend on. Add a lib/utils.ts file to your project:

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
export function formatDate(date: Date | string | number) {
  return new Intl.DateTimeFormat("en-US", {
    month: "long",
    day: "numeric",
    year: "numeric",
  }).format(new Date(date))
}

3. Configure your Tailwind CSS setup to include the NothingCN design tokens. Update your tailwind.config.js file with the extended color palette and animation definitions:

module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // Additional color definitions...
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

4. Add the CSS variables to your global stylesheet. Include these definitions in your app/globals.css file:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 0%;
    --accent: 0 84% 60%;
    --accent-foreground: 0 0% 100%;
    --border: 0 0% 90%;
    --radius: 0rem;
  }
  .dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 100%;
    --accent: 0 84% 60%;
    --accent-foreground: 0 0% 0%;
    --border: 0 0% 20%;
  }
}

5. Browse the component library to find the components you need, then copy the source code directly into your project. For example, to add an accordion component:

npx nothingcn@latest add accordion

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export function BasicAccordionExample() {
  return (
    <Accordion type="single" defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern and supports full keyboard navigation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}