- Initialised the project with NextJS 16, using biome as linter and other mordern NextJS 16 compatible techs.
- Made Portfolio Builder uisng resume parsing api and form based resume builder.
- Made components for this UI library example button, form and animation components.
- Made the shop demo that uses redux and the example web page that uses these components.
- Made parts of the Treasure hunt website that was used in IIIT Dharwad's Tech Fest and had 200 live users.(170K requests, 5k+ visits)
- Made the website SEO friendly and deployed it under my own sub-domain. (pixel-art-8-bit.mishrashardendu22.is-a.dev)
- Made the leaderboard webpage as a seperate deployment made it using Svelte and connected it with the main website using microfrontend concept.
- Created 10 unique special components not found in any other UI library (PixelLoader, PixelTerminal, PixelGameUI, PixelWindow, PixelAudioVisualizer, PixelCodeBlock, PixelTimeline, PixelNotification, PixelChat, PixelCountdown) with 60+ interactive example pages.
- Built 10 comprehensive layout components from hero section to FAQ section (PixelHero, PixelBento, PixelFeatures, PixelCta, PixelPricing, PixelFooter, PixelTestimonials, PixelStats, PixelFaq) with multiple variants and full documentation.
- Created complete "Retro Game Central" patterns page showcasing all 10 special components in a real-world gaming platform with player dashboard, inventory system, live chat, terminal, and audio visualizer.
- Fixed critical UI issues across homepage and documentation pages, improved component responsiveness and accessibility.
- Fixed glitch text component RGB split effect rendering to properly display animations without duplicate text artifacts.
- Made parts of the Treasure hunt website that was used in IIIT Dharwad's Tech Fest and had 200 live users.(170K requests, 5k+ visits)
- Created 4 new feedback components (PixelRating, PixelWarningTooltip, PixelUndoChip, PixelAIBubble) with interactive previews and full documentation.
- Built comprehensive Redux filtering system for Pixel Shop with real-time search, multi-select category filters, price range filtering, and 5 sort options.
- Fixed missing previews and code examples for 6 components (Drawer, AlertDialog, Toast, Sonner, Navigation Menu, Command).
- Fixed accessibility issues in shop page .
- Created a new PixelTimelineNavigation component with support for both horizontal and vertical timeline layouts.
- Implemented progress tracking with completed, current, and upcoming step states, including interactive navigation between completed steps.
- Added support for multiple sizes, custom step icons, automatic timeline connectors, and responsive layouts.
- Integrated the component into the documentation system with detailed API references, usage examples, and live component previews.
- Focused on accessibility and usability through ARIA support, semantic interactions, and consistent design patterns across the Pixel UI library.
A complete pixel-art/8-bit retro UI component library with documentation website, built with Next.js, TypeScript, Tailwind CSS, and Radix UI primitives. Inspired by classic 8-bit games and retro computing aesthetics.
- 🎮 Retro Design — Authentic 8-bit styling with pixel-perfect borders
- ⚡ Instant Actions — No smooth animations, zero transition delays
- 📦 10+ Components — Buttons, Cards, Inputs, Dialogs, Toasts, and more
- ♿ Accessible — Built on Radix UI with ARIA attributes and keyboard support
- 🎨 Dark/Light Mode — Full theme support with CSS variables
- 📚 Full Documentation — Live previews, code examples, and props tables
- 🔧 TypeScript — Fully typed with excellent IDE support
# Clone the repository
git clone <your-repo-url>
cd fsd-library
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:3000 to view the landing page.
fsd-library/
├── src/
│ ├── app/
│ │ ├── page.tsx # Landing page with hero & showcase
│ │ ├── globals.css # Tailwind + pixel theme variables
│ │ ├── layout.tsx # Root layout with Press Start 2P font
│ │ ├── docs/
│ │ │ └── components/[slug]/
│ │ │ └── page.tsx # Dynamic component documentation
│ │ └── examples/
│ │ └── page.tsx # Full dashboard example
│ ├── components/
│ │ ├── ui/pixel/ # All pixel UI components
│ │ │ ├── pixel-button.tsx
│ │ │ ├── pixel-card.tsx
│ │ │ ├── pixel-input.tsx
│ │ │ ├── pixel-badge.tsx
│ │ │ ├── pixel-dialog.tsx
│ │ │ ├── pixel-toast.tsx
│ │ │ ├── pixel-select.tsx
│ │ │ ├── pixel-checkbox.tsx
│ │ │ ├── pixel-tabs.tsx
│ │ │ └── pixel-accordion.tsx
│ │ └── docs/
│ │ ├── code-block.tsx # Syntax highlighter with copy
│ │ └── sidebar.tsx # Documentation navigation
│ └── lib/
│ └── utils.ts # cn() utility
├── registry/
│ └── components.json # Component metadata
└── public/ # Static assets
The pixel theme uses CSS variables for easy customization:
/* Light Theme */
--color-pixel-light-bg: #f5f5dc;
--color-pixel-light-surface: #fffacd;
--color-pixel-light-primary: #ff8c00;
--color-pixel-light-secondary: #ff6b00;
/* Dark Theme */
--color-pixel-dark-bg: #000000;
--color-pixel-dark-surface: #1a1a1a;
--color-pixel-dark-primary: #ff8c00;
--color-pixel-dark-secondary: #ffd700;
/* Pixel Shadows */
--shadow-pixel: 4px 4px 0px 0px rgba(0,0,0,1);
--shadow-pixel-sm: 2px 2px 0px 0px rgba(0,0,0,1);
--shadow-pixel-lg: 6px 6px 0px 0px rgba(0,0,0,1);Interactive button with 4 variants and 3 sizes:
import { PixelButton } from "@/components/ui/pixel/pixel-button";
<PixelButton variant="default">Click Me</PixelButton>
<PixelButton variant="secondary">Secondary</PixelButton>
<PixelButton variant="ghost">Ghost</PixelButton>
<PixelButton variant="destructive">Delete</PixelButton>Container component for content:
import { PixelCard, PixelCardHeader, PixelCardTitle, PixelCardContent } from "@/components/ui/pixel/pixel-card";
<PixelCard>
<PixelCardHeader>
<PixelCardTitle>Card Title</PixelCardTitle>
</PixelCardHeader>
<PixelCardContent>
<p>Card content goes here</p>
</PixelCardContent>
</PixelCard>- PixelInput — Text input with pixel borders
- PixelBadge — Status indicators (default, success, warning, error)
- PixelDialog — Modal dialogs with overlay
- PixelToast — Notifications with positions and actions
- PixelSelect — Dropdown selections
- PixelCheckbox — Checkboxes with pixel styling
- PixelTabs — Tabbed navigation
- PixelAccordion — Collapsible sections
Visit /docs/components/[component-name] for detailed documentation on each component, including:
- Installation instructions
- Import statements
- Usage examples
- Props tables
- Live interactive previews
- Accessibility notes
Example: http://localhost:3000/docs/components/pixel-button
- Hero section with pixel styling
- Feature grid
- Component showcase
- Call-to-action sections
Full dashboard demonstrating:
- Stats cards with icons
- Tabs for navigation
- Profile forms with inputs
- Settings with checkboxes
- FAQ accordion
- Dialog modals
- Toast notifications
- Framework: Next.js 16 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4
- UI Primitives: Radix UI
- Icons: Lucide React
- Variants: class-variance-authority
- Syntax Highlighting: react-syntax-highlighter
- Font: Press Start 2P (Google Fonts)
All components use duration-0 and transition-none for instant state changes, maintaining the authentic retro feel.
The .pixel-borders utility class ensures consistent 4px solid borders with sharp edges:
.pixel-borders {
border-width: 4px;
border-style: solid;
border-radius: 0;
image-rendering: pixelated;
image-rendering: crisp-edges;
}All spacing follows multiples of 4px (8px, 12px, 16px, etc.) for grid-aligned layouts.
All components follow these standards:
- ✅ TypeScript with proper interfaces
- ✅
forwardReffor input-like components - ✅ Proper ARIA attributes
- ✅
cn()utility for className merging - ✅ Export both component and types
- ✅ Dark/light mode support
- ✅
"use client"directive where needed
Contributions are welcome! Feel free to:
- Add new pixel components
- Improve documentation
- Report bugs
- Suggest features
MIT License - feel free to use this in your projects!
- Built by Team Parashuram
- Inspired by shadcn/ui structure
- Uses Radix UI primitives
- Font: Press Start 2P by CodeMan38
Happy coding with Pixel UI! 🎮✨
- uses
forwardReffor input-like elements, - uses
VariantPropsfrom CVA, - includes ARIA attributes and keyboard considerations.
-
Landing page with hero, feature grid, component showcase.
-
Per-component pages at
/docs/components/[slug]:- Live interactive preview with dark/light toggle.
- Code block with
react-syntax-highlighterand a copy button. - Props table, installation, usage examples, accessibility notes.
-
Sidebar with all components and active state.
-
Example pages: dashboard, forms, modal demos, toasts, and gallery.
/registry/components.json lists each component, source files, runtime dependencies and registry dependencies for automation and tooling.
Example entry:
{
"pixel-button": {
"name": "Pixel Button",
"files": ["components/ui/pixel/pixel-button.tsx"],
"dependencies": ["class-variance-authority", "lucide-react"],
"registryDependencies": []
}
}# install dependencies
pnpm install
# or
npm install
# dev
pnpm dev
# or
npm run dev
# build
pnpm build
pnpm start- Import components from
components/ui/pixel. - Use
cn()from/lib/utils.tsto merge classes. - Docs include copy-ready installation and import snippets for each component.
- TypeScript with strict typings.
- 8px spacing system. Sizes in multiples of 4px.
- No long-duration animations.
duration-0or instant changes only. - Production-ready exports and types.
- Tests and accessibility checks recommended for every component.
- Follow shadcn/ui component layout for file organization and docs pattern.
- Keep components small, composable, and documented.
- Use registry JSON to auto-generate docs navigation and metadata.
- Open PRs against
main. - Add component entry to
/registry/components.json. - Include a docs page and at least one live example.
- Follow code style and TypeScript typing rules.