Skip to content

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

ProBrutalismbrutalistplayful
Preview

Props

The source is part of Pro

$27/month or $179 once. See Pro

No runtime dependencies
"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.

Pairs well with

Pro
Pro
Featured
Pro