Interactive FAQ Accordion Section
Frequently Asked Questions Section
Structured question and answer section with badge pills, chevron indicators, and hairline dividers.
Frequently Asked Questions
Everything you need to know about @shavin/ui design system and Block Builder.
What makes @shavin/ui different from plain Tailwind or Radix?
@shavin/ui combines WCAG 2.1 AAA accessibility primitives with a strict two-tier token system, theme isolation, and an integrated MCP server for zero-hallucination AI coding.
How does theme isolation prevent canvas styles from leaking?
Instead of mutating global document.documentElement CSS variables, CanvasSandboxProvider computes inline CSS property objects applied strictly to div[data-shavin-scope='canvas'].
Can I export the block tree directly as TSX React code?
Yes! Click 'Copy code' in the Block Builder header to copy clean, production-ready TSX with imports, responsive breakpoint classes, and clean layout props.
When to Use & Guidelines
- Answer common user inquiries on marketing landing pages or pricing sections.
- Uses high-contrast hairline borders for clear readability across light & dark themes.
- Expandable question items simplify scanning complex product details.