# React UI Components
URL: /components/index
59+ production-ready UI components for React. Interactive elements, data displays, forms, navigation. Copy-paste into your Next.js project.

Standard UI components get you started. These get you finished. Every interaction polished, every edge case handled, every animation smooth. 59+ components across 18 categories, built on shadcn/ui and ready for production.

## Pick a Category

### Interactive

Mouse-tracking cards, animated modals, carousels, tooltips. Components that respond to user input in satisfying ways.

<Cards>
  <Card href="/components/interactive/3d-card" title="3D Card" description="Tilt on mouse move" />
  <Card href="/components/interactive/animated-modal" title="Animated Modal" description="Smooth open/close" />
  <Card href="/components/interactive/animated-tooltip" title="Animated Tooltip" description="Follow cursor" />
  <Card href="/components/interactive/apple-cards-carousel" title="Apple Cards Carousel" description="Stacked card slider" />
  <Card href="/components/interactive/tabs" title="Tabs" description="Animated tab switching" />
  <Card href="/components/interactive/spinner" title="Spinner" description="Loading indicators" />
</Cards>

---

### Code

Syntax highlighting, live editors, multi-file tabs. Everything for displaying and editing code.

<Cards>
  <Card href="/components/code/code-block" title="Code Block" description="Syntax highlighting" />
  <Card href="/components/code/code-editor" title="Code Editor" description="macOS window style" />
  <Card href="/components/code/code-tabs" title="Code Tabs" description="Multi-language examples" />
  <Card href="/components/code/sandbox" title="Sandbox" description="Live code playground" />
</Cards>

---

### Data

Tables, kanban boards, gantt charts, lists. Components for displaying and organizing data.

<Cards>
  <Card href="/components/data/table" title="Table" description="Sortable data table" />
  <Card href="/components/data/kanban" title="Kanban" description="Drag-and-drop board" />
  <Card href="/components/data/gantt" title="Gantt" description="Timeline chart" />
  <Card href="/components/data/list" title="List" description="Sortable list items" />
</Cards>

---

### Navigation

Navbars, docks, menus. Ways to move around your app.

<Cards>
  <Card href="/components/navbar/navbar" title="Navbar" description="Sticky header nav" />
  <Card href="/components/dock/dock" title="Dock" description="Icon navigation bar" />
  <Card href="/components/dock/mac-os-dock" title="macOS Dock" description="Magnifying icons" />
  <Card href="/components/dock/limelight-nav" title="Limelight Nav" description="Spotlight indicator" />
  <Card href="/components/dock/menu-dock" title="Menu Dock" description="Expandable menu" />
</Cards>

---

### Forms

Color pickers, comboboxes, file uploads, choice selectors. Input components beyond the basics.

<Cards>
  <Card href="/components/forms/combobox" title="Combobox" description="Searchable dropdown" />
  <Card href="/components/forms/color-picker" title="Color Picker" description="Color selection" />
  <Card href="/components/forms/dropzone" title="Dropzone" description="Drag-and-drop upload" />
  <Card href="/components/forms/choicebox" title="Choicebox" description="Option cards" />
</Cards>

---

### Layout

Announcements, banners, marquees, cursors. Page-level layout components.

<Cards>
  <Card href="/components/layout/announcement" title="Announcement" description="Dismissible banner" />
  <Card href="/components/layout/banner" title="Banner" description="Full-width alert" />
  <Card href="/components/layout/marquee" title="Marquee" description="Scrolling content" />
  <Card href="/components/layout/cursor" title="Cursor" description="Custom cursor" />
</Cards>

---

### Time

Calendars, date pickers, world clocks. Date and time display components.

<Cards>
  <Card href="/components/time/calendar" title="Calendar" description="Full month view" />
  <Card href="/components/time/mini-calendar" title="Mini Calendar" description="Compact date picker" />
  <Card href="/components/time/relative-time" title="Relative Time" description="Multi-timezone clock" />
</Cards>

---

### Device Mocks

Phone and browser frames for showcasing your app.

<Cards>
  <Card href="/components/device-mocks/iphone-15-pro" title="iPhone 15 Pro" description="iOS device frame" />
  <Card href="/components/device-mocks/android" title="Android" description="Android device frame" />
  <Card href="/components/device-mocks/safari" title="Safari" description="Browser window" />
