Patterns & Examples
Common patterns and real-world examples using tezosx-ui components.
Contact Form
A complete contact form with validation-ready structure
Contact Us
Send us a message and we'll get back to you as soon as possible.
<Card className="max-w-2xl">
<CardHeader>
<CardTitle>Contact Us</CardTitle>
<CardDescription>Send us a message...</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="John Doe" />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="john@example.com" />
</div>
<div className="space-y-2">
<Label htmlFor="message">Message</Label>
<Textarea id="message" placeholder="Your message..." rows={5} />
</div>
<Button type="submit" className="w-full">Send Message</Button>
</CardContent>
</Card>Login Form
Simple authentication form pattern
Sign In
Enter your credentials to access your account
<Card className="max-w-md">
<CardHeader>
<CardTitle>Sign In</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" />
</div>
<Button className="w-full">Sign In</Button>
</CardContent>
</Card>Profile Card
User profile display card with badges
John Doe
Software Engineer
john.doe@example.com
Location
San Francisco, CA
<Card className="max-w-md">
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>John Doe</CardTitle>
<CardDescription>Software Engineer</CardDescription>
</div>
<Badge variant="secondary">Active</Badge>
</div>
</CardHeader>
<CardContent className="space-y-4">
{/* Profile details */}
<div className="flex gap-2">
<Button variant="outline" className="flex-1">Message</Button>
<Button variant="primary" className="flex-1">Follow</Button>
</div>
</CardContent>
</Card>Settings Form
Account settings with select dropdowns and checkboxes
Account Settings
Manage your account preferences and settings
<Card>
<CardHeader>
<CardTitle>Account Settings</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<Label htmlFor="country">Country</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Select a country" />
</SelectTrigger>
<SelectContent>
<SelectItem value="us">United States</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center space-x-2">
<Checkbox id="notifications" />
<Label htmlFor="notifications">Email notifications</Label>
</div>
<Button>Save Changes</Button>
</CardContent>
</Card>Button Groups
Common button grouping patterns
{/* Variant group */}
<div className="flex gap-2">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
</div>
{/* Size group */}
<div className="flex gap-2">
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</div>
{/* Action group */}
<div className="flex gap-2">
<Button variant="primary">Save</Button>
<Button variant="outline">Cancel</Button>
<Button variant="destructive">Delete</Button>
</div>Card Grid Layout
Responsive card grid for displaying multiple items
Feature 1
Description of feature one
Feature 2
Description of feature two
Feature 3
Description of feature three
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader>
<CardTitle>Feature 1</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>
<Button variant="outline" className="w-full">Learn More</Button>
</CardContent>
</Card>
{/* More cards... */}
</div>Best Practices
Form Layout
Use consistent spacing between form fields. Group related fields together and use Card components to create visual sections.
Button Placement
Primary actions should use the primary variant. Secondary actions use outline or ghost variants. Destructive actions use the destructive variant.
Responsive Design
Use Tailwind's responsive utilities (sm:, md:, lg:) to adapt layouts for different screen sizes. Card grids work well with responsive columns.
Accessibility
Always pair Labels with Inputs using htmlFor/id attributes. Use semantic HTML and ensure keyboard navigation works correctly.