Prompt to Page
A prompt types itself out and a wireframe page builds itself to match.
Features
- A prompt bar that types its own examples
- Skeleton blocks glide into a new layout for each prompt
- The call to action is the prompt's send button
- Shows the first prompt complete for reduced motion
Best for: AI products, builders and agencies that turn a brief into something real.
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. |
| prompts | string[] | - | What the prompt types, in turn. Each builds a different page. |
| primaryCta | { label: string; href: string } | - | The prompt's send button. |
| secondaryCta | { label: string; href: string } | - | Optional text link under the prompt. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Prompt to Page product showcase section free to use?
Yes. Prompt to Page is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Prompt to Page 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 Prompt to Page in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Prompt to Page need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Prompt to Page 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.