# 21st.dev

> AI-optimized mirror of 21st.dev containing 50 pages totalling 29,182 words of clean markdown content, structured data, and semantic HTML. Original source: https://21st.dev. Last updated: 2026-08-07T14:38:53.252Z.

Each page is available as HTML (with JSON-LD structured data) and Markdown (text-only, ideal for LLMs and RAG).

## Homepage

- [React Components, Templates & Themes — 12,000+ Crafted UI | 21st | 21st](/content/site-root.html): 12,000+ hand-crafted React and Tailwind CSS components, templates, and shadcn themes by real design engineers. Preview live, install with one command — for you and your AI agent. (852 words)

## Articles & Blog Posts

- [851+ Icon Components for React & Tailwind | 21st](/content/community/components/s/icon/index.html): Find the perfect icon for any project with 22 versatile React icon components, styled with Tailwind CSS for consistency and style. (285 words)
- [Featured community UI components | 21st](/content/community/components/featured/index.html): Curated, high-quality React components featured by the 21st.dev team and community. (355 words)
- [Changelog | 21st](/content/changelog/index.html): Everything we ship to 21st.dev, newest first. (3,651 words)
- [Landing Page Templates | 21st | 21st](/content/community/templates/s/landing-page/index.html): Ready-to-use landing page website and app templates. (221 words)
- [Discover popular community-made UI components | 21st](/content/community/components/popular/index.html): Most-loved React components from the 21st.dev Community. Explore what developers use and remix for production. (170 words)
- [New community UI components | 21st](/content/community/components/newest/index.html): The latest React components published to the 21st.dev Community. Explore what's new and start building faster. (187 words)
- [Templates | 21st | 21st](/content/templates/index.html): Ready-to-use website and app templates. (320 words)
- [81+ Click Animation Components for React & Tailwind | 21st](/content/community/components/s/click-animation/index.html): Browse 9 Click Animation components for React, styled with Tailwind CSS and ready for your Next.js project. (235 words)
- [SaaSly | Templates | 21st | 21st](/content/serafimcloud/templates/tailgrids-saasly/index.html): A SaaS marketing template from TailGrids built in React and Tailwind CSS. Provides hero, feature, pricing, and testimonial sections for a software product site., React SaaS website template for SaaS products. Includes features, integrations, pricing, testimonials, FAQs, login, and trial CTAs. Built with Tailwind CSS., Empower your business with SaaSly, a modern SaaS platform that helps teams track performance, manage customers, and make better decisions in one intuitive dashboard. (511 words)
- [Statistics Card 10 | Community Components | 21st](/content/sean0205/components/statistics-card-10/index.html): Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analytics pages. (267 words)
- [Modern Timeline | Community Components | 21st](/content/chowlol202/components/modern-timeline/index.html): A responsive, accessible, and fully themable Timeline / Roadmap component built with ShadCN UI and Tailwind CSS. Supports vertical and horizontal layouts, animated progress, dark/light modes, and rich content like icons, dates, and status badges. Ideal for SaaS roadmaps, onboarding flows, or project timelines. Cleanly structured and highly customizable via props. (712 words)
- [Basic Toast | Community Components | 21st](/content/anubra266/components/basic-toast/toast-updatable/index.html): Here is Toast component (595 words)
- [Scroll media expansion hero | Community Components | 21st](/content/arunachalam/components/scroll-expansion-hero/index.html): A modern, interactive media component for Next.js that expands videos or images as users scroll, creating an engaging and immersive experience.
 (390 words)
- [175+ Hover Animation Components for React & Tailwind | 21st](/content/community/components/s/hover-animation/index.html): Add motion to your UI with 75 React hover animation components, crafted for smooth, modern interactions using Tailwind CSS. (286 words)
- [31+ Comparison Components for React & Tailwind | 21st](/content/community/components/s/comparison/index.html): Easily compare features or pricing with 8 React comparison components, optimized for clarity and crafted using Tailwind CSS. (128 words)
- [Discover community-made UI components | 21st](/content/community/components/index.html): Explore, copy, and remix thousands of high-quality React components published to the 21st Community by designers and developers. (85 words)
- [The Item one | Community Components | 21st](/content/felipemenezes098/components/the-item-one/user-list/index.html): Here is The Item  components (384 words)
- [349+ List Components for React & Tailwind | 21st](/content/community/components/s/list/index.html): Organize content with 25 list React components, styled using Tailwind CSS for clean, readable layouts in your Next.js applications. (138 words)
- [Horizon Hero Section | Community Components | 21st](/content/lovesickfromthe6ix/components/horizon-hero-section/index.html): 3d hero section component with interactive animations, 3d elements, parallax, post processing, scroll animation, and animated sidebar menu (82 words)
- [Icon Picker | Community Components | 21st](/content/sirwhod/components/icon-picker-3/index.html): A Component responsible for making all lucide react icons available for selection and returning the icon name.
 (380 words)
