@blastx/ui
GitHub

Design Patterns

Reusable product compositions built from real `@blastx/ui` primitives rather than static mockups.

Background Patterns

Surface treatments, gradient framing, and hero cards built on top of `Card`.

Frosted Glass Card
Use layered gradients with a translucent card surface.
<Card className="bg-card/85 backdrop-blur-sm shadow-xl shadow-primary/10">
  <CardHeader>
    <CardTitle>Frosted Glass Card</CardTitle>
    <CardDescription>Use layered gradients with a translucent card surface.</CardDescription>
  </CardHeader>
</Card>

Card Header Gradient

A header treatment for dashboards and review panels.

Pair a subtle header gradient with standard `CardContent` spacing for clearer hierarchy.

Card Compositions

Standard cards, highlighted metrics, and CTA containers made from the same primitive.

Standard Card
Use for summaries, forms, and settings groups.
Highlighted Card
Use a ring when one item needs stronger emphasis.
+12.5%
Total Articles
47
Active Authors
12
-3.2%
Avg. Word Count
2,340
Launch a New Workflow
Create your first article with the standard content pipeline.

Status And State Patterns

Semantic badges, progress indicators, and empty states using existing UI primitives.

CompletedIn ProgressNeeds ReviewDraft
Generating content
Use `Progress` for determinate work and a semantic header for context.

Drafting introduction, statistics, and CTA sections.

No articles yet
Create your first article to start using the workflow.

Form Patterns

Inputs, labels, textareas, and selectable cards composed from the shared form primitives.

Sign In Form
Prefix icons can sit above `Input` without replacing the input component.
<div className="relative">
  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
  <Input className="pl-10" placeholder="you@example.com" type="email" />
</div>

<Tabs defaultValue="credentials">
  <TabsList>
    <TabsTrigger value="credentials">Credentials</TabsTrigger>
    <TabsTrigger value="brief">Brief</TabsTrigger>
  </TabsList>
</Tabs>

Button Compositions

CTA buttons, lightweight actions, and chip-style prompts should all use the shared `Button` component.

<Button className="w-full" size="lg">Sign in</Button>

<Button size="sm">
  <Plus className="size-3.5" />
  New Article
</Button>

<Button className="rounded-full" size="sm" variant="outline">
  Write introduction
</Button>

Shadow And Elevation

Use elevation intentionally: lighter for default cards, stronger only for emphasis and overlays.

shadow-xs

Inputs and compact surfaces

shadow-sm

Default cards

shadow-md

Hover states

shadow-lg

Menus and dialogs

shadow-xl shadow-primary/10

Hero surfaces

shadow-lg shadow-primary/20

Decorative accents