Cards
Nested panel frame
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.
Using Nested panel frame
Nested panel frame uses the card preview frame with a light/dark theme setting.
Customize the preview
These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.
| Control | Type | Default | Preview limits |
|---|---|---|---|
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 |
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.
