Componenteditors0.72 KB gzipZero dependencies

Docs StackBlitz Button

Open stub example live.

Preview

Live Preview

Try button live

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add docs-stackblitz-button

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { DocsStackBlitzButton } from "@/components/ui/docs-stackblitz-button";

<DocsStackBlitzButton />

Usage guidance

Use Docs StackBlitz Button when a ticket stub surface needs Open stub example live. Keep props minimal and prefer composition with sibling stubs.

Avoid Docs StackBlitz Button for long form flows or dense data grids where a dedicated layout block fits better.

Source code

docs-stackblitz-button.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface DocsStackblitzButtonProps extends React.HTMLAttributes<HTMLDivElement> {
  componentName?: string;
  files?: Record<string, string>;
}

/** Docs button opening the stub example in StackBlitz. */
export function DocsStackblitzButton({ componentName = "button", files, className, ...props }: DocsStackblitzButtonProps) {
  const open = () => {
    const code = files?.["App.tsx"] ?? `import { Button } from "./${componentName}";\n\nexport default function App() {\n  return <Button>Admit one</Button>;\n}`;
    const params = new URLSearchParams({ "file": "App.tsx", "code": code });
    window.open(`https://stackblitz.com/fork/react?${params.toString()}`, "_blank", "noopener");
  };
  return (
    <div className={cn("flex items-center gap-2", className)} {...props}>
      <button
        type="button"
        onClick={open}
        className="rounded-md border-2 border-foreground bg-accent px-3 py-1.5 font-mono text-[11px] font-bold uppercase text-accent-foreground shadow-md transition-transform hover:-translate-y-px active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        Open in StackBlitz
      </button>
      <span className="font-mono text-[10px] uppercase text-muted-foreground">Try {componentName} live</span>
    </div>
  );
}