Bollard UI

Build interfaces your users can't break by accident.

Copy-paste React components that catch costly mistakes while there's still time to fix them.

Explore components
npx shadcn@latest add https://bollard-ui.vercel.app/r/amount-input.json

Needs React 19+ · Tailwind v4 · shadcn. Setup guide

acme.app/checkout
Payment detailsCheck the amount before you send

₹24,000Rupees Twenty-Four Thousand Only

That's 10× the usual ₹2,400. Extra zero?

Built withamount-input
  • Source codeCopied into your app
  • MIT licensedFree for commercial use
  • 340 componentsAcross 9 categories
  • Your themeReact 19 · Tailwind v4

Component lab

Try the guard rails.

Each preview is a real component, loaded with a mistake it is built to catch.

All 340 components

  • Amount Input

    Stops: Extra zero on a transfer

  • Email Input

    Stops: Signup lost to gmial.con typo

  • Phone Input

    Stops: Unreachable phone number saved

  • Password Input

    Stops: Lockout caused by Caps Lock

  • UPI ID Input

    Stops: UPI payment to the wrong VPA

  • Card Expiry Input

    Stops: Payment declined on card expiry

Browse by flow

Start from the screen you're building.

Checkout, sign-up, settings, the danger zone. Every component is filed under the places its mistake happens, so one component can appear in several flows.

How it works

Find it, add it, own it.

Bollard UI works the way shadcn/ui does: you add a component, and it becomes part of your app.

  1. 01

    Find the mistake

    Search by what goes wrong, like “extra zero” or “pasted key”, with ⌘K, or browse by flow.

  2. 02

    Add it with the CLI

    One shadcn command copies the source into your components folder. There is no Bollard UI package to install or update.

  3. 03

    It's your code

    Plain React and Tailwind on your shadcn theme. Restyle it, rename it, reword every message.

Install a component

npx shadcn@latest add https://bollard-ui.vercel.app/r/amount-input.json

Needs React 19+ · Tailwind v4 · shadcn (npx shadcn@latest init once). The CLI writes components/ui/amount-input.tsx and installs the packages it lists. Later changes don't reach your copy automatically: how to update.

rent-field.tsx
import { AmountInput } from "@/components/ui/amount-input"

export function RentField() {
  return (
    <AmountInput
      label="Monthly rent"
      locale="en-IN"
      currency="INR"
      typical={24000} // 2,40,000 asks "Extra zero?"
    />
  )
}

Compared

Why not just validation or a confirm dialog?

They answer different questions. Keep them; Bollard UI covers the gap between “valid” and “what the user meant”.

  • Schema validation

    Zod, native required / pattern

    Answers: Is this value allowed?

    ₹24,000 is a perfectly valid amount. So is alex@gmial.com. Validation passes both.

    Asks whether it is what the user meant: “10× your usual. Extra zero?”

  • A confirm dialog

    “Are you sure?”

    Answers: Did you click on purpose?

    People learn to press OK without reading. The dialog rarely says what will actually happen.

    Reads back the consequence (which 1,204 rows, which account, which environment) before the click counts.

  • Server-side checks

    Authorization, rate limits, constraints

    Answers: Is this request allowed at all?

    Still required, and Bollard UI doesn't replace them. They just answer after the request is sent.

    Catches the honest mistake earlier, while the user can still fix it, with the server as the real backstop.

FAQ

Questions, answered.

Is it free?
Yes. Every component is MIT licensed, free for personal and commercial projects. Keep the license notice and do what you like with the code.
Does it need shadcn/ui?
It needs a shadcn setup, not shadcn's components. The CLI uses your Tailwind v4 theme and copies the code into your app.
How do I add a component?
Run its shadcn CLI command. The source is copied into your project, and any extra dependencies are listed for you.
Does it work with Next.js, Vite and Remix?
Yes. It targets React 19 and Tailwind v4, and components are safe to render on the server.
Can I customise it?
Yes. The copied source belongs to your app: edit its styles, behavior and copy to fit your product.

Put a guard rail where mistakes happen.

Add a component with the shadcn CLI. Its source lands in your repo, MIT licensed and ready for your own changes.

Browse components Get started
npx shadcn@latest add https://bollard-ui.vercel.app/r/type-to-confirm.json

Needs React 19+ · Tailwind v4 · shadcn