Question 1

What are shadcn React text components?

Accepted Answer

shadcn React text components are 100 copy-paste animated text primitives for React and Next.js — typewriter, gradient, glitch, shuffle, scramble, counting numbers, flip words, blur entrance, liquid-blob, LCD-flicker, paper-fold, and many more. Each component is a single self-contained TSX file that drops into your components folder. Built on Motion (Framer Motion's successor) and Tailwind CSS.

Question 2

Are shadcn text components free?

Accepted Answer

10 of the 100 are completely free for personal and commercial projects — blur-text, flip-words, gradient-text, counting-number, rotating-text, text-generate-effect, shimmering-text, highlight-text, sliding-number, and splitting-text. The other 90 are part of the shadcn.io Pro subscription, which also unlocks 6,000+ blocks, 100 backgrounds, 57 shaders, and 40 buttons.

Question 3

Which one should I use for a hero headline?

Accepted Answer

For a tasteful entrance: blur-text or text-generate-effect (typewriter). For more emphasis: gradient-text or highlight-text. For interactive flair: text-pressure (Pro) or text-hover-effect (Pro). Combine splitting-text with motion to roll your own — every component is a single TSX file you can fork.

Question 4

Can I use these in a marketing landing page?

Accepted Answer

Yes — the free 10 cover the most common landing-page needs: hero entrance (blur-text), word swap in headlines (flip-words / rotating-text), animated stats (counting-number / sliding-number), accent emphasis (gradient-text / highlight-text). Pair with shadcn.io blocks for an entire page in an hour.

Question 5

How do I install a shadcn text component?

Accepted Answer

Open the component's docs page (for example shadcn.io/text/blur-text) and copy the one-line `npx shadcn@latest add` command. The shadcn CLI writes the component into `components/text/` (or wherever your components.json points), pulls in `motion` as a peer dependency, and includes the `cn()` helper. Import, drop it in your page, ship it.

Question 6

Do I need Framer Motion?

Accepted Answer

We use `motion/react` (Motion — the open-source rebrand of Framer Motion's core). It's a smaller, faster, MIT-licensed alternative. The shadcn CLI installs it automatically. If you're already on `framer-motion`, the API is mostly compatible — but we recommend migrating to `motion` for performance.

Question 7

Can I customise colors and typography?

Accepted Answer

Yes. Every component reads shadcn/ui CSS tokens (`--primary`, `--muted`, `--foreground`) so it flips automatically when your app toggles `.dark`. Typography inherits from the parent — pass any Tailwind text-size class via `className` and the effect adapts. Per-component overrides like `gradient` colors are exposed as props.

Question 8

Will animations respect `prefers-reduced-motion`?

Accepted Answer

Yes — components built on Motion respect the user's reduced-motion preference by default. Continuous loops slow or freeze, entrance animations skip to their final state. You can override this per-component if your design depends on the motion (rare; we recommend you don't).

Question 9

Which React and Next.js versions are supported?

Accepted Answer

React 19+ and Next.js 16+ are the baseline, with full App Router support. Every shadcn text component is marked "use client" because animations need the browser. They also work with Vite + React, Remix, Astro islands, and React 18 apps — no React-19-specific hooks are used.

Question 10

Tailwind v3 or v4?

Accepted Answer

Both. Utility class names are identical across Tailwind v3 and v4. Components that read shadcn/ui CSS variables inherit them the same way in either major version.

Question 11

What extra dependencies do these pull in?

Accepted Answer

Minimal. Most components need `motion/react` (animation runtime) and `clsx + tailwind-merge` (already shipped with shadcn/ui). A handful that use variable-font axes (`text-pressure`, `variable-proximity`) load a Google variable font over the network. No icon libraries, no chart libraries, no extra rendering deps.

Question 12

Can I contribute a new text component?

Accepted Answer

Yes. shadcn.io is open-source on GitHub. Open a PR with a new TSX file under `packages/text/` following the existing JSDoc pattern: `@title / @description / @opening / @related / @questions`, a named export for the component, and a default `{Name}Demo()` wrapper for the gallery preview. The docs MDX, gallery card, and OG screenshot regenerate automatically via the build scripts.

React Animated Text Components.

Every text effect, grouped by family

Every text effect. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions