# Typewriter

> A component that types out a text, one letter at a time.  As a text, either a string or an array of strings can be passed to the component. The component will automatically split the text into an array of characters, and animate each letter one by one. If you pass an array of strings, the component will animate one text, delete it, then continue animating the next one. The component will loop through the texts if you set the loop prop to true.  The cursor at the end of the text is optional. You can use a character or even a svg node if you like. There is a prop to customize the cursor animation, where you have to define the two motion variants as initial and animate.  Ideally, the component should respect multiple lines. If you experience otherwise, please let me know.:)

- Author: [Daniel Petho](https://21st.dev/@danielpetho)
- Library: [Fancy Components](https://21st.dev/@danielpetho/library/fancy-components)
- License: mit
- Tags: Landing Page, Text, Hero, Text Effect
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@danielpetho/components/typewriter

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/danielpetho/typewriter?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/landing-page.md