Staaarter

Billing No Card Required Badge

A compact reassurance badge for signup flows and pricing sections, a shield icon plus a short label like 'No credit card required' with room for an optional helper sentence next to it. Built to sit next to a trial or signup button where reducing perceived risk at the point of decision matters.

By Staaarter Team
Billing
Updated June 3, 2026
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-no-card-required-badge.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing78.tsx instead.

Usage

The file also exports billing78Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing78, billing78Demo } from "@/components/blocks/billing/billing78";

export default function Page() {
  return <Billing78 {...billing78Demo} />;
}

Props

PropTypeDefaultDescription
labelstring"No credit card required"Main text shown next to the shield icon.
helperTextstringnoneOptional short note shown after the label, for example what happens when a trial ends.
classNamestringnoneExtra classes for the outer badge container.

Behavior notes

  • The badge is a static inline element with no internal state, animation, or interactivity, it renders exactly what's passed in.
  • helperText is optional and rendered on the same line as label rather than wrapping to its own row, so keep it short to avoid crowding on narrow layouts.
  • The shield icon is fixed to lucide-react's ShieldCheck and is marked aria-hidden, the label text alone carries the meaning for screen readers.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.