Welcome to the blog template! This post is a living showcase of every component and typography style available to you.

Typography Showcase#

The template uses Geist Sans for a modern, clean look. Below are the standard typographic elements.

Heading 1#

Heading 2#

Heading 3#

Heading 4#

Heading 5#

Heading 6#

Paragraphs & Inline Styles#

This is a standard paragraph. You can apply bold, italic, or strikethrough styles easily. For technical terms, use inline code which is styled for high legibility.

This is a blockquote. Use it to highlight key quotes or important takeaways from your article. It features a subtle left border and darkened text.

Lists#

Unordered List:

• Performance: Built for speed.
• Design: Professional aesthetics.
• Security: Type-safe code.

Ordered List:

1. Define your content structure.
2. Add MDX components.
3. Deploy to production.

Callouts & Alerts#

Use these components to draw attention to specific types of information.

1
// Example Usage:
2
<Tip>
3
Check out the configuration guide for early optimizations.
4
</Tip>

UI Components (Advanced Layouts)#

These components help you structure complex data without custom CSS.

Feature Grids#

Perfect for landing pages or summary sections.

1
<Features columns={3}>
2
Title
3
Description
4
---
5
Next Title...
6
</Features>

FAQs & Accordions#

Manage questions or collapsible details efficiently.

1
<Faq>
2
Q: Question?
3
A: Answer...
4
---
5
Q: Another Question?
6
A: Another Answer...
7
</Faq>

File Trees#

Visualize your project structure clearly.

1
<Tree>
2
{\`
3
folder/
4
  file.ts
5
  subfolder/
6
    index.js*
7
\`}
8
</Tree>

Step-by-Step Tutorials#

Great for "How-To" guides.

1
<Tutorial>
2
Step: Step Name
3
Detailed description...
4
---
5
Step: Next Step...
6
</Tutorial>

Comparison Views#

Show before/after or vs scenarios.

1
<Compare labels={["Label 1", "Label 2"]}>
2
Left side content (Markdown or Components)
3
---
4
Right side content
5
</Compare>

Multi-Block Tabs#

Organize related content or code variations.

1
npm install @charted-data/toolkit

1
yarn add @charted-data/toolkit

1
pnpm add @charted-data/toolkit

1
<CodeTabs tabs={["Tab 1", "Tab 2"]}>
2
Content for Tab 1
3
---
4
Content for Tab 2
5
</CodeTabs>

Media & Interactivity#

Quick Navigation#

Guide your readers with beautiful link cards.

1
<QuickLinks>
2
Label -> /path-or-url
3
Another Link -> https://external-domain.com
4
</QuickLinks>

Video Embeds#

1
<YouTube id="VIDEO_ID" title="Optional Title" />
2
<Video src="/path/to/video.mp4" />

Enhanced Tables#

Standard markdown tables are automatically enhanced with spacing and borders.

Conclusion#

This template provides all the tools needed for professional, high-quality technical blogging. Every component is designed to work together seamlessly while maintaining a premium aesthetic.

Happy Writing!