# 368 React components (144 free) for Tailwind CSS and shadcn/ui > PixelPapa UI is a library of 368 animated React components and landing page sections (144 free, the rest with PixelPapa Pro), 10 full-site templates with copy-paste AI prompts, free design tools, and an AI image upscaler with PixelPapa Pro. Components are single TypeScript (.tsx) files built with Tailwind CSS v4 and Motion (formerly Framer Motion), use shadcn/ui colour tokens, and install with the shadcn CLI. ## Sections - [Navbars](https://pixelpapa.com/components/navbars.md) (12): Animated React navbars built with Tailwind CSS and Motion: floating pills, mega menus, mobile menus and scroll-aware headers. Copy the code or install with the shadcn CLI. - [Hero Sections](https://pixelpapa.com/components/heroes.md) (16): Animated hero sections for landing pages, built with React, Tailwind CSS and Motion. Product mockups, email capture, video, terminal and editorial layouts. - [Feature Sections](https://pixelpapa.com/components/features.md) (12): Feature sections for landing pages: sticky scroll, tabbed showcases, comparison tables, timelines and integration hubs. React, Tailwind CSS and Motion. - [Bento Grids](https://pixelpapa.com/components/bento.md) (7): Animated bento grid layouts for React and Tailwind CSS, with live tiles: charts, globes, cursors, terminals and AI demos inside each cell. - [Stats](https://pixelpapa.com/components/stats.md) (7): Animated stats and metrics sections: count-up numbers, odometers, sparklines and radial progress, built with React, Tailwind CSS and Motion. - [Logo Clouds](https://pixelpapa.com/components/logo-clouds.md) (6): Logo cloud and customer logo sections for React and Tailwind CSS: infinite marquees, hover reveals, orbit rings and stat headers. - [Pricing](https://pixelpapa.com/components/pricing.md) (10): Pricing tables and pricing sections for SaaS: monthly/yearly toggles, usage sliders, comparison matrices, add-on builders and currency switchers. - [Testimonials](https://pixelpapa.com/components/testimonials.md) (10): Testimonial sections for React and Tailwind CSS: marquee walls, stacked cards, featured quotes, video testimonials, ratings and case study tabs. - [FAQs](https://pixelpapa.com/components/faqs.md) (7): FAQ sections and accordions for React and Tailwind CSS: smooth accordions, searchable FAQs, category FAQs and chat-style answers. - [Calls to Action](https://pixelpapa.com/components/cta.md) (8): Call-to-action (CTA) sections for landing pages: glowing cards, countdowns, app download blocks, marquee bands and split forms. React + Tailwind CSS. - [Footers](https://pixelpapa.com/components/footers.md) (8): Website footers for React and Tailwind CSS: giant wordmarks, sitemap columns, newsletter footers, dark gradient footers and editorial layouts. - [Contact & Newsletter](https://pixelpapa.com/components/contact.md) (6): Contact forms, newsletter signups and booking sections for React and Tailwind CSS, with validation states and success animations. - [Team & About](https://pixelpapa.com/components/team.md) (4): Team and about-us sections for React and Tailwind CSS: team grids with hover bios, leadership rows, company values and story timelines. - [Blog Sections](https://pixelpapa.com/components/blog.md) (5): Blog layouts for React and Tailwind CSS: featured posts, magazine grids, filterable categories, hover previews and changelog feeds. - [Auth Screens](https://pixelpapa.com/components/auth.md) (6): Authentication screens for React and Tailwind CSS: login pages, sign-up flows, OTP verification, password strength meters and magic link screens. - [Banners](https://pixelpapa.com/components/banners.md) (6): Announcement banners, cookie consent banners, sale countdowns and status banners for React and Tailwind CSS. ## Components - [Buttons](https://pixelpapa.com/components/buttons.md) (16): Animated buttons for React and Tailwind CSS: magnetic, shimmer, border beam, hold-to-confirm, loading states, confetti and slide-to-unlock. - [Badges](https://pixelpapa.com/components/badges.md) (7): Badge and tag components for React and Tailwind CSS: status pulses, count badges, dismissible tags, verified seals and trend deltas. - [Toggles & Switches](https://pixelpapa.com/components/toggles.md) (7): Animated toggle switches for React and Tailwind CSS: spring switches, day/night toggles, theme switchers and settings lists. - [Inputs](https://pixelpapa.com/components/inputs.md) (14): React input components: OTP inputs, tag inputs, password strength, number steppers, credit card, currency, phone and mention autocomplete fields. - [Checkboxes & Radios](https://pixelpapa.com/components/checkboxes.md) (6): Animated checkboxes and radio buttons for React and Tailwind CSS: drawn checks, todo lists, selectable cards, plan pickers and indeterminate trees. - [Selects](https://pixelpapa.com/components/selects.md) (6): Accessible select menus and comboboxes for React and Tailwind CSS: searchable comboboxes, multi-selects, people pickers and cascading menus. - [Sliders](https://pixelpapa.com/components/sliders.md) (6): Range sliders for React and Tailwind CSS: spring thumbs, dual range, ruler sliders, stepped labels, vertical volume and circular dials. - [Text Effects](https://pixelpapa.com/components/text.md) (15): Text animation effects for React and Tailwind CSS: scramble, typewriter, gradient text, word rotate, split-flap board, blur reveal and glitch. - [Backgrounds](https://pixelpapa.com/components/backgrounds.md) (12): Animated backgrounds for React and Tailwind CSS: aurora gradients, particle constellations, flow fields, dot grids, meteors, beams and mesh gradients. - [Cards](https://pixelpapa.com/components/cards.md) (13): Animated cards for React and Tailwind CSS: 3D tilt, spotlight, flip, glassmorphism, border beam, swipe stacks and product cards. - [Carousels](https://pixelpapa.com/components/carousels.md) (7): React carousels with drag, momentum and keyboard support: coverflow 3D, infinite marquee, thumbnail gallery, stacked fade and story autoplay. - [Avatars](https://pixelpapa.com/components/avatars.md) (6): Avatar components for React and Tailwind CSS: avatar stacks, status rings, hover cards, story rings and upload dropzones. - [Loaders](https://pixelpapa.com/components/loaders.md) (9): Loading spinners, skeletons and progress indicators for React and Tailwind CSS: orbit dots, equalizers, progress rings and shimmer status text. - [Accordions](https://pixelpapa.com/components/accordions.md) (5): Animated accordions for React and Tailwind CSS: smooth height, numbered editorial, nested tree, icon cards and horizontal panels. - [Tabs](https://pixelpapa.com/components/tabs.md) (7): Animated tabs for React and Tailwind CSS: sliding pill, spring underline, vertical tabs, folder tabs and scrollable overflow tabs. - [Tooltips & Popovers](https://pixelpapa.com/components/tooltips.md) (5): Tooltips, popovers and hover cards for React and Tailwind CSS: cursor-following tooltips, rich cards, color picker and share popovers. - [Dialogs & Drawers](https://pixelpapa.com/components/dialogs.md) (7): Accessible modals, dialogs and drawers for React and Tailwind CSS: focus-trapped dialogs, bottom sheets, side panels and multi-step wizards. - [Docks & Menus](https://pixelpapa.com/components/docks.md) (8): MacOS-style docks, toolbars and menus for React and Tailwind CSS: magnifying dock, context menu, nested dropdowns, radial menu and menu bar. - [AI Elements](https://pixelpapa.com/components/ai.md) (10): AI UI components for React: prompt inputs, chat threads, streaming markdown, thinking steps, tool calls, citations and voice orbs. - [Charts](https://pixelpapa.com/components/charts.md) (9): Animated SVG charts for React with no chart library: area, bar, line, donut, gauge, funnel, heatmap and sparklines. Tailwind theme colours. - [Audio & Media](https://pixelpapa.com/components/media.md) (5): Media components for React and Tailwind CSS: music player cards, audio waveforms, video player controls, before/after image compare and podcast rows. ## App UI - [Calendars & Dates](https://pixelpapa.com/components/calendars.md) (7): React calendars and date pickers for Tailwind CSS: range pickers, popover date pickers, week strips, time wheels and year heatmaps. - [Tables & Lists](https://pixelpapa.com/components/tables.md) (5): Data tables for React and Tailwind CSS: sortable tables, bulk row selection, expandable rows, inline status editing and drag-to-reorder lists. - [Notifications](https://pixelpapa.com/components/notifications.md) (6): Toasts, notification inboxes and alerts for React and Tailwind CSS: stacked toasts, undo toasts, inbox popovers and swipe-to-dismiss lists. - [Command & Search](https://pixelpapa.com/components/command.md) (4): Command palettes and search for React and Tailwind CSS: ⌘K palettes, spotlight search, slash menus and keyboard shortcut sheets. - [Pagination](https://pixelpapa.com/components/pagination.md) (6): Pagination for React and Tailwind CSS: sliding active page, morphing dots, compact prev/next, load more, infinite scroll and jump-to-page. - [Breadcrumbs](https://pixelpapa.com/components/breadcrumbs.md) (4): Breadcrumbs for React and Tailwind CSS: collapsed dropdown breadcrumbs, icon chevrons, editable paths and step progress breadcrumbs. - [Steppers & Timelines](https://pixelpapa.com/components/steppers.md) (6): Steppers and timelines for React and Tailwind CSS: progress steppers, wizard forms, activity timelines, milestones and order tracking. - [Files & Uploads](https://pixelpapa.com/components/files.md) (5): File components for React and Tailwind CSS: drag-and-drop upload dropzones, upload progress lists, file trees, preview grids and attachment chips. - [Dashboard Widgets](https://pixelpapa.com/components/dashboard.md) (7): Dashboard widgets for React and Tailwind CSS: KPI tiles, activity feeds, revenue cards, team tables, goal progress, usage meters and live visitors. - [Sidebars](https://pixelpapa.com/components/sidebars.md) (4): App sidebars for React and Tailwind CSS: collapsible icon rails, nested sections, workspace switchers and floating inset sidebars. - [Empty States](https://pixelpapa.com/components/empty-states.md) (4): Empty states for React and Tailwind CSS: empty inbox illustrations, no search results, first-project prompts and error retry screens.