Panel · ascii-cn

Workspace

v1　Workspace settings

Visible to your team

"use client";
import { Panel } from "@/components/ui/panel";

export function Demo() {
  return (
    <Panel title="Workspace" tone="blue">
      <p>v1　Workspace settings</p>
      <p className="mt-4 text-[#929da7]">Visible to your team</p>
    </Panel>
  );
}

Installation

pnpm dlx shadcn@latest add https://ascii-cn.kdawg.dev/r/panel.json

Usage

import { Panel } from "@/components/ui/panel"

components/ui/panel.tsx

import type { ComponentProps, ReactNode } from "react";
export function Panel({
  title,
  tone = "muted",
  children,
  className = "",
  ...props
}: Omit<ComponentProps<"fieldset">, "title"> & {
  title?: ReactNode;
  tone?: "muted" | "blue" | "yellow";
}) {
  const color = {
    muted: "border-[#64717c]",
    blue: "border-[#79bdff]",
    yellow: "border-[#ffd15b]",
  }[tone];
  return (
    <fieldset
      className={`min-w-0 border bg-black p-6 font-mono text-[#e8e8e5] ${color} ${className}`}
      {...props}
    >
      {title && (
        <legend
          className={`mx-auto px-3 text-sm ${tone === "yellow" ? "text-[#ffd15b]" : tone === "blue" ? "text-[#79bdff]" : "text-[#929da7]"}`}
        >
          {title}
        </legend>
      )}
      {children}
    </fieldset>
  );
}

Styling

Edit the component's Tailwind classes directly. Blue marks interactive controls; yellow highlights attention or a build action. Keep visible text labels alongside color.