PegasPetrolComponents
Sixteen exported components, each shown live with every variant and the states that apply. Filter the list on the left, and flip the theme toggle to check both themes.
Badge
A compact status or category marker. Never interactive — use a Button for actions.
Usage
<Badge variant="success">Paid</Badge>
Card
A surface for grouped content, with header, content and footer slots.
Monthly report
September 2026 · 8,412 sessions
Monthly report
September 2026 · 8,412 sessions
Monthly report
September 2026 · 8,412 sessions
Usage
<Card variant="elevated" padding="md">
<CardHeader>
<CardTitle>Monthly report</CardTitle>
<CardDescription>September 2026</CardDescription>
</CardHeader>
<CardContent>…</CardContent>
</Card>Input
A single-line text field. Always pair it with a Label.
Enter a complete email address.
Sign in
Use your Northwind account.
Usage
<Label htmlFor="email" required>Work email</Label> <Input id="email" type="email" placeholder="ada@northwind.co" />
Textarea
A multi-line text field for notes, descriptions and messages.
Usage
<Textarea placeholder="Add a note for the team…" />
Label
A form label wired to its control, with an optional required marker.
Usage
<Label htmlFor="name" required>Full name</Label>
Checkbox
A binary or tri-state choice within a set. Always labelled.
Usage
<Checkbox id="terms" defaultChecked /> <Label htmlFor="terms">I accept the terms</Label>
Switch
An immediate on/off setting. Use a Checkbox when the change is submitted with a form.
Notifications
Applies to every project you own.
Weekly digest
A Monday summary of activity
Mentions
When a teammate mentions you
Product updates
Occasional release notes
Usage
<Switch id="digest" defaultChecked /> <Label htmlFor="digest">Weekly digest</Label>
RadioGroup
One choice from a small, visible set of options.
$24 per seat, cancel anytime
$19 per seat, billed yearly
Net 30, for teams over 50
Usage
<RadioGroup defaultValue="monthly"> <RadioGroupItem value="monthly" id="monthly" /> </RadioGroup>
Select
One choice from a longer list, collapsed into a trigger.
Usage
<Select>
<SelectTrigger><SelectValue placeholder="Pick a region" /></SelectTrigger>
<SelectContent>
<SelectItem value="eu">Europe (Frankfurt)</SelectItem>
</SelectContent>
</Select>Alert
An inline message about the current context. Five tones, all readable without relying on color alone.
Scheduled maintenance
Frankfurt will be read-only on Sunday 02:00–03:00 UTC.
New in PegasPetrol 0.1
Dark theme parity across every component.
Deployment finished
Build 482 is live for all workspaces.
Trial ends in 3 days
Add a payment method to keep your projects.
Payment failed
We could not charge the card ending 4242.
Usage
<Alert variant="success">
<Check />
<div>
<AlertTitle>Deployment finished</AlertTitle>
<AlertDescription>Build 482 is live.</AlertDescription>
</div>
</Alert>Tabs
Switch between sibling views inside one page region.
Usage
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
</TabsList>
<TabsContent value="overview">…</TabsContent>
</Tabs>Tooltip
A short hint on hover or keyboard focus. Never the only place critical information lives.
Usage
<Tooltip> <TooltipTrigger asChild><Button size="icon"><Plus /></Button></TooltipTrigger> <TooltipContent>New project</TooltipContent> </Tooltip>
Dialog
A focused, modal task. Keep it short and always offer a way out.
Usage
<Dialog> <DialogTrigger asChild><Button>Invite teammate</Button></DialogTrigger> <DialogContent>…</DialogContent> </Dialog>
Avatar
A person or workspace image, with initials as the fallback.
Usage
<Avatar size="md"> <AvatarImage src="/ada.jpg" alt="Ada Lovelace" /> <AvatarFallback>AL</AvatarFallback> </Avatar>
Separator
A hairline that groups related content. Decorative by default.
Billing contact
ada@northwind.co
Usage
<Separator /> <Separator orientation="vertical" />