# Split Text Demo

> Example usage of Split Text.

A shadcn/ui block from the [@mizzle](https://mizzle.saddy.me/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/mizzle/split-text-demo).

- Page, with a live preview: https://shadcn.exchange/r/mizzle/split-text-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/mizzle/split-text-demo-light-13a86443b0f40c00.png
- Registry item: https://mizzle.saddy.me/r/split-text-demo.json
- Categories: text
- Listed: 2026-10-17, source last changed 2026-10-17

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/mizzle/split-text-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@mizzle/split-text`

## Notes from the registry

Docs: https://mizzle.saddy.me/docs/components/text/split-text

## Files

### `registry/demos/text/split-text-demo.tsx`

```tsx
import { SplitText } from "@/components/mizzle/text/split-text"

export default function SplitTextDemo() {
  return (
    <>
      <SplitText className="max-w-[24ch] text-xl font-medium tracking-[-0.01em] text-balance text-foreground">
        Every character knows its index, its word and its line.
      </SplitText>
      <style>{`
        [data-char] {
          animation: split-demo-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
          animation-delay: calc(var(--i) * 18ms);
          opacity: calc(1 - var(--line) * 0.25);
        }
        @keyframes split-demo-in {
          from { opacity: 0; transform: translateY(0.4em); }
        }
      `}</style>
    </>
  )
}
```