Welcome

Buttons 125

About

Workspace Welcome This component provides a welcoming dashboard view for users, featuring a personalized greeting, quick action buttons, and an introductory video card. It's designed to be easily configured via props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Welcome to your project and fits it to your theme.

Code

How Welcome is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { WorkspaceWelcome, type ActionItem } from "@/components/ui/welcome";
import { Scissors, Video, Signal } from "lucide-react";

const WorkspaceWelcomeDemo = () => {
  // Define the action buttons with icons and handlers
  const actions: ActionItem[] = [
    {
      icon: <Scissors className="h-4 w-4 text-purple-500" />,
      label: "Create Project",
      onClick: () => alert("Create Project clicked!"),
    },
    {
      icon: <Video className="h-4 w-4 text-red-500" />,
      label: "Record Video",
      onClick: () => alert("Record Video clicked!"),
    },
    {
      icon: <Signal className="h-4 w-4 text-blue-500" />,
      label: "Go Live",
      isBeta: true,
      onClick: () => alert("Go Live clicked!"),
    },
  ];

  // Handler for the video play action
  const handlePlayVideo = () => {
    // In a real app, you would open a modal or navigate to a video player
    // For this demo, we'll just log to the console
    console.log("Playing video: https://www.youtube.com/watch?v=dQw4w9WgXcQ");
    alert("Play Video clicked! Check the console for the video link.");
  };

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <WorkspaceWelcome
        userName="Ravi Katiyar"
        actions={actions}
        videoThumbnail="https://cdn.21st.dev/assets/mirror/80/807b564e6a3dfa435b6ffb617953d522554723e27b78eaa0ae311392cb957016.jpg" // Example thumbnail
        videoTitle="Welcome to VEED.IO"
        videoDescription="Learn about VEED in less than 2 minutes!"
        onPlayVideo={handlePlayVideo}
      />
    </div>
  );
};

export default WorkspaceWelcomeDemo;