Components
- Accordions
- Alert Dialogs
- Alerts
- Aspect Ratios
- Avatars
- Badges
- Breadcrumbs
- Button Groups
- ButtonsNew
- Calendars
- CardsPro
- Carousels
- Charts
- Checkboxes
- Collapsibles
- Comboboxes
- Commands
- Context Menus
- Data Tables
- Date Pickers
- Dialogs
- Directions
- Drawers
- Dropdown Menus
- Empty States
- Fields
- Hover Cards
- Input Groups
- Input OTPs
- InputsPro
- Items
- Kbds
- Labels
- Menubars
- Native Selects
- Navigation Menus
- Paginations
- Popovers
- Progress
- Radio Groups
- Resizables
- Scroll Areas
- Selects
- Separators
- Sheets
- Sidebars
- Skeletons
- Sliders
- Sonner
- Spinners
- Switches
- Tables
- Tabs
- Textareas
- Toasts
- Toggle Groups
- Toggles
- Tooltips
- Typography
Installation
Get started with ZeroZeeker UI components in your React or Next.js project.
Starting a new project? Use shadcn/create to scaffold a complete app with custom themes, components, and presets.
Pick Your Framework
Select your framework to get started with ZeroZeeker.
Quick Setup
1
Create Project
Run the init command to create a new Next.js project or to setup an existing one.
npx shadcn@latest init2
3
Add Components
Use the ZeroZeeker CLI to add components to your project.
Format:
CLI Command
1npx zerozeeker add <component-name>Example:
npx zerozeeker add rainbow-buttonThis command will add the RainbowButton component to your project along with its dependencies.
4
Usage
app/page.tsx
1import { RainbowButton } from "@/components/ui/rainbow-button"2 3export default function HomePage() {4 return (5 <div className="flex min-h-screen items-center justify-center">6 <RainbowButton>7 Click me8 </RainbowButton>9 </div>10 )11}Available Components
Visit Pixel Goodies to browse all components, see live previews, copy installation commands, and view complete source code.
Requirements
- React 19+ or React 18.2+
- Next.js 15+ (App Router) or Vite 5+
- Tailwind CSS v4
- TypeScript 5+ (recommended)
- Node.js 18+ for CLI tools