</Cards>

---

### Visualization

Video players, terminals, QR codes, status indicators. Ways to display content and state.

<Cards>
  <Card href="/components/visualization/video-player" title="Video Player" description="Custom controls" />
  <Card href="/components/visualization/terminal" title="Terminal" description="CLI with typing" />
  <Card href="/components/visualization/qr-code" title="QR Code" description="Theme-aware codes" />
  <Card href="/components/visualization/comparison" title="Comparison" description="Before/after slider" />
  <Card href="/components/visualization/status" title="Status" description="System health" />
  <Card href="/components/visualization/kbd" title="Kbd" description="Keyboard shortcuts" />
</Cards>

---

### Media

Avatars, pills, tags. Small display components for user content and metadata.

<Cards>
  <Card href="/components/media/avatar-group" title="Avatar Group" description="Stacked avatars" />
  <Card href="/components/media/pill" title="Pill" description="Status badges" />
  <Card href="/components/media/tags" title="Tags" description="Multi-select input" />
</Cards>

---

### Image

Cropping and zooming for image handling.

<Cards>
  <Card href="/components/image/image-crop" title="Image Crop" description="Aspect ratio cropping" />
  <Card href="/components/image/image-zoom" title="Image Zoom" description="Click to expand" />
</Cards>

---

### Special Effects

Magnetic elements, animated beams, motion effects. Add visual polish.

<Cards>
  <Card href="/components/special-effects/magnetic" title="Magnetic" description="Cursor attraction" />
  <Card href="/components/special-effects/animated-beam" title="Animated Beam" description="Connection lines" />
  <Card href="/components/special-effects/motion-highlight" title="Motion Effect" description="Entrance animations" />
  <Card href="/components/special-effects/pixel-image" title="Pixel Image" description="Grid reveal" />
</Cards>

---

### Finance

Credit cards and stock tickers for financial interfaces.

<Cards>
  <Card href="/components/finance/credit-card" title="Credit Card" description="Interactive card" />
  <Card href="/components/finance/ticker" title="Ticker" description="Stock display" />
</Cards>

---

### Buttons

Beyond the basic button. Animations, states, and special interactions.

<Cards>
  <Card href="/components/buttons/copy-button" title="Copy Button" description="Clipboard with feedback" />
  <Card href="/components/buttons/magnetic-button" title="Magnetic Button" description="Cursor pull" />
  <Card href="/components/buttons/ripple-button" title="Ripple Button" description="Material ripple" />
  <Card href="/components/buttons/flip-button" title="Flip Button" description="3D flip effect" />
  <Card href="/components/buttons/liquid-button" title="Liquid Button" description="Morphing shape" />
  <Card href="/components/buttons/theme-toggle-button" title="Theme Toggle" description="Dark mode switch" />
</Cards>

---

### Text & Feedback

Counters, ratings, and text display components.

<Cards>
  <Card href="/components/text/counter" title="Counter" description="Animated number" />
  <Card href="/components/feedback/rating" title="Rating" description="Star rating input" />
</Cards>

---

## Using Components

Install with the CLI:

```bash
npx shadcn@latest add https://shadcn.io/r/code-block.json
```

Or copy from the component page directly into your project. Each component is self-contained with all dependencies listed.

---

## FAQ

<Accordions>
  <Accordion title="How do I install a component?">
    Run `npx shadcn@latest add https://shadcn.io/r/component-name.json` or copy the code from the component page. The CLI handles dependencies automatically.
  </Accordion>

  <Accordion title="Do these work with Next.js App Router?">
    Yes. Components are marked with 'use client' where needed and work with Server Components in Next.js 13+.
  </Accordion>

  <Accordion title="Can I customize the styling?">
    Every component uses Tailwind CSS and accepts className props. The code is yours to modify however you need.
  </Accordion>

  <Accordion title="Are these accessible?">
    Components follow accessibility best practices with proper ARIA attributes, keyboard navigation, and focus management where applicable.
  </Accordion>

  <Accordion title="What about TypeScript?">
    Full TypeScript support. All components export their prop types for type safety.
  </Accordion>
</Accordions>