Documentation

Panel

Nine-slice window container with default gray and dark translucent variants.

Panel

窗口灰面板（default 变体）

Panel dark

半透明暗底，底色可透出

import { TitleBar } from "../title-bar/index";
import { Panel } from "./index";

/**
 * Panel 预览用例（规格 §5 #1）
*/
export function PanelDemo() {
  return (
    <div className="flex items-start gap-12">
      <Panel className="w-140">
        <TitleBar title="Panel" />
        <p className="font-mc mc-text">窗口灰面板（default 变体）</p>
      </Panel>
      <Panel
        className="w-140 bg-linear-to-br from-[#5b3] to-[#357]"
        variant="dark"
      >
        <TitleBar title="Panel dark" />
        <p className="font-mc mc-text">半透明暗底，底色可透出</p>
      </Panel>
    </div>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/panel

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

import { Panel } from "@tennantite/ui";

CLI copy import

import { Panel } from "@/components/tennantite/panel";

import { TitleBar } from "../title-bar/index";
import { Panel } from "./index";

/**
 * Panel 预览用例（规格 §5 #1）
*/
export function PanelDemo() {
  return (
    <div className="flex items-start gap-12">
      <Panel className="w-140">
        <TitleBar title="Panel" />
        <p className="font-mc mc-text">窗口灰面板（default 变体）</p>
      </Panel>
      <Panel
        className="w-140 bg-linear-to-br from-[#5b3] to-[#357]"
        variant="dark"
      >
        <TitleBar title="Panel dark" />
        <p className="font-mc mc-text">半透明暗底，底色可透出</p>
      </Panel>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
variant	"dark" \| "default"	"default"	`default` window gray / `dark` translucent dark base (spec §5 #1).

Source

packages/ui/src/containers/panel/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.