Accordion pattern for onboarding or setup steps with icons, badges, and QR codes

Accordion pattern for onboarding or setup steps with icons, badges, and QR codes.

Library

ReUI

Framework

React

Type

block

License

MIT

Install

npx shadcn@latest add @reui/c-accordion-11

Files

• registry-reui/bases/radix/components/accordion/c-accordion-11.tsx
• registry-reui/bases/radix/reui/badge.tsx
• registry/bases/radix/ui/accordion.tsx
• registry/bases/radix/ui/button.tsx
• registry/bases/radix/ui/button-group.tsx
• registry/bases/radix/ui/input.tsx
• registry/bases/radix/ui/spinner.tsx
• app/(create)/components/icon-placeholder.tsx

Source

https://github.com/keenthemes/reui

Categories

• Accordion Components
• React Accordion Components
• Tailwind CSS Accordion Components
• Animated Accordion Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• Animated Data Display Components

More from ReUI

• A basic single-expand accordion
• Accordion with rotating arrow indicator
• Accordion with plus/minus indicators
• Accordion with borders and rounded corners
• Accordion embedded within a Card
• Accordion with disabled items and highlighted state
• Advanced accordion with custom icons and badges
• Accordion items integrated within Frame and FramePanel
• Nested accordion example with bordered items
• User list accordion with avatars and role indicators
• Alert
• Autocomplete