Try It Live
Visitors type their business name, pick an industry, and their site builds itself beside the form.
Features
- A working demo, not a screenshot: the preview follows every keystroke
- Each industry changes type, shape and mood from theme tokens
- The address bar turns the name into a domain
- A real form: labelled input and radio chips for keyboards
- No API: presets make it instant and free to run
Best for: Agencies, site builders and template shops: let visitors see their own result before they talk to you.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The headline. |
| accent | string | - | Optional ending in serif italic. |
| description | string | - | The line under the headline. |
| industries | IndustryLook[] | INDUSTRIES | The looks to pick from: label, headline with {name}, tagline and classes. |
| primaryCta | { label: string; href: string } | - | The blue button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Try It Live interactive section free to use?
Yes. Try It Live is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Try It Live work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Try It Live in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Try It Live need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Try It Live accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.