Component Library MCP Server

import React from 'react'; import { Panel } from '@your-library/Panel'; import { Button } from '@your-library/Button'; import { Form } from '@your-library/Form'; export const PanelExamples = () => { return ( <div className="space-y-4"> {/* Basic Panel */} <Panel> <p>This is a basic panel with default settings</p> </Panel> {/* Panel with Title */} <Panel title="User Profile"> <Form> <input type="text" placeholder="Name" /> <input type="email" placeholder="Email" /> <Button>Save Profile</Button> </Form> </Panel> {/* Panel with Shadow Variant */} <Panel variant="shadow" title="Featured Content"> <h3>Important Information</h3> <p>This panel stands out with a shadow effect.</p> <Button variant="primary">Learn More</Button> </Panel> {/* Nested Panels */} <Panel title="Dashboard"> <div className="grid grid-cols-2 gap-4"> <Panel variant="bordered" padding="small"> <h4>Statistics</h4> <p>Views: 1,234</p> </Panel> <Panel variant="bordered" padding="small"> <h4>Activity</h4> <p>Last login: Today</p> </Panel> </div> </Panel> </div> ); }; export default PanelExamples;