HomeDocsComponentsBlocksForm contractValidation
Getting started / Installation

Installation

Same model as shadcn/ui: the component source is copied into your repo, where you can read it and change it. One small package stays a dependency.

Why it is a hybrid

The component file lands in components/ui/ and is yours. The caret, mask and validity engine stays in @inputcn/core as a real dependency, because eleven copied components should not carry eleven copies of the same caret-tracking code, and a bug fix in it should reach you through npm update rather than eleven re-copies.

Add a component

# one component
npx shadcn@latest add https://input-cn.vercel.app/r/phone-input.json

# the base layer, if you want it explicitly
npx shadcn@latest add https://input-cn.vercel.app/r/inputcn-base.json

The registry is built from source by pnpm registry, so a component and its registry entry cannot disagree.

Import the stylesheet once

// app/layout.tsx
import "@inputcn/core/styles.css"

No configuration

There is no config file, no provider to mount and no Tailwind plugin. The stylesheet reads the shadcn CSS variables your app already defines — --primary, --ring, --border, --radius — so the components match your theme the moment they render.

The registry is served from https://input-cn.vercel.app/r/, and every package is on npm under the @inputcn scope.