# Nested panel frame

https://fieldbook.lizardi.mx/components/nested-panel-frame

Category: Cards
![Still of the Nested panel frame component, a Fieldbook UI component in Cards.](https://fieldbook.lizardi.mx/thumbs/nested-panel-frame.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/nested-panel-frame-9a08521390.mp4 (5 s, silent)

Nested panel frame: A muted outer shell with a compact header and footer strip that holds one or more crisper inset panels, grouping related content with clear depth.

## Frameworks

react, vue, svelte, astro, html

## Preview controls

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

| Name | Type | Default | Options or constraints |
| --- | --- | --- | --- |
| title | text | Storage | Up to 40 characters |
| description | text | 3 of 10 GB used | Up to 60 characters |
| footer | text | Last synced 2 minutes ago | Up to 60 characters |

## Usage notes

Nested panel frame uses the card preview frame with a light/dark theme setting.

### Which frameworks are available for Nested panel frame?

Nested panel frame is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

### What does Nested panel frame depend on?

The React metadata lists these npm dependencies beyond React: clsx.

### What accessibility details are visible in Nested panel frame?

The React source for Nested panel frame includes: The source scan found no explicit native form/navigation elements, ARIA attributes or keyboard handlers in index.tsx. These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

### How does Nested panel frame handle reduced motion?

The source scan found no direct useReducedMotion() or matchMedia preference read in Nested panel frame's index.tsx. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

## Install through MCP

Connect your client, call get_component to retrieve the implementation, then get_install_command for installation instructions. Choose a listed framework, integrate the returned source and verify it in your application.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "nested-panel-frame",
    "framework": "react"
  }
}
```

[For agents](https://fieldbook.lizardi.mx/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Related open components

- [Pointer Spotlight Panel](https://fieldbook.lizardi.mx/components/pointer-spotlight-panel)
- [Bouncing Photo Fan](https://fieldbook.lizardi.mx/components/bouncing-photo-fan)
- [Card Shuffle Stack](https://fieldbook.lizardi.mx/components/card-shuffle-stack)
- [Cursor drift link preview](https://fieldbook.lizardi.mx/components/cursor-drift-link-preview)
- [Deferred post card](https://fieldbook.lizardi.mx/components/deferred-post-card)
- [Invitation review panel](https://fieldbook.lizardi.mx/components/invitation-review-panel)