Getting Started
Quick Start
Build your first Frame interface in under 5 minutes.
Build a Card Component
Let's create a simple user card using Frame components.
1
Import Components
import { Card, Avatar, Button, Badge } from '@frame/ui';
2
Create the Component
function UserCard({ user }) {return (<Card className="w-80"><Card.Header className="flex items-center gap-4"><Avatar src={user.avatar} alt={user.name} size="lg" /><div><h3>{user.name}</h3><Badge variant="success">Online</Badge></div></Card.Header><Card.Body><p>{user.bio}</p></Card.Body><Card.Footer><Button variant="primary" fullWidth>View Profile</Button></Card.Footer></Card>);}
3
Preview
JD
Jane Doe
OnlineSenior Developer passionate about building beautiful user interfaces.
Key Concepts
Compound Components
Use Card.Header, Card.Body for flexible composition.
Variants
Use 'variant' prop for different visual styles.
Size Props
Use 'size' prop (sm, md, lg) to control dimensions.
Styling
All components accept className for custom Tailwind styles.