Componentform0.64 KB gzipZero dependencies

Sample Data

Demo seed loader with state stamp.

Preview

Live Preview

Demo dataset

Start with sample stubs

Installation

Tokens guide →

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

npx bigbullui add sample-data

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { SampleData } from "@/components/ui/sample-data";

<SampleData />

Usage guidance

Use Sample Data when a ticket stub surface needs Demo seed loader with state stamp. Keep props minimal and prefer composition with sibling stubs.

Avoid Sample Data for long form flows or dense data grids where a dedicated layout block fits better.

Source code

sample-data.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 SampleDataProps extends React.HTMLAttributes<HTMLDivElement> {
  onLoad?: () => void;
  onClear?: () => void;
}

/** Sample data stub: one-click demo seed loader with state stamp. */
export function SampleData({ onLoad, onClear, className, ...props }: SampleDataProps) {
  const [loaded, setLoaded] = React.useState(false);
  return (
    <div className={cn("w-full max-w-sm rounded-lg border border-dashed border-border bg-card p-4 text-center", className)} {...props}>
      <span className="font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground">Demo dataset</span>
      <p className="mt-1 font-mono text-xs text-foreground">{loaded ? "12 demo stubs loaded" : "Start with sample stubs"}</p>
      <button
        type="button"
        onClick={() => { loaded ? (setLoaded(false), onClear?.()) : (setLoaded(true), onLoad?.()); }}
        className={cn("mt-2 w-full rounded-md px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", loaded ? "border border-dashed border-border text-muted-foreground" : "bg-accent text-accent-foreground")}
      >
        {loaded ? "Clear sample data" : "Load sample data"}
      </button>
    </div>
  );
}