Framework Overview Component

The FrameworkOverview component is a reusable landing page component that allows you to create consistent framework-specific landing pages with customizable content.

Usage

import { FrameworkOverview } from "./framework-overview";

export function MyFrameworkOverview() {
  return (
    <FrameworkOverview
      frameworkName="MyFramework"
      frameworkIcon={<MyIcon className="h-16 w-16" />}
      header="Your main headline"
      subheader="Your subheader description"
      bannerVideo="https://example.com/video.mp4"
      guideLink="/guides/myframework"
      initCommand="npx myframework@latest init"
      featuresLink="https://features.example.com"
      supportedFeatures={[...]}
      architectureImage="https://example.com/architecture.png"
      liveDemos={[...]}
      tutorialLink="/tutorials/myframework" // Optional
    />
  );
}

Props

Required Props

• frameworkName (string): The name of the framework (e.g., "LangGraph", "CrewAI")
• frameworkIcon (ReactNode): The icon component for the framework
• header (string): The main headline text
• subheader (string): The descriptive text below the header
• bannerVideo (string): URL to the overview video
• guideLink (string): Link to the framework's guide/quickstart
• initCommand (string): The initialization command to copy
• featuresLink (string): Link to view framework features
• architectureImage (string): URL to the architecture diagram
• liveDemos (LiveDemo[]): Array of live demo configurations

Optional Props

• supportedFeatures (FrameworkFeature[]): Array of features to display (if empty, features section is hidden)
• tutorialLink (string): Link to tutorial (if empty, tutorial card is hidden)

Data Types

FrameworkFeature

interface FrameworkFeature {
  title: string;
  description: string;
  documentationLink: string;
  demoLink: string;
  videoUrl: string;
}

LiveDemo

interface LiveDemo {
  type: "saas" | "canvas";
  title: string;
  description: string;
  iframeUrl: string;
}

Features

• Conditional Rendering: Features section only shows if supportedFeatures array has items
• Dynamic Demo Tabs: Demo toggle buttons only appear if multiple demos are provided
• Flexible Layout: Next steps section automatically adjusts grid layout based on whether tutorial link is provided
• Copy to Clipboard: Init command button includes copy functionality with visual feedback
• Responsive Design: Built with responsive design principles
• Consistent Styling: Maintains consistent visual hierarchy and spacing

Examples

See the following files for complete examples:

• langgraph.tsx - LangGraph framework implementation
• crewai-example.tsx - CrewAI framework implementation example

Customization

The component uses Tailwind CSS classes and follows the existing design system. You can customize:

• Colors by modifying the CSS variables
• Spacing by adjusting the margin/padding classes
• Layout by modifying the grid classes
• Typography by changing the text size and weight classes