Components
A collection of accessible and customizable React components built for modern web applications.
Getting Started
All components are built following the shadcn/ui pattern and can be installed using the shadcn CLI:
npx shadcn@latest add <component-name> --registry https://pluto-ui.dev/rAvailable Components
ASCII Image
Convert images to ASCII art with advanced options including edge detection, dithering algorithms, and customizable charsets.
Card Grid
An interactive card grid component with smooth expand/collapse animations, where clicking a card expands it to reveal more content.
Dot Matrix Display
A retro dot matrix display component with animated scrolling text, customizable colors, and authentic LED-style visual effects.
Feature Block
An interactive feature showcase component using native details/summary elements with ::details-content and content-visibility for smooth CSS-only animations.
Gleam Box
A scroll-triggered box component with a beautiful shine effect using CSS view-timeline animations.
iPadOS Pointer Cursor
Interactive cursor component that highlights interactive elements with smooth animations, mimicking iPadOS pointer interactions.
Item Transition
An image carousel component with 17 creative transition effects powered by framer-motion, supporting small, fullwidth, and transparent variants.
Pattern Carousel
An interactive carousel component with multiple animation patterns including circle, wave, stagger, grid, fan, and 3D depth.
Prism Button
A stunning animated button with prismatic gradient effects, shimmer animations, and customizable colors.
Scanner Reveal
An animated card stream component with a scanner effect that reveals ASCII art as cards pass through.
Scroll Percentage
A customizable scroll percentage indicator component that displays at the bottom right, supporting multiple UI variants.
Stats Card
An animated stats card component with a glowing dot that moves around the corners, featuring gradient backgrounds, ray effects, and decorative lines.
Loader
An animated loader component with rotating gradient shadows and wave-animated letters, perfect for loading states.
Split View
A clean, minimal split view component with smooth draggable divider, inspired by Edge mobile and Apple UI design.
Sprite Animation
A sprite animation component that animates through frames from a sprite sheet using CSS background-image, background-size, and background-position.
WebGL Effects
Apply stunning WebGL shader effects to any element using vfx-js, with support for built-in shaders and custom shaders.
Installation
Each component can be installed individually. See the component's documentation page for specific installation instructions and dependencies.
Component Structure
All Pluto UI components are located in src/components/pluto-ui/ and follow these conventions:
- Type-safe: Full TypeScript support
- Theme-aware: Support for light and dark themes
- Accessible: Built with accessibility in mind
- Customizable: Easy to customize with Tailwind CSS