Explorer
KNOW-PAT-194

21st.dev — Catalogue des composants par catégorie

Domaine
web-uiux
Type
pattern
Priorité
P1

Parent : [[INDEX-WEB-UIUX]]

21st.dev — Catalogue des composants par catégorie

Ce catalogue liste les catégories et composants populaires du registry 21st.dev. Pour le workflow d'utilisation, voir KNOW-PAT-191. Pour l'utilisation combinée avec les autres ressources, voir KNOW-PAT-193.

URL racine

Marketing Blocks (20 catégories)

Catégorie Composants Lien
Announcements 10 https://21st.dev/community/components/s/announcement
Backgrounds 33 https://21st.dev/community/components/s/background
Borders 12 https://21st.dev/community/components/s/border
Calls to Action 34 https://21st.dev/community/components/s/call-to-action
Clients 16 https://21st.dev/community/components/s/clients
Comparisons 6 https://21st.dev/community/components/s/comparison
Docks 6 https://21st.dev/community/components/s/dock
Features 36 https://21st.dev/community/components/s/features
Footers 14 https://21st.dev/community/components/s/footer
Heroes 73 https://21st.dev/community/components/s/hero
Hooks 31 https://21st.dev/community/components/s/hook
Images 26 https://21st.dev/community/components/s/image
Maps 2 https://21st.dev/community/components/s/map
Navigation Menus 11 https://21st.dev/community/components/s/navbar-navigation
Pricing Sections 17 https://21st.dev/community/components/s/pricing-section
Scroll Areas 24 https://21st.dev/community/components/s/scroll-area
Shaders 15 https://21st.dev/community/components/s/shader
Testimonials 15 https://21st.dev/community/components/s/testimonials
Texts 58 https://21st.dev/community/components/s/text
Videos 9 https://21st.dev/community/components/s/video

UI Components (40 catégories)

Catégorie Composants Lien
Accordions 40 https://21st.dev/community/components/s/accordion
AI Chats 30 https://21st.dev/community/components/s/ai-chat
Alerts 23 https://21st.dev/community/components/s/alert
Avatars 17 https://21st.dev/community/components/s/avatar
Badges 25 https://21st.dev/community/components/s/badge
Buttons 130 https://21st.dev/community/components/s/button
Calendars 34 https://21st.dev/community/components/s/calendar
Cards 79 https://21st.dev/community/components/s/card
Carousels 16 https://21st.dev/community/components/s/carousel
Checkboxes 19 https://21st.dev/community/components/s/checkbox
Date Pickers 12 https://21st.dev/community/components/s/date-picker
Dialogs / Modals 37 https://21st.dev/community/components/s/modal-dialog
Dropdowns 25 https://21st.dev/community/components/s/dropdown
Empty States 1 https://21st.dev/community/components/s/empty-state
File Trees 2 https://21st.dev/community/components/s/file-tree
File Uploads 7 https://21st.dev/community/components/s/upload-download
Forms 23 https://21st.dev/community/components/s/form
Icons 10 https://21st.dev/community/components/s/icons
Inputs 102 https://21st.dev/community/components/s/input
Links 13 https://21st.dev/community/components/s/link
Menus 18 https://21st.dev/community/components/s/menu
Notifications 5 https://21st.dev/community/components/s/notification
Numbers 18 https://21st.dev/community/components/s/number
Paginations 20 https://21st.dev/community/components/s/pagination
Popovers 23 https://21st.dev/community/components/s/popover
Radio Groups 22 https://21st.dev/community/components/s/radio-group
Selects 62 https://21st.dev/community/components/s/select
Sidebars 10 https://21st.dev/community/components/s/sidebar
Sign Ins 4 https://21st.dev/community/components/s/sign-in
Sign ups 4 https://21st.dev/community/components/s/registration-signup
Sliders 45 https://21st.dev/community/components/s/slider
Spinner Loaders 21 https://21st.dev/community/components/s/spinner-loader
Tables 30 https://21st.dev/community/components/s/table
Tabs 38 https://21st.dev/community/components/s/tabs
Tags 6 https://21st.dev/community/components/s/chip-tag
Text Areas 22 https://21st.dev/community/components/s/textarea
Toasts 2 https://21st.dev/community/components/s/toast
Toggles 12 https://21st.dev/community/components/s/toggle
Tooltips 28 https://21st.dev/community/components/s/tooltip

Composants populaires par section

Newest (récemment publiés)

Popular (les plus utilisés)

