Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

No Card Required Badge Billing Block for Svelte

The check behind a no-card trial badge: one trial per company, matched by the domain of a work email, with a new domain, a team that already started one and a free mail address each giving a different, stated result.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Say "no card required" and mean it, with this trial section for Svelte with Ark UI. A compact header states the trial length and the rule. Inside a hairline frame with a plus mark on each corner, an outline Badge reads "No card required" over a work email Input in a Field. As the address is typed, the result band under a rule decides: a new company domain gets the trial, a domain whose team already started one is told when and to ask an admin, and a free mail domain is asked for a work address. The rule is written in one line beside the only Shine Button, which stays unavailable, with the reason in the status text, until a trial is available. For SaaS products that offer a free trial per company.

FAQ

What is the rule, and where do I change it?

One trial per company, matched by email domain. The constants at the top hold TRIAL_DAYS, the TAKEN company whose team already started one, and the FREE_MAIL domains that share a single trial. In production the check is a call to your server, because the list of used domains must not live in the page.

How is the address checked?

A simple shape test (something, an at sign, a domain with a dot) runs as you type, and the message appears under the field once you leave it. Only the server can say whether an address exists or belongs to the person, so treat the shape check as a courtesy, not as verification.

What stays local?

Starting the trial writes "Trial started in this demo, nothing was sent" in the status region and creates nothing. Try halden.example for the team that already has a trial and a free mail address such as gmail.com.

Why is the button inactive instead of disabled?

An unavailable button with a stated reason is more useful than a dead one: it stays in the tab order, and pressing it moves nothing but the status line tells you what is missing. It becomes active only for a new company domain.

What does a screen reader hear?

The field has a visible label and its problem text is attached to it. The result band is the one polite status region, so each result is read as you type and when the answer changes, with its mark hidden from assistive technology and the meaning in words.

How does it look on a phone?

Everything is one column. The result band keeps its height so nothing moves while you type, and the button is pinned at the bottom of the screen with the rule above it.