Understanding React Server Components
A deep dive into React Server Components and how they can improve your application's performance.
Colors & Tokens
Core
Background
--background
--background-foreground
Foreground
--foreground
Primary
--primary
--primary-foreground
Secondary
--secondary
--secondary-foreground
Muted
--muted
--muted-foreground
Accent
--accent
--accent-foreground
Destructive
--destructive
Card
--card
--card-foreground
Popover
--popover
--popover-foreground
Border
--border
Input
--input
Ring
--ring
Brand
Brand Blue
--brand-blue
Brand Green
--brand-green
Status
Warning
--warning
Success
--success
Chart
Chart 1
--chart-1
Chart 2
--chart-2
Chart 3
--chart-3
Chart 4
--chart-4
Chart 5
--chart-5
Sidebar
Sidebar
--sidebar
--sidebar-foreground
Sidebar Primary
--sidebar-primary
--sidebar-primary-foreground
Sidebar Accent
--sidebar-accent
--sidebar-accent-foreground
Sidebar Border
--sidebar-border
Sidebar Ring
--sidebar-ring
Border Radius
sm
rounded-sm
md
rounded-md
lg
rounded-lg
xl
rounded-xl
2xl
rounded-2xl
3xl
rounded-3xl
4xl
rounded-4xl
Spacing Scale
1
2
3
4
6
8
12
16
24
32
Typography
Font Families
Display / Headings
Fira Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
font-display (--font-fira-sans)
Body / UI
System Sans-Serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
font-sans (system default)
Heading Hierarchy
The quick brown fox jumps over the lazy dog
<h1> · text-4xl · font-display font-medium tracking-tight
Heading 1 — text-4xl
The quick brown fox jumps over the lazy dog
<h2> · text-3xl · font-display font-medium tracking-tight
Heading 2 — text-3xl
The quick brown fox jumps over the lazy dog
<h3> · text-2xl · font-display font-medium tracking-tight
Heading 3 — text-2xl
The quick brown fox jumps over the lazy dog
<h4> · text-xl · font-display font-medium tracking-tight
Heading 4 — text-xl
The quick brown fox jumps over the lazy dog
<h5> · text-lg · font-display font-medium tracking-tight
Heading 5 — text-lg
The quick brown fox jumps over the lazy dog
<h6> · text-base · font-display font-medium tracking-tight
Heading 6 — text-base
Font Weights (Fira Sans)
The quick brown fox jumps over the lazy dog
Medium (500) · font-medium
The quick brown fox jumps over the lazy dog
Semibold (600) · font-semibold
The quick brown fox jumps over the lazy dog
Bold (700) · font-bold
Body Text Sizes
InfoQ is a practitioner-driven community news site focused on facilitating the spread of knowledge and innovation in professional software development.
Large (text-lg)
InfoQ is a practitioner-driven community news site focused on facilitating the spread of knowledge and innovation in professional software development.
Base (text-base)
InfoQ is a practitioner-driven community news site focused on facilitating the spread of knowledge and innovation in professional software development.
Small (text-sm)
InfoQ is a practitioner-driven community news site focused on facilitating the spread of knowledge and innovation in professional software development.
Extra Small (text-xs)
Prose (Typography Plugin)
Article Title Example
This is how prose content looks when rendered with the @tailwindcss/typography plugin.
It applies sensible typographic defaults to vanilla HTML content, like links with hover effects and proper spacing.
- First item with brand-green bullets
- Second item in the list
- Third item for good measure
Blockquotes are styled with a left border and muted text color for visual distinction.
Inline code like const x = 42 is styled differently from block code.
Badges
Variants
Default
Secondary
Destructive
Outline
Ghost
Link
Sponsored
Sizes
Small
Medium
Large
Alerts
Default
This is a default alert with a title and description.
Primary
This is a primary alert with a title and description.
Secondary
This is a secondary alert with a title and description.
Info
This is a info alert with a title and description.
Success
This is a success alert with a title and description.
Warning
This is a warning alert with a title and description.
Destructive
This is a destructive alert with a title and description.
Avatars
Sizes
sm
md
lg
Fallback (no image)
Cards
Article Card
Podcast Card
25:30 
Building Microservices with Java
In this podcast episode, we discuss modern microservices architecture patterns in Java applications.
Vertical Card
32:15 
Sponsored Card
Enterprise DevOps Best Practices
Learn how leading enterprises implement DevOps practices to accelerate software delivery.
Sponsored by Google
Simple Cards
Getting Started with Astro
Mar 20, 2024
Deep Dive into TypeScript 5.4
Mar 19, 2024
Architecture Patterns for Modern Apps
Mar 18, 2024
InfoQ Podcast: AI Engineering
Mar 17, 2024
Form Controls
Astro Input
React Components
Dialogs
Popovers
Page Headings
Icons
Standard Icons
user-circle
search
rss-line
radar
presentation
podcast
play-fill
pause-fill
news
menu
key-takeaway
guide
globe
dots-horizontal
close
check-circle
article
arrow-right
arrow-left
arrow-down
save-articles
premium-content
notification
content-video