Component Library MCP Server

--- name: Panel category: layout description: A flexible container component for grouping content importPath: '@your-library/Panel' status: stable --- # Panel Component The Panel component is a versatile container that provides consistent spacing, borders, and shadows for grouped content. ## Usage ```tsx import { Panel } from '@your-library/Panel'; function MyComponent() { return ( <Panel title="User Information"> <p>Content goes here</p> </Panel> ); } ``` ## Props | Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | title | string | No | - | Optional title for the panel header | | children | ReactNode | Yes | - | Content to display inside the panel | | variant | 'default' \| 'bordered' \| 'shadow' | No | 'default' | Visual style variant | | padding | 'none' \| 'small' \| 'medium' \| 'large' | No | 'medium' | Internal padding size | | className | string | No | - | Additional CSS classes | ## Examples ### Basic Panel ```tsx <Panel> <p>Simple content in a panel</p> </Panel> ``` ### Panel with Title ```tsx <Panel title="Settings"> <form> <input type="checkbox" /> Enable notifications </form> </Panel> ``` ### Shadow Variant ```tsx <Panel variant="shadow" padding="large"> <h2>Featured Content</h2> <p>This panel has a shadow and large padding</p> </Panel> ```