PANEL

Container with optional corner-notch clip-path. Composes PanelHeader, PanelContent, and PanelFooter sub-components for consistent internal layout.

PREVIEW

SECTOR STATUS

Panel content goes here.

INSTALLATION

BASH

npx shadcn@latest add @scificn/panel

USAGE

TSX

import { Panel, PanelHeader, PanelTitle, PanelContent, PanelFooter } from '@/ui/panel'

export function StatusPanel() {
  return (
    <Panel notch="md">
      <PanelHeader>
        <PanelTitle>NAVIGATION DATA</PanelTitle>
      </PanelHeader>
      <PanelContent>
        <p>Current sector: ALPHA-7</p>
        <p>ETA: 04:32:11</p>
      </PanelContent>
      <PanelFooter>
        <span>LAST SYNC: 00:00:04</span>
      </PanelFooter>
    </Panel>
  )
}

NOTCH SIZES

NOTCH: NONE

No corner cut.

notch="none"

NOTCH: SM

6px corner cutoff.

notch="sm"

NOTCH: MD

10px corner cutoff.

notch="md"

NOTCH: LG

16px corner cutoff.

notch="lg"

ANATOMY

PanelRoot container. Applies notch clip-path, border, overflow hidden.

PanelHeaderTop section with bottom border. Surface-raised background.

PanelTitleh3 label inside header. Uppercase, small, muted.

PanelContentMain content area with 1rem padding.

PanelFooterBottom section with top border. Surface-raised background.

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
notch	sm \| md \| lg \| none	md	Corner notch size. Uses clip-path polygon to cut the top-left and bottom-right corners.
className	string	—	Additional classes applied to the root element.