Heroes (composants de hero)

  • Spline Scene (serafim)
  • Container Scroll Animation (aceternity)
  • Animated hero (tommyjepsen)
  • Aurora Background (aceternity)
  • Sparkles (aceternity)
  • Background Paths (kokonutd)
  • Shape Landing Hero (kokonutd)
  • Scroll media expansion hero (arunachalam0606)
  • Lamp (aceternity)
  • Gooey Text Morphing (victorwelander)

Features (sections de features)

  • Display Cards (Codehagen)
  • Radial Orbital Timeline (jatin-yadav05)
  • Bento Grid (kokonutd)
  • CPU Architecture (svg-ui)
  • Gallery with image cards (shadcnblockscom)
  • Features 8 (tailark)
  • Sparkles Text (magicui)
  • Feature with Image Comparison (tommyjepsen)
  • Feature 108 (shadcnblockscom)
  • Section With Mockup (erikx)

AI Chat Components

  • AI Voice Input (kokonutd)
  • AI prompt Box (easemize)
  • V0 AI Chat (kokonutd)
  • Animated AI Chat (jatin-yadav05)
  • Agent Plan (isaiahbjork)
  • AI Input With Loading (kokonutd)
  • Chatgpt Prompt Input (easemize)
  • AI Input With Search (kokonutd)
  • AI Gen (aliimam)
  • Animated AI Input (kokonutd)

Calls to Action

  • Sparkles (aceternity)
  • Background Paths (kokonutd)
  • Background Gradient Animation (aceternity)
  • Highlighter (aliimam)
  • V0 AI Chat (kokonutd)
  • Action Search Bar (kokonutd)
  • Background Boxes (aceternity)
  • Pulse Beams (aceternity)
  • Hand Writing Text (kokonutd)
  • Typewriter Effect (aceternity)

Buttons

  • Theme Toggle (ayushmxxn)
  • Sign In Flow (erikx)
  • Liquid Glass Button (aliimam)
  • Liquid Glass (suraj-xd)
  • Magnetize Button (kokonutd)
  • Floating Action Menu (chetanverma16)
  • Button Colorful with Hover Effect (kokonutd)
  • Neon Button (cybergaz)
  • Slide Button (reuno-ui)
  • Hover Button (serafim)

Testimonials

  • Testimonials Columns (efferd)
  • Testimonial Cards (vaib215)
  • Animated Testimonials (bankkroll)
  • Circular Testimonials (Northstrix)
  • Stagger Testimonials (vaib215)
  • Animated Cards Stack (YoucefBnm)
  • 3D Testimonails (reui)
  • Testimonials (ayushmxxn)
  • Avatar (originui)
  • X Gradient Card (kokonutd)

Pricing Sections

  • Pricing (Codehagen)
  • Dark Gradient Pricing (vaib215)
  • Creative Pricing (kokonutd)
  • Pricing Interaction (ln-dev7)
  • Pricing Section with Comparison (tommyjepsen)
  • Single Pricing Card (efferd)
  • Pricing Section (tommyjepsen)
  • Single Pricing Card (bankkroll)
  • Animated Glassy Pricing (easemize)
  • Pricing Card (bankkroll)

Text Components

  • Gooey Text Morphing (victorwelander)
  • Typewriter (danielpetho)
  • Sparkles Text (magicui)
  • Animated Text Cycle (thimows)
  • Link Preview (aceternity)
  • Vapour Text Effect (jatin-yadav05)
  • Gradient Text (aliimam)
  • Reveal images (animata)
  • Hand Writing Text (kokonutd)
  • ParticleTextEffect (Kain0127)

Top auteurs à suivre

Méthode d'utilisation

  1. Identifier la catégorie de composant nécessaire dans ce tableau
  2. Ouvrir le lien de la catégorie
  3. Choisir un composant populaire ou récent
  4. Cliquer sur "Copy code" ou utiliser le MCP 21st.dev pour l'insérer automatiquement
  5. Adapter au design system du projet (KNOW-PAT-144, KNOW-PAT-190, KNOW-PAT-192)
  6. Vérifier les dépendances (shadcn/ui, framer-motion, etc.)
  7. Passer KNOW-PAT-143 avant ship

Anti-patterns

  • ❌ Copier un composant sans vérifier ses dépendances
  • ❌ Ignorer le responsive et le dark mode du composant importé
  • ❌ Mélanger des styles visuels incohérents entre composants
  • ❌ Ne pas adapter les couleurs aux tokens du projet

Références

  • Méthodologie 21st.dev : KNOW-PAT-191
  • Workflow unifié : KNOW-PAT-193
  • Design system UUPM : KNOW-PAT-190, KNOW-PAT-192
  • Godly Corpus : KNOW-PAT-188, KNOW-PAT-189