Fixel UI

Building blocks for the modern web
Production-ready React components built with TypeScript, Tailwind CSS, and shadcn/ui

🌐 Live Demo · ⚡ Quick Start · 📚 Docs · 🤝 Contributing

---

✨ What is Fixel UI?

Fixel UI is a shadcn/ui-compatible component registry offering production-ready building blocks for modern web applications. Unlike traditional component libraries, Fixel UI provides:

• No lock-in — Components live in your project, not as npm dependencies
• Full ownership — Copy, modify, and extend every component
• TypeScript-first — Fully typed components with excellent DX
• Zero runtime overhead — No wrapper libraries or unnecessary abstractions
• Automatic dependency detection — Smart imports that just work

Install any component with a single command using the shadcn CLI, or copy-paste directly into your project.

---

📦 What's Included

Fixel UI contains 60+ components organized into two distinct types:

🧩 Blocks (registry:block)

Full UI components that users install into their projects. These are the building blocks of your application.

Category	Count	Description
Footer	1	Landing page footers with various layouts and styles
On Hover	1	Interactive hover animations and effects

🎨 Illustrations (registry:component)

Visual category thumbnails used for the registry homepage. These provide visual representations of UI component categories.

40+ illustrations available:

• Form Elements: button-illustration, input-illustration, textarea-illustration, select-illustration, checkbox-illustration, radio-illustration, switch-illustration
• Layout: card-illustration, sheet-illustration, dialog-illustration, drawer-illustration, popover-illustration
• Navigation: breadcrumb-illustration, tabs-illustration, pagination-illustration, command-illustration, menu-illustration
• Feedback: alert-illustration, badge-illustration, toast-illustration, skeleton-illustration, spinner-illustration
• Data Display: table-illustration, avatar-illustration, calendar-illustration, chart-illustration
• Overlays: modal-illustration, tooltip-illustration, hover-card-illustration, preview-card-illustration
• And more: accordion-illustration, collapsible-illustration, separator-illustration, slider-illustration, progress-illustration

---

🚀 Quick Start

Prerequisites

Ensure your project has shadcn/ui initialized:

npx shadcn@latest init

Installation Examples

Example 1: Block (File Type)

Install a single-file component (like footer-01):

npx shadcn@latest add https://fixel-ui.vercel.app/r/footer-01.json

What gets installed:

• components/footer-01.tsx — The component file
• Automatically detects and installs dependencies (@tabler/icons-react)

Usage:

import Footer01 from "@/components/footer-01";

export default function Page() {
  return (
    <main>
      <h1>My Page</h1>
      <Footer01 />
    </main>
  );
}

Example 2: Block (Directory Type)

Install a complex multi-file component:

npx shadcn@latest add https://fixel-ui.vercel.app/r/complex-dashboard.json

What gets installed:

• components/complex-dashboard/ — Directory containing:
  • index.tsx — Main component
  • header.tsx — Sub-component
  • sidebar.tsx — Sub-component
  • utils.ts — Shared utilities

When to use directory type:

• Complex components with multiple sub-components
• Components that need shared utilities or hooks
• Large components that would be unwieldy in a single file

Example 3: Illustration

Install a visual thumbnail for category previews:

npx shadcn@latest add https://fixel-ui.vercel.app/r/button-illustration.json

What gets installed:

• components/illustrations/button/button-illustration.tsx

Note: Illustrations are visual components used for the registry homepage. Most users install Blocks, not illustrations.

---

📋 Available Components by Category

Footer

Component	Description	Install Command
footer-01	Background masked image with gradient overlay	npx shadcn@latest add https://fixel-ui.vercel.app/r/footer-01.json

On Hover

Component	Description	Install Command
on-hover-01	Apple-inspired folder hover animation with smooth transitions	npx shadcn@latest add https://fixel-ui.vercel.app/r/on-hover-01.json

Illustrations (Visual Category Thumbnails)

Install any illustration to use in your own component showcase:

# Form elements
npx shadcn@latest add https://fixel-ui.vercel.app/r/button-illustration.json
npx shadcn@latest add https://fixel-ui.vercel.app/r/input-illustration.json
npx shadcn@latest add https://fixel-ui.vercel.app/r/checkbox-illustration.json

# Layout
npx shadcn@latest add https://fixel-ui.vercel.app/r/card-illustration.json
npx shadcn@latest add https://fixel-ui.vercel.app/r/dialog-illustration.json
npx shadcn@latest add https://fixel-ui.vercel.app/r/sheet-illustration.json