- [Animated Blur Blob background | Community Components | 21st](/content/easemize/components/animated-blur-blob-background/index.html): Animated Blur Blob background (110 words)
- [FAQ Chat Accordion | Community Components | 21st](/content/anshuman008/components/faq-chat-accordion/index.html): FAQ Accordion component is a versatile and interactive UI element designed to display frequently asked questions in a collapsible format. It enhances user experience by allowing users to expand and collapse sections to view answers, making it ideal for FAQs, help sections, and more.

Features
- Collapsible Sections: Users can expand or collapse sections to view or hide answers.
- Animated Transitions: Smooth animations using Framer Motion for opening and closing sections.
- Customizable Icons: Supports custom icons for each question, with flexible positioning.
- Theming Support: Fully integrated with shadcn/ui theming for consistent styling.
- Responsive Design: Adapts to different screen sizes for a seamless experience.
- Accessible: Keyboard navigation and screen reader friendly.
- Customizable Styles: Easily customize question and answer styles with className props.

Example Use Cases
- FAQ Sections: Display frequently asked questions in a compact, user-friendly format.
- Help Centers: Organize help topics and answers for easy navigation.
- Product Details: Provide detailed product information in a structured manner.
- Educational Content: Present educational material in a question-and-answer format. (422 words)
- [Plans & Pricing | 21st | 21st](/content/pricing/index.html): Learn about 21st pricing plans. Explore our products, compare key features, and choose the right plan for your creative workflow. (302 words)
- [Animated Theme Toggle Button | Community Components | 21st](/content/arunachalam/components/animated-theme-toggle-button/index.html): A modern React component that lets users switch between light and dark color modes with a visually engaging animated transition. This button supports both horizontal and vertical reveal animations using the View Transitions API for ultra-smooth theme changes. The icon updates instantly to show the current mode (sun for light, moon for dark), and the UI state is synchronized across the app to reflect user preference. Built with accessibility and performance in mind, the component works seamlessly in any Tailwind CSS + Framer Motion project, and is easy to customize for diagonal or cross-line transitions.

Features:

Animated theme transitions (horizontal, vertical, extendable for more)

Sun & moon icon with Framer Motion effects

Accessible and focus-friendly

Synchronizes with global theme state

Easy to plug into any React/Next.js app

