FAQs With Dashed Lines
Questions are organized into titled sections (Pricing, Agents, Legal in the demo). Each section displays its title followed by a stack of clickable FAQ items.
Clicking a question expands it with a smooth height animation. The plus icon rotates 45 degrees to form an X when active. Only one question can be open at a time across all sections.
Active items get a subtle background change with a shadow and ring border. Four dashed grid lines appear at the edges of the active card, extending slightly beyond the card boundaries with fade effects at the ends. The lines use CSS custom properties for easy color customization.
Clicking outside the FAQ container collapses any open question. The component handles dark mode with appropriate color adjustments for backgrounds, text, and the dashed line colors.
Explore more
Part of Frequently asked questions · All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



