Components that move.
Prompts that ship.
A library of animated React components and landing page sections for Tailwind CSS and shadcn/ui, plus full-site prompts for your AI builder. Copy the code, or paste the prompt.
$pnpm dlx shadcn@latest add "https://pixelpapa.com/r/hero-dashboard-lift.json"One place
Everything between a blank page and a launch
spotlight-card · move your cursor
magnetic-button
Spring physics, 60 lines, zero config.
The index
Sections for marketing pages, components for everything inside them, and app UI for what comes after sign-up.
Sections130
- NavbarsHeaders, floating bars and mega menus.12
- Hero SectionsAbove-the-fold openers with motion.16
- Feature SectionsExplain what the product does.12
- Bento GridsAsymmetric grids of live tiles.07
- StatsNumbers that count themselves up.07
- Logo CloudsSocial proof, in a row or a marquee.06
- PricingPlans, toggles and comparison tables.10
- TestimonialsQuotes, walls and case studies.10
- FAQsAnswers, expanded on demand.07
- Calls to ActionThe closing argument.08
- FootersSitemaps, wordmarks and sign-offs.08
- Contact & NewsletterForms that people finish.06
- Team & AboutThe people behind it.04
- Blog SectionsPost grids, lists and featured stories.05
- Auth ScreensSign in, sign up and verification.06
- BannersAnnouncements, cookies and countdowns.06
Components180
- ButtonsMagnetic, morphing, confirming.16
- BadgesStatus, counts and labels.07
- Toggles & SwitchesBinary choices with character.07
- InputsText, tags, OTP, numbers and more.14
- Checkboxes & RadiosSelection controls that feel physical.06
- SelectsComboboxes, pickers and multi-selects.06
- SlidersRanges, rulers and dials.06
- Text EffectsType that reveals, scrambles and flows.15
- BackgroundsGrids, auroras, particles and noise.12
- CardsTilt, spotlight, glass and stacks.13
- CarouselsCoverflows, stacks and marquees.07
- AvatarsStacks, status and hover cards.06
- LoadersSpinners, skeletons and progress.09
- AccordionsDisclosure with smooth height.05
- TabsSliding, magnetic and vertical tabs.07
- Tooltips & PopoversContext that appears on cue.05
- Dialogs & DrawersModals, sheets and confirmations.07
- Docks & MenusDocks, toolbars and context menus.08
- AI ElementsPrompt inputs, streams and agents.10
- ChartsDependency-free animated SVG charts.09
- Audio & MediaPlayers, waveforms and compare sliders.05
App UI58
- Calendars & DatesPickers, ranges and schedulers.07
- Tables & ListsSortable, selectable, expandable data.05
- NotificationsToasts, inboxes and alerts.06
- Command & SearchPalettes and spotlight search.04
- PaginationPages, dots and load-more.06
- BreadcrumbsWayfinding for deep apps.04
- Steppers & TimelinesProgress through steps and time.06
- Files & UploadsTrees, dropzones and progress lists.05
- Dashboard WidgetsKPI tiles, activity feeds and panels.07
- SidebarsCollapsible app navigation.04
- Empty StatesBlank slates that point the way.04
Fresh
Recently added
Site prompts
Copy a prompt. Paste it. Launch.
Full landing pages with the art direction already written down, so your AI builder gets it right the first time.
Tools
Sharp motion deserves sharp images
The PixelPapa enhancer upscales and restores images up to 4× with Real-ESRGAN. Fix the hero shot, the avatars and the product photos before they go into your new sections.
Try the enhancerQuestions
What is PixelPapa UI?+
PixelPapa UI is a library of 368 animated React components and landing page sections, plus 10 full-site templates with AI prompts and free design tools. 144 components are free; the rest come with PixelPapa Pro. Components are built with Tailwind CSS and Motion (formerly Framer Motion) and install with the shadcn CLI.
Is it free?+
144 components, a selection of site templates and the CSS design tools are free for personal and commercial work. PixelPapa Pro unlocks every component and site template (code, CLI install and AI prompts) and the AI image enhancer, with 300 images a month.
How is this different from a component package?+
Nothing is installed as a dependency. The shadcn CLI copies a single .tsx file into your project, and from then on it is your code to change.
What do I need in my project?+
React 18 or 19, Tailwind CSS v4 and the shadcn colour tokens. Animated components use Motion; icons come from lucide-react.
What are site prompts?+
Complete landing pages, each with a long art-directed prompt. Paste the prompt into Claude, Cursor, v0 or Lovable and you get the same page in your own stack, ready for your copy.
Do the components support dark mode and reduced motion?+
Both. Components only use theme tokens, so they follow your light and dark palettes, and animations fall back gracefully when the visitor prefers reduced motion.
Do they work with shadcn/ui and Next.js?+
Yes. Components use the same colour tokens as shadcn/ui and install with npx shadcn@latest add. They work in Next.js (App Router and Pages Router), Vite, React Router and Astro, and interactive components are marked "use client".