vibecodng.com

Free MCP betaIndex and tools live

Measured entry

meraki-faq-collapse-with-side-links

faqminimal-flat

A static FAQ section shipped as a standalone HTML document, with a topic list beside an accordion-like question stack that folds below it on narrower screens. It depends on Tailwind utility classes loaded from the CDN. The source includes no JavaScript, state library, or component framework, so the plus and minus controls are visual only.

Specimen
Harness screenshot of meraki-faq-collapse-with-side-links at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of meraki-faq-collapse-with-side-links at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of meraki-faq-collapse-with-side-links at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for meraki-faq-collapse-with-side-links
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal18.1 KB (83.5 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usednone

Verdict

Useful as a layout sketch, not as a finished FAQ component. It builds and mounts cleanly, adapts without horizontal overflow, and has no package dependencies, but the core collapse behavior is absent. Use it only if you are prepared to add interaction, disclosure semantics, real links, edited copy, and stronger text contrast.

Use it if

  • You need a Tailwind starting point for a categorized FAQ page and will wire up the interactions yourself.
  • You want a responsive sidebar-to-stacked layout that can be copied into an existing page.
  • Your product already supports light and dark Tailwind color variants.

Skip it if

  • You need a working disclosure or accordion immediately; the buttons do not open or close answers.
  • You require an accessible production-ready FAQ without remediation; the muted text has a serious contrast issue and disclosure state is not exposed.
  • Your project avoids Tailwind or cannot replace the CDN stylesheet with its own build.
  • You expect the side topics to navigate or filter content; every source link is a placeholder.

Install

Installation record for meraki-faq-collapse-with-side-links
Declared dependenciesnone declared
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, add Tailwind CSS or translate every utility class into your styling system. Move the section markup out of the full HTML document, replace the CDN script with your normal stylesheet pipeline, then add accordion state, keyboard-friendly buttons, ARIA relationships, topic destinations, and corrected contrast. No shadcn provider or component package is required.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/merakiui/merakiui
License
MIT
Record published
2026-08-13

Alternatives

Other published entries for the faq pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.