Getting Started with tent ui: A Modern Component Library

If you have built a React app in the last two years, you have probably pulled in a UI library, a few primitives, and a couple of one-off Framer Motion components — and ended up with a dependency tree you cannot fully reason about. tent ui takes the opposite approach: copy the source into your repo, own it, and ship.

This post is the fastest path from zero to a working component on screen. It covers installation, configuration, and a real example you can paste into any Next.js or Vite project today.

What is tent ui

tent ui is a small, opinionated component library built on top of shadcn/ui, Radix UI primitives, Tailwind CSS v4, and Framer Motion. It is distributed as a shadcn registry, which means you do not install it as an npm package — you run a CLI command and the components land in your project as plain TypeScript files you can edit.

The registry pattern matters because every component becomes part of your codebase the moment you add it. There is no version drift, no breaking changes pushed at midnight, and no risk that a transitive dependency rewrites the styling on a button you have spent two weeks tuning.

What tent ui ships:

• A focused set of base UI primitives (buttons, dialogs, inputs, sidebars) that mirror shadcn/ui defaults
• Specialized components built on top — animated buttons, password inputs with strength meters, world maps, inline edits, file folders
• Tailwind v4 tokens that map directly to your existing design system
• A doc site at ui.srb.codes/docs with live previews and copy-paste source for every component

If you already use shadcn/ui, tent ui slots in beside it — same Tailwind config, same cn() helper, same conventions.

Prerequisites

You need three things:

1. A React project — Next.js 15 or later, Vite + React, Remix, or anything else with React 18+
2. Tailwind CSS v4 — earlier versions will work for most components, but a few rely on v4 features
3. Node.js 20 or later — needed for the shadcn CLI

If you do not have a project yet, scaffold one with the shadcn CLI:

npmpnpmyarnbun
npx shadcn@latest init
Copy

Pick your framework, accept the defaults, and you are ready to add tent ui components.

Installing your first component

Every component on the tent ui doc site has a one-line install command. Let's add the Animated Save Button — a small but satisfying interaction that demonstrates what the library is about.

npmpnpmyarnbun
npx shadcn@latest add https://ui.srb.codes/r/animated-save-button.json
Copy

That single command does four things:

1. Downloads the component source from the tent ui registry
2. Writes it to components/ui/animated-save-button.tsx in your project
3. Adds any missing dependencies (here: motion, lucide-react)
4. Updates your components.json so future components land in the right place

Open the file and you will see plain TypeScript — no node_modules indirection. If you want a different color, a different transition, or a different label, edit it. The component is yours now.

Using the component

Drop it anywhere in your app:

Copyimport { SaveButton } from "@/components/ui/animated-save-button";
 
export default function SettingsForm() {
  async function handleSave() {
    await fetch("/api/settings", { method: "POST" });
  }
 
  return (
    <form>
      <SaveButton onSave={handleSave} />
    </form>
  );
}

The button handles three states automatically: idle, loading, and success. Each state has its own label and animation — characters animate in and out, a spinner fades in during the network call, and a check badge confirms success before the button resets.

If you want different copy, pass a labels prop:

Copy<SaveButton
  onSave={handleSave}
  labels={{ idle: "Subscribe", loading: "Subscribing", success: "Subscribed" }}
/>

That is the whole API. No render props, no compound components, no theme provider to set up.

Theming and tokens

tent ui follows shadcn/ui's CSS-variable convention. Your globals.css already defines tokens like --primary, --muted, --ring, and so on — tent ui components reference those, so they pick up your theme automatically.

If you want to recolor the save button to match a brand palette, change the from-blue-300 to-blue-400 gradient classes in the file. Because the source lives in your repo, you do not need to fight a theme object or a CSS-in-JS API.

For projects that need stricter consistency, define your own tokens in globals.css:

Copy@theme {
  --color-brand-50: oklch(0.97 0.01 250);
  --color-brand-500: oklch(0.6 0.15 250);
  --color-brand-700: oklch(0.4 0.15 250);
}

Then reference them inside the component file. Two small edits, no library configuration to learn.

What to install next

Once the save button is working, here are three components that pair well with it for a complete settings page:

1. Password Input — strength meter and visibility toggle, built on the same Radix primitives. Install with npx shadcn@latest add https://ui.srb.codes/r/password-input.json.
2. Inline Edit — click-to-edit text fields that do not require a modal. Useful for profile names and account settings.
3. Animated View — a layout primitive that animates content swaps when state changes. Pairs well with multi-step forms.

Each one follows the same pattern: one CLI command, one file in your repo, zero runtime configuration.

When tent ui is the right choice

tent ui is small on purpose. It is a good fit when:

• You already use or are about to adopt shadcn/ui and want a few extra polished primitives
• You care about animation quality but do not want to write motion code from scratch
• You want full control of the source — no black-box dependencies in your bundle
• You ship in TypeScript and value strict types

It is not a good fit if you want a 200-component grab bag, a hosted theme builder, or a UI kit that ships pre-styled marketing pages. For those needs, look at Aceternity UI or Magic UI — both excellent libraries that solve different problems.

Where to go from here

The full component catalog lives at ui.srb.codes/docs/components. Every component has a live preview, the install command, and the full source visible inline so you can decide before you copy.

If you have feedback or want to suggest a component, open an issue on GitHub. The library is small enough that requests get a real reply, not a label.

Five minutes from npx shadcn@latest init to a working animated button. That is the bar.