# Raised panel (goodtabs UI)

A hero surface with a hairline, a top shine and a large shadow, lit from below on request.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/raised-panel.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/raised-panel`

## Usage

```tsx
import { RaisedPanel } from "@/components/ui/raised-panel"

<RaisedPanel glow padding="none">
  <img src="/screenshot.png" alt="The dashboard" />
</RaisedPanel>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| glow | `boolean` | `false` | Adds a soft light behind the panel, lit from below. |
| padding | `"none" | "sm" | "default" | "lg"` | `"default"` | Inner padding: none, 12px, 20px or 32px. |
| as | `"div" | "section"` | `"div"` | The element rendered for the panel. |

## When to use

- The visual under a hero: a screenshot, a live demo or a terminal
- One raised surface on a page that should sit above the rest
- Around a placeholder while the real visual is being made

## When not to use

- For ordinary cards in a grid, where the shadow and glow would pile up
- Inside dialogs or popovers, which already carry a shadow
- For a browser mockup, use browser-frame

## Notes for agents

- Server component. The glow adds a wrapper div with an absolutely positioned backdrop; className still lands on the panel itself
- The shine is the inset-shadow-highlight utility, so it composes with shadow-lg. A consumer theme needs --highlight and --glow for the shine and glow to show
- The glow spills 48px to the sides and 64px below the panel; give it room or clip it with overflow-hidden on a parent
- padding none is for images and grids that should run edge to edge; the panel clips to its radius

Docs: https://ui.goodtabs.co/components/raised-panel