Noir Aurora Pricing
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Neo-BrutalMotion
Pricing
Plans as one ruled sheet with the featured plan on the cobalt cell (data-surface="accent": white text, its accent CTA turns volt), and an ink-thumb Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Live, interactive React component · light themeResponsive
About the Neo-Brutal Pricing
Plans as one ruled sheet with the featured plan on the cobalt cell (data-surface="accent": white text, its accent CTA turns volt), and an ink-thumb Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript. Each plan opens with a mono label row (kicker left; badge right, a solid volt Badge on the featured plan and plain meta text on the others), then the name, the note, a big type-figure price with its period, a mono billing line, the CTA (full width: accent on the featured plan, outline on the rest) and ticked features on soft rules. Both prices are in the HTML; the hidden one is display: none and the newly shown one rises in. Footnotes run in a full-width ruled cell. 1–4 plans keep equal heights.
It is part of Neo-Brutal. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
See it on a full page
Soft Bento Pricing
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Swiss Tech Mono Pricing
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has(), the segmented look with the save text as a lime badge), so it works before and without JavaScript.