Structured Prompt

Inline "mad-lib" fill-in-the-blank card for structured elicitation flows — an eyebrow header, flowing prose with inline slot chips, and a hint footer.

npx visor add structured-prompt

Onliness statement

The primary use case: a brand "onliness" statement where each bracket is an inline fillable slot. Filled slots show a primary-tinted chip; empty slots show a dashed, italic placeholder.

For design-led product teams, Visor is the only component system that derives every surface from one brand record.

Click any slot to edit

Slot states

Slots toggle between filled (confirmed value, primary-soft chip) and empty (awaiting input, dashed border, italic placeholder).

filled value vs empty placeholder

Interactive slots

Pass onClick to make a slot a focusable <button>. Without onClick, it renders as an inline <span> (display-only).

For

design-led product teams

, we are the only…

Installation

npx visor add structured-prompt

This copies two files into your project:

components/ui/structured-prompt/structured-prompt.tsx — the component
components/ui/structured-prompt/structured-prompt.module.css — the styles

Usage

import {
  StructuredPrompt,
  StructuredPromptHeader,
  StructuredPromptBody,
  StructuredPromptSlot,
  StructuredPromptHint,
} from '@/components/ui/structured-prompt/structured-prompt';
import { ListBullets } from '@phosphor-icons/react';

<StructuredPrompt>
  <StructuredPromptHeader icon={<ListBullets size={13} />}>
    ONLINESS · THE SPEARHEAD
  </StructuredPromptHeader>
  <StructuredPromptBody>
    For <StructuredPromptSlot filled>design-led product teams</StructuredPromptSlot>,
    Visor is the only <StructuredPromptSlot filled>component system</StructuredPromptSlot>
    that <StructuredPromptSlot onClick={openEditor}>derives every surface from one brand record</StructuredPromptSlot>.
  </StructuredPromptBody>
  <StructuredPromptHint>Click any slot to edit</StructuredPromptHint>
</StructuredPrompt>

API Reference

StructuredPromptProps

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names to merge onto the root card.

The component also accepts all standard <div> HTML attributes.

StructuredPromptHeaderProps

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Phosphor icon rendered before the eyebrow label.
`className`	`string`	—	Additional CSS class names to merge onto the element.

StructuredPromptSlotProps

Prop	Type	Default	Description
`filled`	`boolean`	`false`	Renders the filled (accent-tinted) chip treatment; otherwise the empty (dashed, muted) treatment.
`onClick`	`() => void`	—	When provided, the slot renders as a <button> with a focus ring; without it, an inline <span>.
`className`	`string`	—	Additional CSS class names to merge onto the element.

Structured Prompt

On this page