How do I create tabs or accordions?
Last checked 31 Aug 2026
Short answer
Ask Lovable to use shadcn/ui's Tabs or Accordion component for the specific content you're organising (e.g. FAQ, pricing feature comparison) — these are standard, accessible components already available in the library.
When to use which
- Tabs: switching between a small number of related views where only one is relevant at a time (e.g. "Monthly / Annual" pricing, "Features / Specs / Reviews").
- Accordion: a list of items where each can expand independently, and multiple can often be open at once — classic use case is an FAQ section.
Prompt examples
Turn the FAQ section into an accordion — one question per item, collapsed by default, expanding to show the answer when clicked. Allow multiple items open at once.
Add tabs to the pricing section to switch between "Monthly" and "Annual" pricing, defaulting to Monthly.
Both are already in Lovable's component library
shadcn/ui, which Lovable uses by default, includes accessible Tabs and Accordion components with keyboard navigation and ARIA attributes built in — you don't need to ask for a custom-built version, just describe the content and behaviour.
Details worth specifying
- Which item is expanded/selected by default (often the first, or none for an accordion).
- Whether an accordion allows one item open at a time or several simultaneously.
- Any URL/deep-linking requirement, e.g. linking directly to a specific FAQ item from an email — mention this explicitly if you need it, since it's not automatic.
What usually goes wrong
- Overriding the default component with heavy custom styling can break its built-in keyboard/screen-reader support — if you need a very different look, ask Lovable to keep the underlying
Accordion/Tabsprimitives and only restyle the visuals. - Long accordion answers with no character limit make the page feel unbalanced when expanded — keep answers reasonably concise.
- Tabs used for content that's actually sequential (a checkout process) rather than parallel — that's better served by steps, not tabs.
Sources
Was this answer helpful?
Related questions
- AnswerHow do I make my Lovable website look less AI-generated?Set a real colour palette, a font pairing and spacing scale up front, then ask Lovable to remove generic gradients, stock-photo hero clichés and default shadcn styling so the site reads as bespoke.
- AnswerHow do I add animations?Ask for specific, subtle animations (fade-in on scroll, hover states, a smooth page transition) rather than "add animations" generally — Lovable can use Tailwind transitions or a library like Framer Motion depending on what you need.
- AnswerHow do I improve accessibility?Ask Lovable to check colour contrast, add alt text to images, ensure keyboard navigation works, and use semantic HTML/ARIA labels — these cover most common accessibility gaps in generated sites without needing a full audit tool.
- AnswerHow do I make a sticky header?Ask Lovable to make the header `fixed` or `sticky` at the top with a defined z-index, and add top padding to the page content equal to the header's height so it isn't hidden underneath.
