Wireframe Component Library - Simple, grayscale, structure-focused components
This is a card with a title and some content inside.
You can add your own heading inside the card content.
| Name | Status | |
|---|---|---|
| John Doe | john@example.com | Active |
| Jane Smith | jane@example.com | Pending |
| Bob Johnson | bob@example.com | Active |
This is the Overview tab content.
This is the Details tab content.
This is the Settings tab content.
Get started by creating your first item
Always use the predefined sketch components. They ensure consistency across all wireframes.
<Button variant="primary">Submit</Button> <Input placeholder="Enter email" /> <Card title="Section">...</Card>
Never add custom colors, borders, or decorative CSS. Keep it structural.
// Wrong <button className="bg-purple-600 text-white rounded-lg"> Submit </button> // Correct <Button variant="primary">Submit</Button>
Flexbox, grid, and spacing utilities are allowed for layout.
<div className="flex gap-4 items-center"> <Button>Left</Button> <Button>Right</Button> </div>