Inputs

AI Instructions

Composable React components for shadcn/ui to search, toggle, and create custom AI instructions from a popover command list.

Updated Oct 1, 2026

Configure AI behavior with custom instructions. Click the button below to manage your active instructions.

Active (1):

Be Concise

AI Instructions is a set of composable React components for shadcn/ui built on Popover, Command, and Dialog. Use it in AI chat inputs or agent settings to manage system prompts and rules.

Installation


pnpm dlx shadcn@latest add @cult-ui/ai-instructions

Usage

Use Instructions with instructions, onInstructionsChange, value, and onValueChange. Compose InstructionsTrigger, InstructionsContent (with InstructionsSearch, InstructionsList, InstructionsEmpty, InstructionsGroup, InstructionsItem), InstructionsFooter, InstructionsCreateTrigger, and InstructionsCreateDialog for the full experience.

Basic example


import { useState } from "react";
import {
  Instruction,
  Instructions,
  InstructionsTrigger,
  InstructionsContent,
  InstructionsSearch,
  InstructionsList,
  InstructionsEmpty,
  InstructionsGroup,
  InstructionsItem,
  InstructionsFooter,
  InstructionsCreateTrigger,
  InstructionsCreateDialog,
} from "@/registry/default/ui/ai-instructions";
 
const instructions: Instruction[] = [
  {
    id: "concise",
    title: "Be Concise",
    description: "Keep responses short and to the point",
    content: "Provide brief, focused responses. Get to the point quickly.",
  },
];
 
export default function Example() {
  const [activeIds, setActiveIds] = useState<string[]>(["concise"]);
  const [instructionsState, setInstructionsState] = useState(instructions);
 
  return (
    <Instructions
      instructions={instructionsState}
      onInstructionsChange={setInstructionsState}
      value={activeIds}
      onValueChange={setActiveIds}
    >
      <InstructionsTrigger />
      <InstructionsContent>
        <InstructionsSearch />
        <InstructionsList>
          <InstructionsEmpty />
          <InstructionsGroup heading="Available Instructions">
            {instructionsState.map((instruction) => (
              <InstructionsItem
                key={instruction.id}
                instruction={instruction}
              />
            ))}
          </InstructionsGroup>
        </InstructionsList>
        <InstructionsFooter>
          <InstructionsCreateTrigger />
        </InstructionsFooter>
      </InstructionsContent>
      <InstructionsCreateDialog />
    </Instructions>
  );
}

Features

Toggle active instructions: Control which instructions are active via value and onValueChange
Search: InstructionsSearch filters the list
Custom instructions: Add custom instructions via onInstructionsChange, InstructionsCreateTrigger, and InstructionsCreateDialog
Hover preview: Optional hover card for full instruction content (when using InstructionsItem with content)
Compound API: Instructions, InstructionsTrigger, InstructionsContent, InstructionsSearch, InstructionsList, InstructionsEmpty, InstructionsGroup, InstructionsItem, InstructionsFooter, InstructionsCreateTrigger, InstructionsCreateDialog