> ## Documentation Index
> Fetch the complete documentation index at: https://docs.octav.fi/llms.txt
> Use this file to discover all available pages before exploring further.

# Build Custom Widgets

> Create your own custom dashboard widgets for Octav

export const Button = ({href, children, variant = "primary"}) => {
  const styles = {
    primary: {
      backgroundColor: "#3F58C7",
      color: "white",
      textDecoration: "none",
      fontWeight: "600",
      fontSize: "15px",
      lineHeight: "20px",
      borderRadius: "4px"
    },
    secondary: {
      backgroundColor: "#3F58C7",
      color: "white",
      textDecoration: "none",
      fontWeight: "600",
      fontSize: "15px",
      lineHeight: "20px",
      borderRadius: "4px"
    },
    outline: {
      border: "2px solid #3F58C7",
      color: "#3F58C7",
      backgroundColor: "transparent",
      textDecoration: "none",
      fontWeight: "600",
      fontSize: "15px",
      lineHeight: "20px",
      borderRadius: "4px"
    }
  };
  return <a href={href} style={styles[variant]} className="inline-block px-4 py-2 transition-all duration-200" onMouseEnter={e => {
    if (variant === "primary" || variant === "secondary") {
      e.target.style.backgroundColor = "#5366d4";
      e.target.style.transform = "translateY(-1px)";
      e.target.style.boxShadow = "0 4px 12px rgba(63, 88, 199, 0.3)";
    }
    if (variant === "outline") {
      e.target.style.backgroundColor = "#3F58C7";
      e.target.style.color = "white";
      e.target.style.transform = "translateY(-1px)";
      e.target.style.boxShadow = "0 4px 12px rgba(63, 88, 199, 0.3)";
    }
  }} onMouseLeave={e => {
    if (variant === "primary" || variant === "secondary") {
      e.target.style.backgroundColor = "#3F58C7";
      e.target.style.transform = "translateY(0)";
      e.target.style.boxShadow = "none";
    }
    if (variant === "outline") {
      e.target.style.backgroundColor = "transparent";
      e.target.style.color = "#3F58C7";
      e.target.style.transform = "translateY(0)";
      e.target.style.boxShadow = "none";
    }
  }}>
      {children}
    </a>;
};

export const Alert = ({type = "info", title, children}) => {
  const types = {
    info: {
      bg: "bg-[#3F58C7]/10",
      border: "border-[#3F58C7]",
      icon: "ℹ️",
      titleColor: "text-[#3F58C7]"
    },
    success: {
      bg: "bg-[#59CE7E]/10",
      border: "border-[#59CE7E]",
      icon: "✓",
      titleColor: "text-[#59CE7E]"
    },
    warning: {
      bg: "bg-[#F4BD4D]/10",
      border: "border-[#F4BD4D]",
      icon: "⚠️",
      titleColor: "text-[#F4BD4D]"
    },
    error: {
      bg: "bg-[#FF1A45]/10",
      border: "border-[#FF1A45]",
      icon: "✕",
      titleColor: "text-[#FF1A45]"
    },
    tip: {
      bg: "bg-[#6BCCD1]/10",
      border: "border-[#6BCCD1]",
      icon: "💡",
      titleColor: "text-[#6BCCD1]"
    }
  };
  const config = types[type] || types.info;
  return <div className={`${config.bg} ${config.border} border-l-4 rounded-r-lg p-4 my-4`}>
      <div className="flex items-start gap-3">
        <span className="text-xl">{config.icon}</span>
        <div className="flex-1">
          {title && <h4 className={`${config.titleColor} font-semibold mb-1`}>
              {title}
            </h4>}
          <div className="text-sm">{children}</div>
        </div>
      </div>
    </div>;
};

<Alert type="info" title="Coming Soon">
  The Octav Widget SDK is currently in development. Join our early access program to be the first to build custom widgets.
</Alert>

## Overview

The ability to build custom widgets for Octav is coming soon. This will enable you to:

* Build custom visualizations
* Create personalized analytics
* Integrate external data sources
* Share widgets with the community
* Monetize premium widgets

***

## Widget Marketplace

<Info>
  **Coming Soon** — The Widget Marketplace will allow community members to create, share, and monetize custom widgets.
</Info>

<Tabs>
  <Tab title="Community Widgets" icon="users">
    **Browse and Install:**

    * Discover community-created widgets
    * Install third-party widgets with one click
    * Rate and review widgets
    * Report issues or bugs
    * Share your favorites
    * Premium widget options

    <CardGroup cols={2}>
      <Card title="Free Widgets" icon="hand">
        Open-source community contributions
      </Card>

      <Card title="Premium Widgets" icon="star">
        Advanced features from professional developers
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Developer Program" icon="code">
    **Build and Publish Widgets:**

    <Steps>
      <Step title="Access Widget SDK" icon="book">
        Get started with our comprehensive Widget SDK and documentation
      </Step>

      <Step title="Build Your Widget" icon="hammer">
        Create custom widgets using React and our widget framework
      </Step>

      <Step title="Test & Submit" icon="check">
        Test your widget and submit for review
      </Step>

      <Step title="Publish & Earn" icon="dollar-sign">
        Publish to the marketplace and earn from premium widgets
      </Step>
    </Steps>

    <Card title="Start Building" icon="code" href="/docs/build-custom-widgets">
      Learn how to create custom widgets with our SDK
    </Card>
  </Tab>

  <Tab title="Enterprise" icon="building">
    **Custom Widget Development:**

    For teams and organizations needing specialized widgets:

    * Dedicated developer support
    * Custom widget development service
    * White-label widget options
    * Priority feature requests
    * SLA guarantees
    * On-premise deployment options

    <Card title="Contact Sales" icon="envelope" href="/docs/contact-us">
      Discuss custom widget development for your organization
    </Card>
  </Tab>
</Tabs>

***

## Get Notified

<Alert type="info" title="Early Access">
  Join our early access program to be notified when the Widget SDK launches.
</Alert>

<CardGroup cols={2}>
  <Card title="Join Discord" icon="discord" href="https://discord.com/invite/qvcknAa73A">
    Join our #widget-development channel for updates
  </Card>

  <Card title="Contact Us" icon="envelope" href="/docs/contact-us">
    Express interest in custom widget development
  </Card>
</CardGroup>

***

## Learn More

<CardGroup cols={3}>
  <Card title="Widget Explorer" icon="grid-2" href="/docs/widget-explorer">
    Browse available widgets by category
  </Card>

  <Card title="Supported Widgets" icon="check-circle" href="/docs/supported-widgets">
    View all currently supported widgets
  </Card>

  <Card title="Home Dashboard" icon="house" href="/docs/home">
    Learn about the home dashboard
  </Card>
</CardGroup>