Component Gallery
A focused set of components for technical writing. Each component follows KISS principles: minimal props, clear purpose, consistent styling.
Callouts
Contextual messages for different purposes. Use sparingly.
Stats
Display metrics prominently with visual hierarchy.
Single Stat
$6MAnnual Cost
$1.8MAlternative
70%Reduction
Stat Grid
45 TBData Volume
$1.2MAnnual Savings
4 moMigration Time
Key Point
Highlight important quotes or thesis statements.
Verdict
Show which approach wins in a comparison.
Simplicity Wins
This approach wins due to simplicity, testability, and ease of maintenance.
Performance Wins
This approach excels here with superior real-time response and lower latency.
Tech Stack
Display technology stacks in a grid format.
Open Source Stack
QueryTrinoDistributed SQL
FormatIcebergTable format
OrchestrationAirflowWorkflow
StreamingKafkaEvent bus
TransformdbtSQL transforms
CatalogDataHubMetadata
Comparison Table
Side-by-side feature comparisons with themed columns.
| Aspect | Option A | Option B |
|---|---|---|
| Latency | Minutes to hours | Milliseconds |
| Complexity | Lower | Higher |
| Cost Model | Per-job | Always-on |
| State | Stateless | Stateful |
Buttons & Badges
Action triggers and inline labels.
DefaultVioletRoseInfo
Cards
Container components for grouped content.
Default Card
Standard card with icon and description.
Violet Card
Violet accent for secondary content.
Rose Card
Rose accent for tertiary content.
Code Block
Syntax-highlighted code with terminal styling.
SQL
SELECT
date_trunc('day', event_time) AS day,
count(DISTINCT user_id) AS dau
FROM events
GROUP BY 1;