Componenteditors0.68 KB gzipZero dependencies

Snippet Card

Code snippet card with language badge and copy button.

Preview

Live Preview

tsticket.ts

const ticket = true;

Installation

Tokens guide →

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

npx bigbullui add snippet-card

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { SnippetCard } from "@/components/ui/snippet-card";

<SnippetCard />

Usage guidance

Use Snippet Card when a ticket stub surface needs Code snippet card with language badge and copy button. Keep props minimal and prefer composition with sibling stubs.

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

Source code

snippet-card.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";
import { CopyButton } from "./copy-button";

export interface SnippetCardProps extends React.HTMLAttributes<HTMLDivElement> {
  code: string;
  language?: string;
  filename?: string;
}

/** Code snippet card: language badge + copy button + dashed frame. */
export function SnippetCard({ code, language = "ts", filename, className, ...props }: SnippetCardProps) {
  return (
    <div className={cn("group w-full overflow-hidden rounded-lg border border-border bg-card", className)} {...props}>
      <style>{`@keyframes snIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      <div className="flex items-center justify-between border-b border-border bg-secondary/60 px-3 py-1.5">
        <div className="flex items-center gap-2">
          <span className="rounded-full border border-accent/40 bg-accent/10 px-1.5 py-px font-mono text-[9px] uppercase tracking-wider text-accent">{language}</span>
          {filename && <span className="font-mono text-[10px] text-muted-foreground">{filename}</span>}
        </div>
        <CopyButton value={code} />
      </div>
      <pre className="overflow-x-auto p-3 animate-[snIn_0.3s_ease-out_both] motion-reduce:animate-none">
        <code className="font-mono text-xs leading-5 text-foreground">{code}</code>
      </pre>
    </div>
  );
}

Props

Prop	Type	Description
code	string
language	string
filename	string