A growing collection of 20 accordion components built with React and Tailwind CSS.
W/ chevron
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
W/ plus-minus
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
W/ left chevron
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
W/ left plus-minus
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
W/ icon and chevron
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
W/ icon and plus-minus
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
W/ sub-header and chevron
Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.
W/ sub-header and plus-minus
Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.
W/ icon, sub-header, and chevron
Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.
W/ icon, sub-header, and plus-minus
Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.
Tabs w/ chevron
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
Tabs w/ plus-minus
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
Tabs w/ left chevron
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
Tabs w/ left plus-minus
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
Table w/ chevron
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
Table w/ plus-minus
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
Table w/ left chevron
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
Table w/ left plus-minus
Blocks ship as plain React components with mock data. Replace it with your API, CMS, or server actions in minutes—no proprietary data layer to unwind.
Multi-level
Swap the demo arrays with Prisma, REST, or GraphQL data—there's no proprietary layer to unwind.
Multi-level w/ icon
Swap the demo arrays with Prisma, REST, or GraphQL data—there's no proprietary layer to unwind.