Demonstration | Deploy | Technologies

---

Pixel Patterns is a project aimed at developers that simplifies the integration of CSS and Tailwind components into their projects. The application allows you to copy ready-to-use components with just one click, making styling and building interfaces quick and efficient.

This open-source project not only offers an initial library of components but also allows the community to contribute their own components. With an intuitive interface and constantly expanding features, Pixel Patterns is ideal for those looking for a practical way to enhance front-end development.

Goals:

• Facilitate the use of CSS and Tailwind components with a one-click copy feature
• Allow the community to contribute their own components
• Continuous expansion with new features and components

• If you like the project, give it a star ⭐ and share to help out.

📷 Demonstration

Home Page	Buttons Page

Inputs Page	Loaders Page

Cards Page	Checkboxes Page

Forms Page

💻 Deploy

Click the following link to view the deploy

🛠 Getting Started

Requires Node.js 20 or newer.

npm install
npm run dev

Script	Description
npm run dev	Start the development server
npm run build	Create a production build
npm run start	Serve the production build
npm run lint	Run ESLint
npm run typecheck	Run the TypeScript compiler without emitting files
npm run format	Format the codebase with Prettier
npm run format:check	Check formatting without writing changes

🗂 Project Structure

src/
├── app/                    # App Router routes (Server Components by default)
│   ├── <route>/page.tsx    # One folder per page
│   ├── <route>/_components # Components used only by that route
│   └── <route>/_lib        # Route-specific state, config and helpers
├── components/
│   ├── decorations/        # Animated backgrounds, each with its own CSS Module
│   ├── layout/             # Site chrome: hero, navbar, footer, buttons
│   ├── snippets/           # Snippet card, gallery, marquee and code preview
│   └── ui/                 # Reusable primitives (shadcn/ui based)
├── data/snippets/          # Component library content, one file per category
├── hooks/                  # Shared React hooks
├── lib/                    # Site configuration and utilities
└── types/                  # Shared TypeScript types

Conventions:

• Files use kebab-case, components use PascalCase named exports, hooks start with use.
• Import with the @/ alias (maps to src/); CSS Modules are imported relatively from the component next to them.
• Add "use client" only to files that use hooks, browser APIs or event handlers.
• Global CSS is limited to Tailwind layers and design tokens in src/app/globals.css; component styles live in Tailwind classes or a colocated *.module.css.

➕ Adding a Component

1. Open the category file in src/data/snippets/ (for example buttons.tsx).
2. Append a new entry at the end of the array:

{
  category: "css",
  background: "bg-[#212121]",
  iconColor: "#fff",
  html: `
    <button class="button-83501">Click me</button>
    <style>
      .button-83501 { /* ... */ }
    </style>
  `,
},

Use category: "tailwind" with a content: (<button className="...">...</button>) JSX field for Tailwind components. Snippets must be static markup: what is rendered is exactly what gets copied, so event handlers are not supported. Add five random digits to every class and keyframe name in CSS snippets to avoid collisions with other components on the same page.

🚀 Technologies

This project was developed with the following technologies:

✔ [NextJS]
✔ [ReactJS]
✔ [TypeScript]
✔ [CSS]
✔ [Tailwind CSS]
✔ [Shadcn UI]

✍ Author

Made by Luancss