vibecodng.com

Free MCP betaIndex and tools live

Measured entry

neobrutalism-collapsible

accordionbrutalism

A thin client-side React wrapper around Radix UI's collapsible root, trigger, and content primitives. It ships as a shadcn registry TypeScript file, adds data-slot hooks but no built-in styling, and depends on React plus the Radix collapsible package.

Specimen
Harness screenshot of neobrutalism-collapsible at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of neobrutalism-collapsible at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of neobrutalism-collapsible 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 neobrutalism-collapsible
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal22.1 KB (87.5 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A dependable low-level wrapper that built and mounted cleanly, with no detected accessibility violations. Its name promises more style than its source delivers, and the supplied fixed-width demo overflows on a narrow phone. Use it when you want Radix behavior and will own the responsive styling.

Use it if

  • You need a show-and-hide region with controlled or uncontrolled state.
  • Your design system already supplies borders, spacing, focus states, and open-state animation through classes or data attributes.
  • You want Radix behavior behind small, locally owned wrapper components.

Skip it if

  • You need a finished neobrutalist visual treatment out of the box; this wrapper contributes no visual styling.
  • You need nested, mutually coordinated panels; use an accordion primitive instead.
  • You cannot accept an added Radix dependency for a small disclosure interaction.
  • Your layout cannot be adjusted for narrow screens; the supplied demo's fixed width overflows there.

Install

Installation record for neobrutalism-collapsible
Declared dependencies@radix-ui/react-collapsible
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, add React and the Radix collapsible package, copy the wrapper into your source tree, and configure TypeScript if you keep it unchanged. Supply your own CSS or utility setup for layout, focus treatment, responsive widths, and optional state animation.

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/ekmas/neobrutalism-components
License
MIT
Record published
2026-08-14

Alternatives

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