Blog
Tutorials, deep dives, and field notes on building with tent ui, shadcn/ui, Framer Motion, and Tailwind.
- #react#component library#animation
The Best Animated React Component Libraries in 2026 (Ranked by Dev Experience)
A developer-focused comparison of the best animated React component libraries in 2026 — Magic UI, Aceternity UI, Motion Primitives, and tent ui — ranked by animation quality, DX, shadcn compatibility, and bundle impact.
- #react#recharts#tailwind css
Building a Beautiful Interactive Pie Chart in React with Recharts and Tailwind CSS
A practical tutorial for building a production-ready pie chart in React with hover selection, animated pointer, click interactions, and shadcn/ui-compatible styling using Recharts and Tailwind CSS.
- #shadcn ui#react#component library
10 React Components You Can't Find in shadcn/ui (But Wish You Could)
shadcn/ui gives you the primitives. These 10 components fill the gaps — data visualization, animated auth flows, and UI interactions that ship-ready apps actually need.
- #react#otp#framer motion
Building an Animated OTP Input in React: Sliding Ring, Blinking Caret, and Auto-Submit
A step-by-step tutorial for building a polished OTP input in React with per-digit animations, a sliding focus ring, and automatic form submission on fill — using input-otp and Framer Motion.
- #shadcn ui#aceternity ui#react component library
shadcn/ui vs Aceternity UI vs tent ui: Which Animated Component Library is Right for You?
An honest comparison of shadcn/ui, Aceternity UI, and tent ui for developers evaluating animated React component libraries in 2026. Trade-offs, use cases, and when to choose each.
- #shadcn ui#password input#react
Build a Password Input with Strength Meter and Caps Lock Detection in React
A practical guide to adding a zxcvbn strength meter, Caps Lock warning, and show/hide toggle to a shadcn/ui password input. Full code included, install in one command.
- #shadcn ui#framer motion#animation
How to Add Smooth Animations to Any shadcn/ui Component with Framer Motion
A step-by-step tutorial for adding spring animations, entrance effects, and layout transitions to existing shadcn/ui components using Framer Motion — without rewriting your components from scratch.
- #best react component library 2026#shadcn ui alternatives#shadcn ui extensions
Best shadcn/ui Extensions and Component Libraries in 2026
A fair overview of the best shadcn/ui component extensions and adjacent React component libraries in 2026, including Magic UI, Aceternity UI, tent ui, Origin UI, and shadcn/ui Pro.
- #framer motion#shadcn ui#animation
Building Animated UI Components with Framer Motion and shadcn/ui
A practical tutorial for animating shadcn/ui components with Framer Motion — covering layout transitions, AnimatePresence, spring physics, and how to keep interactions accessible.
- #getting started#shadcn ui#react component library
Getting Started with tent ui: A Modern Component Library
A walkthrough of installing tent ui, adding your first component, and shipping a polished UI in under five minutes — without giving up control of your codebase.
- #react component library#shadcn ui components#build vs buy frontend
tent ui vs Building Custom Components: When to Use a Library
A practical guide to the build-vs-buy decision for React UI components. When does building custom components make sense, and when should you reach for a library like tent ui?
- #design systems#shadcn ui#react
Why We Built tent ui: Design Systems Without the Overhead
The story behind tent ui — a small, opinionated component library that prefers copy-paste source over npm packages, and ships only the components we actually use in production.