# Planes

> Planes — interactive components for modern interfaces. A set of beautifully crafted React components and interactions you can customize, extend, and build on.

Planes is a shadcn-style registry, not an npm package. The shadcn CLI writes real `.tsx` source files into the consuming project, so every component is owned and editable by the person who installs it. Built with React 19, Next.js, Tailwind CSS v4, TypeScript, and Motion — Motion is the only runtime animation dependency.

There are two tiers across 62 components. The 54 Pro components require a Planes Pro license. One-time setup registers the `@useplanes` namespace in `components.json` and puts the key in `.env.local` (`npx @useplanes/cli init --key your_key`), after which Pro components install by name:

```
npx shadcn add @useplanes/command-palette
```

The 8 free components install from a public registry URL with no account:

```
npx shadcn add https://planes.ashishgogula.in/r/segmented-control.json
```

The gated registry validates the license on every request, so Pro install commands fail without a valid key. Each component page below carries a live demo, a props table, and its own install command.

## Docs

- [Introduction](https://planes.ashishgogula.in/components/introduction): What Planes is, what it is built on, and how the registry distributes source instead of a package.
- [Installation](https://planes.ashishgogula.in/components/installation): Install free components from the public registry URL, or configure the @useplanes registry with a license key for Pro.
- [MCP](https://planes.ashishgogula.in/components/mcp): Point the shadcn MCP server at Planes so agents like Claude Code and Cursor can browse and install components from natural language.
- [All components](https://planes.ashishgogula.in/components): The full catalog, grouped by category, with a live demo, props table, and install command per component.
- [Hero sections](https://planes.ashishgogula.in/components/heroes): Gallery page for the hero components; individual hero slugs redirect here.
- [Planes Pro](https://planes.ashishgogula.in/pro): One-time payment for lifetime access to every Pro component and template. Unlimited commercial use, all sales final (no refunds).
- [Set up Planes Pro](https://planes.ashishgogula.in/setup): Activate a license key and wire PLANES_LICENSE_KEY into a project.

## AI

- [Thinking Loader](https://planes.ashishgogula.in/components/thinking-loader): Free. An AI thinking pill that cycles through phase labels like Searching and Writing, then pops a check when it finishes. Install: `npx shadcn add https://planes.ashishgogula.in/r/thinking-loader.json`
- [AI Prompt Composer](https://planes.ashishgogula.in/components/ai-prompt-composer): Pro. An AI chat composer with an auto-growing input, a model picker, and a send button that turns into a stop button while a response streams. Install: `npx shadcn add @useplanes/ai-prompt-composer`
- [Streaming Message](https://planes.ashishgogula.in/components/streaming-message): Pro. An assistant message that develops in like ink — a soft-feathered edge sweeps down the text with an iridescent glow riding the write-frontier, then copy, regenerate, and feedback actions fade in without shifting the layout. Install: `npx shadcn add @useplanes/streaming-message`
- [Reasoning Trace](https://planes.ashishgogula.in/components/reasoning-trace): Pro. A collapsible thinking panel that streams reasoning steps one at a time, then folds down to a short summary you can reopen. Install: `npx shadcn add @useplanes/reasoning-trace`
- [AI Chat](https://planes.ashishgogula.in/components/ai-chat): Pro. A full chat experience that ties the AI components together. Send a prompt and watch the reasoning stream, the reply type out, and the view pin to the bottom. Install: `npx shadcn add @useplanes/ai-chat`

## Media

- [Album Cover](https://planes.ashishgogula.in/components/album-cover): Pro. A vinyl sleeve player. The record lifts out, spins, and responds to the transport controls. Install: `npx shadcn add @useplanes/album-cover`
- [Retro Music Player](https://planes.ashishgogula.in/components/retro-music-player): Pro. A handheld retro media player with a CRT display, a speaker grill, and spring-loaded transport buttons. Install: `npx shadcn add @useplanes/retro-music-player`
- [Link Preview](https://planes.ashishgogula.in/components/link-preview): Pro. Hyperlinks that show an image tooltip on hover, tracking your cursor with a parallax tilt on the artwork. Install: `npx shadcn add @useplanes/link-preview`
- [Direction-Aware Flip Card](https://planes.ashishgogula.in/components/direction-aware-flip-card): Pro. A flip card that swings toward the side your cursor enters from, with a tracked sheen, parallax tilt, and a lifting shadow. Install: `npx shadcn add @useplanes/direction-aware-flip-card`
- [Hover Reveal](https://planes.ashishgogula.in/components/hover-reveal): Pro. A two-column client index. Hover a name and its preview scales into focus while the row drifts under your cursor. Install: `npx shadcn add @useplanes/hover-reveal`
- [Radial Pop-out](https://planes.ashishgogula.in/components/radial-pop-out): Pro. A center card ringed by smaller cards. Hovering the center scatters them outward with spring overshoot; leaving snaps them back behind. Install: `npx shadcn add @useplanes/radial-pop-out`
- [Hero Card Stack](https://planes.ashishgogula.in/components/hero-card-stack): Pro. A fanned arc of overlapping artwork cards. Hover one and it springs forward while its neighbors nudge aside. Install: `npx shadcn add @useplanes/hero-card-stack`
- [Swipe Card Deck](https://planes.ashishgogula.in/components/swipe-card-deck): Pro. A swipeable card deck. The front card drags off in your swipe direction, then tucks behind a fanned stack. Built for touch, with a reduced-motion fallback. Install: `npx shadcn add @useplanes/swipe-card-deck`
- [Watch Face](https://planes.ashishgogula.in/components/watch-face): Pro. An Apple-style analog clock whose tick ring and numerals wrap the card's own rounded corners, with a vermillion sweeping second hand. Install: `npx shadcn add @useplanes/watch-face`
- [Apple Music Card](https://planes.ashishgogula.in/components/apple-music-card): Pro. A now-playing card that resolves tracks straight from iTunes search URLs and plays their previews, shuffling through the list and auto-advancing between songs. Install: `npx shadcn add @useplanes/apple-music-card`
- [GitHub Chart](https://planes.ashishgogula.in/components/github-chart): Pro. A GitHub contribution graph with a linked profile header, hover tooltips, and a staggered reveal. Point it at any username for live data, or feed it your own counts. Install: `npx shadcn add @useplanes/github-chart`
- [Avatar Cluster](https://planes.ashishgogula.in/components/avatar-cluster): Pro. Avatars fly in from the blurred foreground and pack into a slowly orbiting rosette, computed for any head-count. Install: `npx shadcn add @useplanes/avatar-cluster`
- [Expanding Card](https://planes.ashishgogula.in/components/expanding-card): Pro. A feature card that grows from its place in the grid into a full detail view, artwork welded to the card the whole way, with body copy that lands after it settles. Install: `npx shadcn add @useplanes/expanding-card`
- [Digital Watch Face](https://planes.ashishgogula.in/components/digital-watch-face): Pro. The iOS world-clock widget as a live component — a tick ring fills with the passing seconds around rolling digits, a city label, and the offset from your local time. Install: `npx shadcn add @useplanes/digital-watch-face`
- [Photo Lightbox](https://planes.ashishgogula.in/components/photo-lightbox): Pro. An image grid that flies the tapped photo into a fullscreen viewer. Swipe between shots, then drag down and let go — it shrinks in your hand and flicks back to its cell. Install: `npx shadcn add @useplanes/photo-lightbox`
- [Curved Video Player](https://planes.ashishgogula.in/components/curved-video-player): Pro. A YouTube player on an IMAX-style curved screen, backlit by ambient light that tracks playback, with YouTube's own controls left in charge. Letterboxed films are measured and cropped to fit. Install: `npx shadcn add @useplanes/curved-video-player`
- [Holographic Card](https://planes.ashishgogula.in/components/holographic-card): Pro. A cursor-tilted card with trading-card foil — an iridescent sheen shifts with the tilt angle, glare tracks the light source, and a rainbow ring rides the edges. Install: `npx shadcn add @useplanes/holographic-card`

## Carousels

- [Cover Flow](https://planes.ashishgogula.in/components/cover-flow): Free. A 3D coverflow carousel with spring physics. Navigate by drag, scroll wheel, or keyboard, with optional reflection and audio feedback. Install: `npx shadcn add https://planes.ashishgogula.in/r/cover-flow.json`
- [Image Flow Carousel](https://planes.ashishgogula.in/components/image-flow-carousel): Pro. A gallery that stretches whichever frame you hover into focus. Install: `npx shadcn add @useplanes/image-flow-carousel`
- [Arc Marquee](https://planes.ashishgogula.in/components/arc-marquee): Pro. Portrait cards ride a curved arc, tilting and dropping toward the edges as they auto-scroll past. Drag to scrub, hover to slow. Install: `npx shadcn add @useplanes/arc-marquee`

## Controls

- [Segmented Control](https://planes.ashishgogula.in/components/segmented-control): Free. Segmented tabs with a pill that stretches as it moves and settles into the selected tab. Install: `npx shadcn add https://planes.ashishgogula.in/r/segmented-control.json`
- [Number Stepper](https://planes.ashishgogula.in/components/number-stepper): Free. A number input with rolling digits and plus and minus buttons that spring on press. Install: `npx shadcn add https://planes.ashishgogula.in/r/number-stepper.json`
- [Email Capture](https://planes.ashishgogula.in/components/email-capture): Pro. An email signup that expands from a button and animates from idle into a success state. Install: `npx shadcn add @useplanes/email-capture`
- [Command Palette](https://planes.ashishgogula.in/components/command-palette): Pro. A command palette with grouped results, fuzzy search, and a useCommandPalette hook that wires up Cmd+K for you. Install: `npx shadcn add @useplanes/command-palette`
- [Physical Knob](https://planes.ashishgogula.in/components/physical-knob): Pro. A realistic rotary knob with depth, spring-loaded momentum, and lighting that reacts as you turn it. Install: `npx shadcn add @useplanes/physical-knob`
- [Card Stack](https://planes.ashishgogula.in/components/card-stack): Pro. Stacked notification cards that fan out into a full list, then collapse back into a compact peek. Install: `npx shadcn add @useplanes/card-stack`
- [Date Picker](https://planes.ashishgogula.in/components/animated-date-picker): Pro. A calendar picker with spring month transitions and day cells that stagger in as you navigate. Install: `npx shadcn add @useplanes/animated-date-picker`
- [Animated Select](https://planes.ashishgogula.in/components/animated-select): Pro. A searchable, grouped select that becomes a drag-to-dismiss bottom sheet on mobile and a spring popover on desktop. Install: `npx shadcn add @useplanes/animated-select`
- [Modern Command Palette](https://planes.ashishgogula.in/components/modern-command-palette): Pro. A nested-card command palette that springs open, staggers its groups with a blur-fade, and drives fully from the keyboard. Install: `npx shadcn add @useplanes/modern-command-palette`
- [OTP Input](https://planes.ashishgogula.in/components/otp-input): Free. A one-time-code input with rolling digit entry, an animated caret, error shake, and a success pop. Paste-friendly and accessible. Install: `npx shadcn add https://planes.ashishgogula.in/r/otp-input.json`
- [Reaction Arc](https://planes.ashishgogula.in/components/reaction-arc): Pro. A Like button that reveals a reaction picker on hover. Your pick flies back along a curved path and becomes the active reaction. Install: `npx shadcn add @useplanes/reaction-arc`
- [Detent Drawer](https://planes.ashishgogula.in/components/detent-drawer): Pro. An iOS-style bottom sheet with detents. Drag between resting heights, rubber-band past the top, flick down to dismiss — all velocity-aware. Install: `npx shadcn add @useplanes/detent-drawer`
- [Receipt Printer](https://planes.ashishgogula.in/components/receipt-printer): Pro. A thermal printer that feeds out a receipt line by line, then waits for you to grab the paper and tear it off — resistance first, then the rip. Install: `npx shadcn add @useplanes/receipt-printer`
- [Passport Stamp](https://planes.ashishgogula.in/components/passport-stamp): Pro. Click the document and a stamp slams down — the card dips under the impact, and the ink lands at a slightly different angle every time. Install: `npx shadcn add @useplanes/passport-stamp`
- [Rubber Band Select](https://planes.ashishgogula.in/components/rubber-band-select): Pro. Drag-select where the marquee is an elastic band — it bows behind fast movement, items pop as it overtakes them, and on release it snaps tight around the selection. Install: `npx shadcn add @useplanes/rubber-band-select`

## Physics

- [Pendulum Wave](https://planes.ashishgogula.in/components/pendulum-wave): Free. Nine pendulums of different lengths drift out of sync to form a travelling wave, driven entirely by their physics. Install: `npx shadcn add https://planes.ashishgogula.in/r/pendulum-wave.json`
- [Ripple Grid](https://planes.ashishgogula.in/components/ripple-grid): Free. A grid of nodes lit by spreading wavefronts. It fires on its own every few seconds, or click to start one. Install: `npx shadcn add https://planes.ashishgogula.in/r/ripple-grid.json`
- [Pulse Spikes](https://planes.ashishgogula.in/components/pulse-spikes): Pro. Radial spikes pulse outward in a staggered sine wave. A distinctive loading animation. Install: `npx shadcn add @useplanes/pulse-spikes`
- [Particle Reveal](https://planes.ashishgogula.in/components/particle-reveal): Pro. Particles scatter out of noise and converge into text. A clean AI-generation reveal. Install: `npx shadcn add @useplanes/particle-reveal`
- [Rubik's Cube](https://planes.ashishgogula.in/components/rubiks-cube): Pro. An interactive 3D Rubik's cube. Drag to orbit, click a face to twist a layer. Built with CSS 3D transforms. Install: `npx shadcn add @useplanes/rubiks-cube`
- [Dotted Sphere](https://planes.ashishgogula.in/components/dotted-sphere): Pro. A globe of dots that drift in space and scatter from your cursor; tap to send a shockwave rippling through them. Toggle to a smooth perspective spin. Install: `npx shadcn add @useplanes/dotted-sphere`
- [Dot Monogram](https://planes.ashishgogula.in/components/dot-monogram): Pro. Text or an image rendered as drifting dots that scatter from your cursor; tap to send a shockwave rippling through the glyph. Install: `npx shadcn add @useplanes/dot-monogram`

## Text

- [Smooth Stagger Text](https://planes.ashishgogula.in/components/smooth-stagger-text): Free. On hover, the label fades out and new text resolves character by character, each glyph shimmering up before it settles. Install: `npx shadcn add https://planes.ashishgogula.in/r/smooth-stagger-text.json`
- [Split-Flap Board](https://planes.ashishgogula.in/components/split-flap-board): Pro. An airport departure board that flips through characters mechanically to spell each phrase, every cell cascading at its own pace. Install: `npx shadcn add @useplanes/split-flap-board`

## Sections

- [Pricing Table](https://planes.ashishgogula.in/components/pricing-table): Pro. A pricing section with a billing toggle, prices that roll when you switch, and a highlighted popular tier. Install: `npx shadcn add @useplanes/pricing-table`
- [Testimonial Marquee](https://planes.ashishgogula.in/components/testimonial-marquee): Pro. Two rows of testimonials that scroll in opposite directions and slow down when you hover. Loops forever. Install: `npx shadcn add @useplanes/testimonial-marquee`
- [FAQ Section](https://planes.ashishgogula.in/components/faq-section): Pro. An FAQ accordion where rows pop in, panels unfold on a spring, and the plus icon twists into a close mark. Install: `npx shadcn add @useplanes/faq-section`
- [Integration Beams](https://planes.ashishgogula.in/components/integration-beams): Pro. Integration logos fire a synchronized wave of light pulses along drawn beams that converge on a central hub, which swells and ripples as they land together. Install: `npx shadcn add @useplanes/integration-beams`
- [World Map](https://planes.ashishgogula.in/components/world-map): Pro. A dotted world map where comets of light arc between cities, each landing with a ripple. Markers pulse idly and reveal their labels on hover. Install: `npx shadcn add @useplanes/world-map`
- [Dotted Globe](https://planes.ashishgogula.in/components/dotted-globe): Pro. A rotating globe of land dots with your locations glowing as accent markers, each sending out a slow ripple. Drag to spin it — momentum hands back to the idle rotation. Install: `npx shadcn add @useplanes/dotted-globe`
- [Radar Sweep](https://planes.ashishgogula.in/components/radar-sweep): Pro. A radar with a glowing sweep arm that lights up blips as it passes, each flaring with a ripple before fading until the next pass. Install: `npx shadcn add @useplanes/radar-sweep`
- [Activity Feed](https://planes.ashishgogula.in/components/activity-feed): Pro. Notification cards stream in from the top, springing the stack down as older ones dissolve through a soft fade at the bottom. Install: `npx shadcn add @useplanes/activity-feed`
- [Neural Network Beams](https://planes.ashishgogula.in/components/neural-network-beams): Pro. A layered network that lights up in a real forward pass — each layer fires into the next until the output reveals a result. Install: `npx shadcn add @useplanes/neural-network-beams`

## Templates

- [AI Automation Platform](https://planes.ashishgogula.in/components/ai-automation-template): Pro. A full landing page for AI automation products, built from the section components with scroll-triggered reveals: hero, feature grid, testimonials, pricing, CTA, and footer. Install: `npx shadcn add @useplanes/ai-automation-template`

## Heroes

- [Scenic Hero](https://planes.ashishgogula.in/components/heroes): Pro. A bright, centered hero with an avatar trust badge, a two-line headline, and a painted valley that settles with a slow Ken Burns drift. Install: `npx shadcn add @useplanes/scenic-hero`
- [Editorial Hero](https://planes.ashishgogula.in/components/heroes): Pro. An image-first hero with a floating pill nav, a framed classical painting, a serif headline accent, and inline email capture. Install: `npx shadcn add @useplanes/editorial-hero`
- [Landing Hero](https://planes.ashishgogula.in/components/heroes): Pro. A landing hero with pill nav, badge, headline, and two CTAs over a painted dusk landscape. Pure SVG, no image assets. Install: `npx shadcn add @useplanes/landing-hero`

## Optional

- [Templates](https://planes.ashishgogula.in/templates): Live full-page template demos.
- [Portfolio Pro demo](https://planes.ashishgogula.in/templates/portfolio-pro): Rendered portfolio template.
- [Nexus demo](https://planes.ashishgogula.in/templates/nexus): Rendered SaaS landing template.
- [Shaders](https://planes.ashishgogula.in/shaders): Experimental GLSL/WebGL fields. Not part of the registry.
- [Free registry index](https://planes.ashishgogula.in/r/index.json): Machine-readable shadcn registry index for the free tier.