Sticker Pricing Section
Neo-brutalist pricing where each price is a label stuck on its card at a tilt. A monthly or yearly switch changes every price in one frame; the featured plan sits higher on a deeper shadow.
DOM + CSS0 deps1 file · 15 KB TSX
Props
"use client";
import { useId, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* StickerPricingSection — neo-brutalist pricing where every price is a
* sticker slapped on its card.
*
* Three plans in 3px ink on hard shadows (5px; the featured plan sits
* higher on 8px, in the accent, with a "Most popular" sticker over its
* corner). Each price is a tilted white label with its own 3px shadow, as
* if stuck on by hand. The billing switch is a pair of real radio buttons
* drawn as one bordered bar: the chosen side is a hard ink box, and the
* prices change in the same frame, with no count-up and no slide; choosing
* yearly also stamps a starburst with the saving onto the switch.
*
* Every figure lives in one content object (PRICING_DEMO is a placeholder:
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Pricing that looks handled. Three plans sit on hard shadows in 3px ink, and each price is a white label stuck on at a slight tilt, on its own small shadow, as if someone slapped it on with a thumb. The featured plan is raised a step, filled with the accent, set on a deeper shadow and tagged with a Most popular sticker over its corner. The billing switch is a pair of real radio buttons drawn as one bordered bar: the chosen side becomes a hard ink box and every price changes in the same frame, with no count-up and no slide, and choosing yearly stamps a starburst with the saving onto the switch. Features run down each card with square bullets, each plan ends in a press button that lands on its shadow, and a note and a compare link close the section. Every price, limit and plan name lives in PRICING_DEMO, marked as placeholder for the kit's fictional Hod.
Curator’s note
Part of the Brutalism kit, drop 3: the kit's proof and pricing section. Pro: a full-width section composing a stateful billing switch, three plans and a placeholder-marked content object.


