NewAI SDK Agents

Intro Disclosure

PreviousNext

A multi-step onboarding and feature introduction component with responsive design.

IntroDisclosure Demo

Experience our feature introduction component in both desktop and mobile variants. Click the reset buttons to restart the demos.

(Disclosure)

Desktop View

Status: Active

(Drawer + Swipe)

Mobile View

Status: Active

Features

  • Responsive design: Dialog on desktop, Drawer on mobile
  • Progress tracking with step indicators
  • Rich media support (images and videos)
  • Keyboard navigation support
  • Swipe gestures on mobile
  • "Don't show again" functionality
  • Customizable actions per step
  • Animated transitions between steps

Installation

pnpm dlx shadcn@latest add https://cult-ui.com/r/intro-disclosure.json

Usage

const steps = [
  {
    title: "Welcome",
    short_description: "Quick overview",
    full_description: "Welcome to our platform!",
    media: {
      type: "image",
      src: "/feature-1.png",
      alt: "Welcome screen",
    },
  },
  {
    title: "Features",
    short_description: "Key capabilities",
    full_description: "Discover our main features",
    media: {
      type: "image",
      src: "/feature-2.png",
      alt: "Features overview",
    },
    action: {
      label: "Try Now",
      onClick: () => console.log("Action clicked"),
    },
  },
]
 
export function MyComponent() {
  return (
    <IntroDisclosure
      steps={steps}
      featureId="my-feature"
      onComplete={() => console.log("Completed")}
      onSkip={() => console.log("Skipped")}
    />
  )
}

Examples

Basic Usage

IntroDisclosure Demo

Experience our feature introduction component in both desktop and mobile variants. Click the reset buttons to restart the demos.

(Disclosure)

Desktop View

Status: Active

(Drawer + Swipe)

Mobile View

Status: Active

With Video Content

const videoSteps = [
  {
    title: "Video Tutorial",
    short_description: "Watch how it works",
    full_description: "A detailed video walkthrough of our features",
    media: {
      type: "video",
      src: "/tutorial.mp4",
    },
  },
]

With Custom Actions

const actionSteps = [
  {
    title: "Get Started",
    short_description: "Begin your journey",
    full_description: "Ready to start? Click the button below!",
    action: {
      label: "Start Now",
      onClick: () => startOnboarding(),
    },
  },
]

External Links

const linkSteps = [
  {
    title: "Learn More",
    short_description: "Documentation",
    full_description: "Visit our documentation for detailed guides",
    action: {
      label: "View Docs",
      href: "https://docs.example.com",
    },
  },
]