# Navigation
npx shadcn@latest add https://fixel-ui.vercel.app/r/tabs-illustration.json
npx shadcn@latest add https://fixel-ui.vercel.app/r/breadcrumb-illustration.json
npx shadcn@latest add https://fixel-ui.vercel.app/r/command-illustration.json

# See all available illustrations at https://fixel-ui.vercel.app

---

🛠️ Tech Stack

• Next.js — React framework with App Router
• React — UI library (v19 with React Compiler)
• TypeScript — Type-safe development
• Tailwind CSS — Utility-first styling (v4)
• shadcn/ui — Component architecture
• Base UI — Headless UI primitives
• Biome — Linting and formatting
• Motion — Animations

---

🏗️ Project Structure

fixel-ui/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── (blocks)/           # Block showcase pages
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Homepage
│   │
│   ├── components/
│   │   ├── ui/                 # shadcn/ui components
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   └── ...
│   │   ├── header.tsx          # Site header
│   │   ├── footer.tsx          # Site footer
│   │   └── ...
│   │
│   ├── content/
│   │   ├── components/         # Block implementations
│   │   │   ├── footer/
│   │   │   │   ├── footer-01.tsx
│   │   │   │   └── index.ts
│   │   │   ├── on-hover/
│   │   │   │   ├── on-hover-01.tsx
│   │   │   │   └── index.ts
│   │   │   └── ...
│   │   │
│   │   ├── illustrations/      # Visual category thumbnails
│   │   │   ├── button/
│   │   │   ├── card/
│   │   │   └── ...
│   │   │
│   │   ├── blocks-metadata.ts  # Block registry metadata
│   │   ├── blocks-components.tsx # Component mappings
│   │   ├── blocks-categories.tsx # Category definitions
│   │   └── declarations.ts     # TypeScript declarations
│   │
│   ├── lib/
│   │   ├── utils.ts            # Utility functions
│   │   ├── category-thumbnails.tsx # Category thumbnail components
│   │   └── thumbnails/         # Thumbnail SVG components
│   │
│   ├── scripts/                # Build and generation scripts
│   │   ├── generate-registry.ts
│   │   ├── add-category.ts
│   │   ├── add-block.ts
│   │   └── lib/
│   │
│   └── style/
│       └── globals.css         # Global styles
│
├── public/
│   └── r/                      # Registry JSON files (generated)
│       ├── footer-01.json
│       ├── on-hover-01.json
│       ├── button-illustration.json
│       └── ...
│
├── components.json             # shadcn/ui configuration
├── next.config.js            # Next.js configuration
├── package.json              # Dependencies and scripts
├── README.md                 # This file
└── CONTRIBUTING.md           # Contribution guidelines

---

💻 Local Development

1. Clone the repository

git clone https://github.com/FadyEmad01/fixel-ui.git
cd fixel-ui

2. Install dependencies

npm install

3. Start the development server

npm run dev

Open http://localhost:3000 to view the component showcase.

4. Regenerate the registry (after making changes)

npm run generate:registry

This reads all component sources and generates fresh public/r/*.json registry files.

---

📚 Documentation

For Users

• Installation Guide — How to install components
• Component Reference — Available blocks and illustrations

For Contributors

• CONTRIBUTING.md — Comprehensive contribution guide
• Architecture Overview — How the registry works
• Adding Components — Step-by-step component creation

---

🤝 Contributing

We welcome contributions of all kinds — new blocks, bug fixes, documentation improvements, and more!

👉 Read the Contributing Guide

Quick contribution workflow:

# 1. Fork and clone
git clone https://github.com/your-username/fixel-ui.git
cd fixel-ui

# 2. Install and start dev server
npm install
npm run dev

# 3. Make your changes, then regenerate registry
npm run generate:registry

# 4. Run linting
npm run lint

# 5. Commit and push
git add .
git commit -m "feat(footer): add footer-02 with newsletter"
git push origin main

---

🎯 Roadmap

• Add more footer variants
• Hero section blocks
• Pricing table blocks
• Testimonial/carousel blocks
• Dashboard layout blocks
• Form layout blocks
• Authentication pages

Have a suggestion? Open a discussion!

---

📄 License

MIT © Fady Emad

---

Built with ❤️ by Fady Emad

fixel-ui.vercel.app