Prompt composer

Dark hero with a ribbon glow and a prompt composer.

Usage

import { HeroPrompt } from '@/components/blocks/hero-section-02'


<HeroPrompt
  description="Describe a screen and get a polished layout in seconds"
  placeholder="What should we build?"
  speeds={['Fast', 'Balanced', 'Thorough']}
  suggestions={['A habit tracker home screen', 'A SaaS pricing page']}
  onSubmit={(prompt, { mode, speed }) => console.log(prompt, mode, speed)}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/hero-section-02

npx shadcn@latest add @pastaui-pro/hero-section-02

yarn dlx shadcn@latest add @pastaui-pro/hero-section-02

bunx --bun shadcn@latest add @pastaui-pro/hero-section-02

Source

Props

Prompt composer props
Prop	Type	Default	Description
title	ReactNode	= Two-line headline	The main heading.
description	string	= Short introduction	Supporting copy below the headline.
modes	HeroPromptMode[]	= Landing / Dashboard	Label and icon pairs for the composer mode toggle.
placeholder	string	= What should we cook up today?	Composer placeholder text.
speeds	string[]	= ['Quick', 'Al dente', 'Slow-cooked']	Options in the speed dropdown; the second is selected by default.
suggestions	string[]	= Three sample prompts	Chips that fill the composer when clicked.
onSubmit	(prompt, { mode, speed }) => void	= —	Called with the trimmed prompt and selected options.
className	string	= —	Additional classes for the section.