Perfect for clean, user-friendly dark mode toggles in modern web apps. (201 words)
- [Pros & Cons Block | Community Components | 21st](/content/contentbit/components/pros-cons/index.html): A two-column content block that lists the advantages and disadvantages of a single option side by side. (175 words)
- [181+ Button Group Components for React & Tailwind | 21st](/content/community/components/s/button-group/index.html): Organize related actions with 21 button group components for React using Tailwind CSS, making navigation and choices seamless. (88 words)
- [Motion Footer | Community Components | 21st](/content/easemize/components/motion-footer/index.html): A high-fidelity Cinematic Scroll Reveal Footer optimized for modern SaaS and app landing pages. Built with a GSAP ScrollTrigger engine to create a smooth "curtain reveal" parallax effect. It features a built-in, physics-based Magnetic Button primitive for interactive glassmorphism pills with overshoot animations. The visual hierarchy includes a theme-adaptive animated aurora glow, dynamic grid patterns, a diagonal scrolling marquee, and giant masked typography. Fully portable in a single file, React Strict-Mode safe, and natively uses shadcn/ui and Tailwind v4 oklch tokens for automatic light/dark mode compatibility. (199 words)
- [Pricing Section | Community Components | 21st](/content/uilayout-contact/components/pricing-section/index.html): Professional pricing table components featuring subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purchases (189 words)
- [Icon Swap | Community Components | 21st](/content/ncdai/components/icon-swap/index.html): Animate swapping between icons with scale, blur, and fade transitions when the active icon changes. (151 words)
- [Feature Section with hover effects | Community Components | 21st](/content/manuarora700/components/feature-section-with-hover-effects/index.html): Feature Section with hover effects (198 words)
- [Hero 3 | Community Components | 21st](/content/sshahaider/components/hero-3/index.html): Left-aligned hero with dashboard screenshot preview (91 words)
- [Us vs Them Comparison | Community Components | 21st](/content/7ovr/components/comparison-2/index.html): A two-column "Us vs. Them" comparison section with side-by-side cards — one listing product advantages with check rows and a primary CTA, the other listing competitor pain points with cross rows. (211 words)
- [21st MCP — UI Components for AI Coding Agents | 21st](/content/mcp/index.html): Connect Cursor, Claude Code, Windsurf, or any MCP client to the 21st catalog: search 12,000+ React components and install them without leaving your editor. Formerly known as Magic MCP — the @21st-dev/magic package still works. (323 words)
- [Bento | Community Components | 21st](/content/kinfe123/components/bento/index.html): Beautifully designed, fully responsive, expertly crafted Bento section (147 words)
- [Skywash | Community Components | 21st](/content/serafimcloud/components/skywash/index.html): Animated (ripple) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, retro look. A drop-in, zero-dependency React component for hero sections, cards, and retro terminal-style backgrounds. (70 words)
- [Icon Button Actions | Community Components | 21st](/content/felipemenezes098/components/dropdown-10/index.html): Ghost ellipsis icon button that opens a compact dropdown menu of row actions like rename, duplicate, favorite, and a destructive delete. (57 words)
- [AnimatedGitHubButton | Community Components | 21st](/content/ruixen-ui/components/animated-git-hub-button/index.html): This React component renders an animated button that links to an external site (e.g., a GitHub profile) with smooth hover effects. Built using Next.js and Tailwind CSS, the button features a GitHub SVG icon and reveals a tooltip label ("GitHub") when hovered (73 words)
- [21st AI — Generate UI components in variants | 21st](/content/ai/index.html): Describe the UI you need and 21st AI generates production-ready components in multiple variants. Remix the library, refine in chat, copy code and prompt — on the web, in your agent via MCP, or from the CLI. Formerly known as Magic Chat. (161 words)
- [Calendar [React Day Picker] | Community Components | 21st](/content/originui/components/calendar/range-calendar-with-presets/index.html): Calendar [React Day Picker] (4,464 words)
- [Auralis | Community Components | 21st](/content/amanshakya307/components/auralis/index.html): A WebGL animated background with layered simplex noise, glowing light, vignette, and film grain for a dramatic ambient hero effect. (93 words)
- [Ruixen — 392 React Components, Preview & Copy | 21st](/content/ruixen-ui.html): Browse Ruixen's 392 open-source React components on 21st — preview live, copy the TSX, or install via the shadcn CLI. (1,643 words)
- [Footer Taped Design | Community Components | 21st](/content/radu/components/footer-taped-design/index.html): A minimalistic Responsive Footer Navigation with Active and Coming Soon Elements That can Be used now but also be prepped for the future.  (60 words)
- [318+ Features Components for React & Tailwind | 21st](/content/community/components/s/features/index.html): Highlight key offerings using 102 feature components for React, crafted with Tailwind CSS to enhance any Next.js interface. (1,636 words)
- [1780+ Card Components for React & Tailwind | 21st](/content/community/components/s/card/index.html): Find 422 versatile React card components built with Tailwind CSS, perfect for showcasing content elegantly in any Next.js application. (1,650 words)
- [ReUI — 95 React Components, Preview & Copy | 21st](/content/sean0205/library/reui/index.html): Open-source shadcn/ui components, blocks, and animated icons for React, with an MCP server for AI agents. Preview all 95 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP. (932 words)
- [Ruixen UI — 388 React Components, Preview & Copy | 21st](/content/ruixen-ui/library/ruixen-ui/index.html): React marketing UI for shadcn: 240+ landing-page sections and components built with Tailwind CSS. Preview all 388 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP. (1,584 words)
- [663+ Text Components for React & Tailwind | 21st](/content/community/components/s/text/index.html): Enhance readability with 95 text components for React, utilizing Tailwind CSS for beautiful typography in Next.js apps. (1,472 words)
- [1152+ Hero Components for React & Tailwind | 21st](/content/community/components/s/hero/index.html): Level up first impressions with 284 hero components for React and Tailwind CSS, designed to capture attention on your Next.js landing pages. (1,711 words)
- [Introducing 21st membership | 21st | 21st](/content/blog/introducing-21st-membership/index.html): For almost everyone, nothing changes: every signed-in user still gets 2 free component copies every day. Membership is just a way to support 21st if it is useful to you. (535 words, Jun 23, 2026)

## Resources

- [Full Page Index](/index.html): Browse all cached pages with rich metadata
- [About This Cache](/about.html): Methodology, technical details, and usage guidelines
- [XML Sitemap](/sitemap.xml): Machine-readable sitemap for crawler discovery
- [Robots.txt](/robots.txt): Crawler directives