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
$6M Annual Cost
$1.8M Alternative
70% Reduction
Stat Grid
45 TB Data Volume
$1.2M Annual Savings
4 mo Migration 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
Query Trino Distributed SQL
Format Iceberg Table format
Orchestration Airflow Workflow
Streaming Kafka Event bus
Transform dbt SQL transforms
Catalog DataHub Metadata
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.
Default Violet Rose Info
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.
SELECT
date_trunc('day', event_time) AS day,
count(DISTINCT user_id) AS dau
FROM events
GROUP BY 1;