Complete Component Reference & Showcase

All 30+ components in one place - complete documentation with live examples, detailed props, usage patterns, and best practices.

30+ Components Fully Documented Live Examples

How to Use This Guide

Each component section includes:

• Live Example - See it in action
• Props - Complete parameter reference
• Usage Code - Copy-paste examples
• Best Practices - When and how to use it

---

Table of Contents

1. Content Display Components (8 components)
2. API Documentation Components (6 components)
3. Visual & Layout Components (8 components)
4. Navigation Components (5 components)
5. Content Enhancement Components (4 components)
6. Data Display Components (2 components)
7. Typography & UI Components (4 components)
8. Feedback & Metadata Components (3 components)

---

Content Display Components

CodeShowcase

Displays tabbed code examples with syntax highlighting, perfect for showing the same implementation in multiple languages.

Content Display

Live Example

const response = await fetch('/api/auth', {
headers: {
  'Authorization': 'Bearer ' + token
}
});

Props

Prop	Type	Required	Description
title	string	No	Optional title for the code showcase
description	string	No	Optional description
examples	Array	Yes	Array of example objects

Example Object Structure:

{
  label: 'JavaScript',      // Tab label
  language: 'javascript',   // Syntax highlighting language
  description: 'Optional',  // Optional description
  code: 'console.log();'    // Code content
}

Usage

<CodeShowcase
  title="API Request Examples"
  examples={[
    {
      label: 'JavaScript',
      language: 'javascript',
      code: `console.log("Hello");`
    },
    {
      label: 'Python',
      language: 'python',
      code: `print("Hello")`
    }
  ]}
/>

Best Practices

• Provide examples in most commonly used languages (JavaScript, Python, cURL)
• Keep code examples concise and focused on the specific feature
• Include explanatory descriptions when needed
• Test all code examples before publishing
• Use consistent formatting across all tabs

When to Use

• Multi-language API documentation
• Tutorial code examples
• SDK usage demonstrations
• Comparing different approaches

---

ExpandableCode

Collapsible code blocks for long code snippets with automatic expansion controls.

Content Display

Live Example

Full Implementation Example

function complexFunction() {
// Line 1
console.log('First line');
// Line 2
console.log('Second line');
// Line 3
console.log('Third line');
// Line 4
console.log('Fourth line');
// Line 5
console.log('Fifth line');
// Line 6 - Hidden until expanded
console.log('Sixth line');
// Line 7
console.log('Seventh line');
// Line 8
console.log('Eighth line');
}

Props

Prop	Type	Default	Description
language	string	'javascript'	Code language for syntax highlighting
maxLines	number	10	Lines visible before collapse
title	string	undefined	Optional code block title
children	ReactNode	Required	Code content

Usage

<ExpandableCode language="typescript" maxLines={15} title="Full Implementation">
{`
function yourCode() {
  // Your code here...
}
`}
</ExpandableCode>

Best Practices

• Use for code longer than 20 lines
• Set appropriate maxLines based on context (10-15 typically)
• Include title to describe what code does
• Use for complete implementations or long examples

When to Use

• Long code examples
• Complete file contents
• Detailed implementations
• When you want to show full code but save space

---

TerminalCommand

Styled terminal/shell command display with copy functionality.

Content Display

Live Example

Terminal

$npm install @myapp/sdk

Terminal

#sudo systemctl start nginx

Props

Prop	Type	Default	Description
command	string	Required	Command to display
copyable	boolean	true	Show copy button
prompt	string	'$'	Command prompt symbol
language	string	'bash'	Syntax highlighting language

Usage

<TerminalCommand command="npm install package-name" />
<TerminalCommand command="sudo apt update" prompt="#" />
<TerminalCommand 
  command="docker run -p 8080:80 nginx" 
  copyable={true}
/>

Best Practices

• Use $ prompt for user-level commands
• Use # prompt for root/admin commands
• Keep commands on single line when possible
• Enable copyable for commands users will run

When to Use

• Installation instructions
• CLI commands
• Shell scripts
• Docker commands
• Package manager commands

---

Accordion

Collapsible sections perfect for FAQs, detailed explanations, or any content that benefits from progressive disclosure.

Content Enhancement

Live Example

Compose is a revolutionary smart contract library that helps developers create sophisticated smart contract systems using the ERC-2535 Diamond standard.

Compose uses a shared storage architecture where both standard facets and your custom facets access the same data. This enables seamless integration without inheritance conflicts.

Yes! Compose is thoroughly tested and used in production systems. However, smart contracts should always be audited before deployment.

Props

Prop	Type	Default	Description
title	string	Required	Accordion header text
defaultOpen	boolean	false	Whether accordion starts expanded
variant	string	'default'	Style variant ('default', 'bordered')
children	ReactNode	Required	Content to display when expanded

Usage

<Accordion title="FAQ Question" defaultOpen>
  Your answer content here. Can include any MDX content.
</Accordion>

<AccordionGroup>
  <Accordion title="Question 1">Answer 1</Accordion>
  <Accordion title="Question 2">Answer 2</Accordion>
  <Accordion title="Question 3">Answer 3</Accordion>
</AccordionGroup>

Best Practices

• Keep titles concise and descriptive
• Use AccordionGroup for related FAQs
• Consider defaultOpen for most important information
• Use question format for FAQ titles

When to Use

• FAQ sections
• Collapsible details
• Progressive disclosure of information
• Step-by-step instructions with expandable sections
• Technical specifications

---

Tooltip

Contextual information on hover.

Content Enhancement

Live Example

Hover over this highlighted text to see the tooltip in action. You can also hover over this text for a bottom tooltip.

Props

Prop	Type	Default	Description
content	string	Required	Tooltip text
position	string	'top'	Position ('top', 'bottom', 'left', 'right')
children	ReactNode	Required	Trigger element

Usage

<Tooltip content="Additional information" position="top">
  Hover me
</Tooltip>

<Tooltip content="Technical term explanation">
  <Badge>Term</Badge>
</Tooltip>

Best Practices

• Keep tooltip text concise (under 2 sentences)
• Use for additional context, not essential information
• Ensure tooltips are accessible with keyboard navigation
• Don't nest interactive elements inside tooltips

When to Use

• Defining technical terms
• Providing additional context
• Explaining abbreviations
• Offering hints or tips

---

API Documentation Components

ApiEndpoint

Display REST API endpoints with HTTP method badges and parameters.

API Documentation

Live Example

GET/api/v1/users/{id}

Retrieve a specific user by ID

Query Parameters:

• idrequired - User identifier
• include - Relations to include (comma-separated)

POST/api/v1/users

Create a new user account

Query Parameters:

• namerequired - User's full name
• emailrequired - User's email address

Props

Prop	Type	Required	Description
method	string	Yes	HTTP method (GET, POST, PUT, DELETE, PATCH)
path	string	Yes	API endpoint path
description	string	No	Optional description
params	Array	No	Query parameters

Parameter Object:

{
  name: 'parameter_name',
  required: true,
  description: 'What this parameter does'
}

Usage

<ApiEndpoint
  method="GET"
  path="/api/v1/users/:id"
  description="Retrieve user information"
  params={[
    { name: 'include', required: false, description: 'Related resources' }
  ]}
/>

Best Practices

• Use correct HTTP method colors (automatically handled)
• Include clear, concise descriptions
• List all relevant parameters with required status
• Use path parameter syntax consistently

When to Use

• REST API documentation
• Endpoint references
• API guides and tutorials

---

PropertyTable

Documentation table for API object properties.

API Documentation

Live Example

User Object Properties

Property	Type	Required	Description
id	string	Yes	Unique identifier for the user
name	string	Yes	User's full name
email	string	No	User's email address Default: null Example: user@example.com
created_at	timestamp	Yes	Account creation timestamp

Props

Prop	Type	Default	Description
properties	Array	Required	Array of property objects
showRequired	boolean	true	Show required column
showTypes	boolean	true	Show type column
title	string	undefined	Optional table title

Property Object:

{
  name: 'propertyName',
  type: 'string',
  required: true,
  description: 'What this property is',
  default: 'defaultValue',  // optional
  example: 'exampleValue'   // optional
}

Usage

<PropertyTable
  title="Response Object"
  properties={[
    {
      name: 'id',
      type: 'string',
      required: true,
      description: 'Unique identifier'
    }
  ]}
/>

Best Practices

• Always include type information
• Mark required fields accurately
• Provide examples for complex types
• Include default values when applicable

When to Use

• API response documentation
• Object property documentation
• Configuration options
• Schema documentation

---

ParameterTable

Similar to PropertyTable but optimized for function/API parameters.

API Documentation

Live Example

Function Parameters

Parameter	Type	Required	Description
userId	string	Yes	The ID of the user to retrieve
options	object	No	Optional configuration object Default: {}
includeMetadata	boolean	No	Whether to include user metadata Default: false

Props

Same as PropertyTable - optimized for parameter documentation.

Usage

<ParameterTable
  title="Request Parameters"
  parameters={[
    {
      name: 'data',
      type: 'object',
      required: true,
      description: 'Data to process'
    }
  ]}
/>

When to Use

• Function parameter documentation
• API request parameters
• Method signatures
• Configuration parameters

---

SchemaViewer

Interactive JSON schema visualization with expandable nested properties.

API Documentation

Live Example

{

"user":

{

"id":

"usr_12345"

"name":

"John Doe"

"email":

"john@example.com"

"profile":

{

"avatar":

"https://example.com/avatar.jpg"

"bio":

"Software developer"

"location":

"San Francisco"

"verified":

true

}

"preferences":

{

"theme":

"dark"

"notifications":

{

"email":

true

"push":

false

"sms":

false

}

}

"created_at":

"2024-01-15T10:30:00Z"

}

}

Props

Prop	Type	Default	Description
schema	Object	Required	JSON schema object
collapsed	boolean	false	Start collapsed
depth	number	0	Initial nesting depth

Usage

<SchemaViewer
  schema={{
    user: {
      id: '12345',
      name: 'John Doe',
      profile: {
        email: 'john@example.com'
      }
    }
  }}
/>

Best Practices

• Use realistic example data
• Keep nesting reasonable (3-4 levels max)
• Include common use case scenarios
• Use descriptive property names

When to Use

• JSON API responses
• Configuration file examples
• Nested object documentation
• Complex data structure visualization

---

APIReference

Complete API reference section with parameters and response tabs.

API Documentation

Live Example

POST/api/v1/transactions

Create a new financial transaction

amountnumberrequired

Transaction amount in cents

currencystringrequired

Three-letter currency code (e.g., USD)

descriptionstring

Transaction description

Props

Prop	Type	Required	Description
method	string	Yes	HTTP method
endpoint	string	Yes	API endpoint
description	string	No	Endpoint description
parameters	Array	No	Parameters
response	Object	No	Example response

Usage

<APIReference
  method="GET"
  endpoint="/api/v1/users"
  description="List all users"
  parameters={[
    { name: 'page', type: 'number', required: false }
  ]}
  response={{
    users: [],
    total: 0
  }}
/>

When to Use

• Complete API documentation
• When you need both parameters and response
• Detailed endpoint documentation

---

StepIndicator

Multi-step process visualization with completion states.

Navigation

Live Example

Install SDK

Install the package via npm or yarn

2

Configure

Set up your API keys and configuration

3

Test Integration

Verify your setup with a test request

4

Deploy

Deploy to production

Props

Prop	Type	Default	Description
steps	Array	Required	Array of step objects
currentStep	number	0	Current active step (0-based)
orientation	string	'vertical'	Layout ('vertical', 'horizontal')

Step Object:

{
  title: 'Step Title',
  description: 'Step description',
  status: 'completed' | 'active' | 'pending'  // optional
}

Usage

<StepIndicator
  currentStep={1}
  orientation="vertical"
  steps={[
    { title: 'Create Account', description: 'Sign up' },
    { title: 'Get API Key', description: 'Generate credentials' },
    { title: 'Make First Call', description: 'Test integration' }
  ]}
/>

Best Practices

• Use clear, action-oriented step titles
• Keep descriptions brief (one sentence)
• Update currentStep as user progresses
• Use vertical orientation for detailed steps

When to Use

• Installation guides
• Multi-step tutorials
• Setup workflows
• Process documentation
• Onboarding flows

---

Visual & Layout Components

DocHero

Hero section for documentation pages with gradient backgrounds.

Layout

Live Example

API Documentation

Build powerful integrations with our comprehensive REST API

Get Started

Props

Prop	Type	Default	Description
title	string	undefined	Hero title
subtitle	string	undefined	Hero subtitle
backgroundImage	string	undefined	Background image URL
variant	string	'gradient'	Style ('default', 'gradient', 'dark', 'image')
height	string	'medium'	Height ('small', 'medium', 'large', 'full')
children	ReactNode	undefined	Additional content

Usage

<DocHero
  title="Welcome"
  subtitle="Get started with our platform"
  variant="gradient"
  height="large"
>
  <div style={{ marginTop: '2rem' }}>
    <GradientButton to="/docs" size="large">
      Get Started
    </GradientButton>
  </div>
</DocHero>

{/* Or with multiple buttons */}
<DocHero
  title="Get Started"
  subtitle="Choose your path"
  variant="gradient"
>
  <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', marginTop: '2rem', flexWrap: 'wrap' }}>
    <GradientButton to="/docs/quickstart" size="large">
      Quick Start
    </GradientButton>
    <GradientButton variant="outline" size="large">
      View Examples
    </GradientButton>
  </div>
</DocHero>

Best Practices

• Keep titles concise and impactful
• Use subtitle for additional context
• Include clear call-to-action buttons with proper spacing
• Wrap buttons in a div with marginTop for proper spacing
• Choose appropriate height for content
• Use size="large" for hero buttons to make them prominent

When to Use

• Documentation landing pages
• Section introductions
• Feature showcase pages
• Getting started pages

---

DocCard

Navigation cards for linking to documentation pages.

Layout

Live Example

Getting Started

Learn the basics and create your first integration in under 10 minutes

API Reference

Complete API documentation with examples and best practices

Tutorials

Step-by-step guides for common use cases and patterns

Examples

Real-world code examples and implementation patterns

Props

Prop	Type	Default	Description
title	string	Required	Card title
description	string	undefined	Card description
href	string	undefined	Link destination
icon	string/ReactNode	undefined	Icon (emoji or component)
variant	string	'default'	Style ('default', 'primary', 'secondary')
size	string	'medium'	Size ('small', 'medium', 'large')
external	boolean	false	External link

Usage

<DocCard
  title="Guide Title"
  description="Guide description"
  href="/docs/guide"
  icon={<Icon name="book" size={28} />}
  variant="primary"
/>

<DocCardGrid columns={3}>
  <DocCard title="Guide 1" href="/guide1" icon={<Icon name="book" size={28} />} />
  <DocCard title="Guide 2" href="/guide2" icon={<Icon name="wrench" size={28} />} />
  <DocCard title="Guide 3" href="/guide3" icon={<Icon name="lightning" size={28} />} />
</DocCardGrid>

Best Practices

• Use emojis or icons for visual appeal
• Keep descriptions concise (1-2 sentences)
• Group related cards with DocCardGrid
• Use variant to highlight important cards

When to Use

• Documentation navigation
• Section landing pages
• Resource directories
• Quick link collections

---

FeatureGrid

Responsive grid layout for displaying features.

Layout

Live Example

Lightning Fast

Optimized for speed with sub-100ms response times

Secure

Enterprise-grade security with end-to-end encryption

Scalable

Grows with your needs from startup to enterprise

Accurate

Precision targeting with 99.9% accuracy rate

Global

Available in 150+ countries worldwide

Easy to Use

Intuitive API with comprehensive documentation

Props

FeatureGrid:

Prop	Type	Default	Description
columns	number	3	Number of columns (2, 3, 4)
children	ReactNode	Required	FeatureGridItem components

FeatureGridItem:

Prop	Type	Description
icon	string/ReactNode	Icon (emoji or component)
title	string	Feature title
description	string	Feature description
href	string	Optional link

Usage

<FeatureGrid columns={3}>
  <FeatureGridItem
    icon={<Icon name="lightning" size={28} />}
    title="Fast"
    description="Lightning fast performance"
  />
  <FeatureGridItem
    icon={<Icon name="padlock" size={32} />}
    title="Secure"
    description="Bank-level security"
  />
</FeatureGrid>

Best Practices

• Use 3 columns for desktop
• Keep titles short (2-3 words)
• Make descriptions concise
• Use consistent icon style

When to Use

• Feature showcases
• Benefit lists
• Product highlights
• Capability overviews

---

FeatureCard

Animated feature card with gradient effects and hover animations.

Visual

Live Example

Precise Targeting

Target your audience with laser precision using advanced AI algorithms

Premium Quality

Enterprise-grade quality with 99.99% uptime guarantee

Easy Integration

Integrate in minutes with our simple SDK and comprehensive docs

Props

Prop	Type	Description
icon	string	Emoji or icon
title	string	Card title
description	string	Card description
gradient	string	Gradient variant ('gradientBlue', 'gradientPurple', 'gradientPink', 'gradientGreen')
link	string	Optional link URL

Usage

<FeatureCard
  icon={<Icon name="target" size={32} />}
  title="Feature Title"
  description="Feature description"
  gradient="gradientBlue"
  link="/docs/feature"
/>

When to Use

• Product features
• Service highlights
• Capability showcases
• Landing pages

---

GlassCard

Frosted glass effect container with backdrop blur.

Visual

Live Example

Glassmorphism Effect

This card features a beautiful frosted glass effect with backdrop blur. It works great in both light and dark modes.

Perfect for highlighting important content or creating visual depth in your documentation.

Props

Prop	Type	Default	Description
hover	boolean	false	Enable hover animation
children	ReactNode	Required	Card content

Usage

<GlassCard hover={true}>
  <h3>Important Information</h3>
  <p>Content with glassmorphism effect.</p>
</GlassCard>

Best Practices

• Use for important content highlights
• Don't nest too deeply
• Works best against colorful backgrounds
• Test in both light and dark modes

When to Use

• Special announcements
• Featured content
• Call-out sections
• Visual emphasis

---

MetricCard

Display statistics and metrics with optional trend indicators.

Data Display

Live Example

12%

1,234

Active Users

0.1%

99.9%

Uptime

150+

Countries

15%

< 100ms

Response Time

Props

Prop	Type	Description
value	string/ReactNode	Metric value
label	string	Metric label
icon	string	Optional icon
trend	Object	Optional trend {direction: 'up'/'down', value: '12%'}

Usage

<MetricCard
  value="1,234"
  label="Users"
  icon={<Icon name="users" size={32} />}
  trend={{ direction: 'up', value: '12%' }}
/>

When to Use

• Dashboard statistics
• Performance metrics
• Usage statistics
• KPI displays

---

Timeline

Vertical timeline for roadmaps, changelogs, or historical events.

Navigation

Live Example

🎉

January 2024

Product Launch

Initial release with core features and API v1

⚡

March 2024

Performance Update

2x faster processing with optimized algorithms

🔒

May 2024

Security Enhancement

Added OAuth 2.0 and enterprise security features

🚀

Q3 2024

Version 2.0 (Upcoming)

Major update with AI-powered features and analytics

Props

Prop	Type	Description
items	Array	Required array of timeline items

Timeline Item:

{
  icon: '🚀',
  date: 'Q1 2024',
  title: 'Milestone Title',
  description: 'Milestone description'
}

Usage

<Timeline
  items={[
    {
      icon: '🎉',
      date: 'January 2024',
      title: 'Launch',
      description: 'Initial release'
    },
    {
      icon: '⚡',
      date: 'March 2024',
      title: 'Update',
      description: 'Performance improvements'
    }
  ]}
/>

When to Use

• Product roadmaps
• Version history
• Changelogs
• Project milestones
• Historical timelines

---

ComparisonTable

Feature comparison table with highlighted columns.

Data Display

Live Example

Feature	Free	Popular Pro	Enterprise
API Calls Monthly API request limit	1,000	100,000	Unlimited
Support Customer support level	Community	Email	24/7 Phone
Analytics	✗	✓	✓
Custom Domain	✗	✓	✓
SLA	✗	✗	✓

Props

Prop	Type	Description
features	Array	Array of feature objects
columns	Array	Array of column objects

Column Object:

{
  name: 'Plan Name',
  highlight: true  // highlights this column
}

Feature Object:

{
  name: 'Feature Name',
  description: 'Optional description',
  values: [true, false, 'text']  // one per column
}

Usage

<ComparisonTable
  columns={[
    { name: 'Basic', highlight: false },
    { name: 'Pro', highlight: true }
  ]}
  features={[
    {
      name: 'Storage',
      values: ['10GB', '100GB']
    },
    {
      name: 'Support',
      values: [false, true]
    }
  ]}
/>

When to Use

• Pricing comparisons
• Feature comparisons
• Plan differences
• Product tiers

---

Typography & UI Components

GradientText

Text with gradient color effects - perfect for headings and emphasis.

Typography

Live Example

Primary Gradient Heading

Secondary Gradient Heading

Accent Gradient Heading

Success gradient for inline text

Props

Prop	Type	Description
variant	string	Gradient variant ('primary', 'secondary', 'accent', 'success')
children	ReactNode	Text content

Usage

<h1><GradientText variant="primary">Title</GradientText></h1>
<GradientText variant="accent">Highlighted text</GradientText>

Best Practices

• Use for main page titles
• Use for important headings
• Don't overuse - 1-2 per section max
• Works great with DocHero

When to Use

• Page titles
• Section headings
• Emphasis on important text
• Brand elements

---

Badge

Pill-shaped label for status, tags, and metadata.

Typography

Live Example

PrimarySecondarySuccessWarningDangerInfoOutlineGlass

SmallMediumLarge

Props

Prop	Type	Default	Description
variant	string	'primary'	Style variant
size	string	'medium'	Size ('small', 'medium', 'large')
children	ReactNode	Required	Badge content

Variants:

• primary - Main actions
• secondary - Secondary info
• success - Positive states
• warning - Cautions
• danger - Errors
• info - Information
• outline - Subtle emphasis
• glass - Glass effect

Usage

<Badge variant="success">New</Badge>
<Badge variant="warning" size="large">Beta</Badge>
<Badge variant="info">v2.0</Badge>

When to Use

• Status indicators
• Version numbers
• Tags and categories
• Feature flags
• Metadata

---

GradientButton

Animated button with gradient effects and glow on hover.

Typography

Live Example

Get Started

Props

Prop	Type	Default	Description
to or href	string	undefined	Link destination
variant	string	'primary'	Style ('primary', 'secondary', 'success', 'outline')
size	string	'medium'	Size ('small', 'medium', 'large')
external	boolean	false	Open in new tab
children	ReactNode	Required	Button content

Usage

<GradientButton to="/docs/start" variant="primary" size="large">
  Get Started
</GradientButton>

<GradientButton href="https://github.com" external variant="outline">
  View on GitHub
</GradientButton>

<GradientButton variant="success" size="medium">
  Success
</GradientButton>

Note: Button sizing has been optimized for a more compact, square-like appearance with balanced padding.

When to Use

• Call-to-action buttons
• Primary actions
• Navigation buttons
• Download links

---

AnimatedCounter

Smooth counting animation for numbers.

Typography

Live Example

0+

Users

$0.00

Price

0M

Revenue

0+

Countries

Props

Prop	Type	Default	Description
end	number	Required	Target number
duration	number	2000	Animation duration (ms)
prefix	string	''	Prefix (e.g., '$')
suffix	string	''	Suffix (e.g., '+', 'K')
separator	string	','	Thousands separator
decimals	number	0	Decimal places

Usage

<AnimatedCounter end={1000} suffix="+" />
<AnimatedCounter end={99.99} prefix="$" decimals={2} />
<AnimatedCounter end={5000000} suffix="M" separator="," />

Best Practices

• Use sparingly (3-4 per page max)
• Only for important metrics
• Animates on scroll into view
• Works great with MetricCard

When to Use

• Statistics
• Metrics dashboards
• Landing pages
• Achievement displays

---

Feedback & Metadata Components

WasThisHelpful

Feedback widget for collecting user feedback on documentation pages.

Feedback

Live Example

Was this helpful?

Props

Prop	Type	Description
pageId	string	Unique page identifier
onSubmit	Function	Callback when feedback submitted

Usage

<WasThisHelpful
  pageId="unique-page-id"
  onSubmit={(feedback) => {
    // Handle feedback
    console.log(feedback);
  }}
/>

Best Practices

• Place at bottom of pages
• Use unique pageId per page
• Integrate with analytics
• Respond to feedback

When to Use

• End of documentation pages
• After tutorials
• Product documentation
• Help articles

---

LastUpdated

Display when page was last updated.

Metadata

Live Example

Last updated:January 15, 2024

Last updated:November 3, 2025•by John Doe

Props

Prop	Type	Default	Description
date	string/Date	Required	Date value
author	string	undefined	Optional author
showAuthor	boolean	false	Show author name

Usage

<LastUpdated date="2024-01-15" />
<LastUpdated 
  date={new Date()} 
  author="John Doe" 
  showAuthor={true} 
/>

When to Use

• Page metadata
• Documentation updates
• Content freshness indicators
• Author attribution

---

ReadingTime

Calculate and display estimated reading time.

Metadata

Live Example

Props

Prop	Type	Default	Description
content	string/ReactNode	Required	Content to analyze
wordsPerMinute	number	200	Reading speed

Usage

<ReadingTime content={articleContent} />
<ReadingTime wordsPerMinute={250}>
  Your content here...
</ReadingTime>

When to Use

• Long articles
• Tutorials
• Blog posts
• Detailed documentation

---

RelatedDocs

Display related documentation articles with navigation cards.

Navigation

Live Example

Related Documentation

📐

System Design Guide

Learn our documentation standards and best practices

📦

Component Inventory

Quick reference of all available components

🚀

Getting Started

Start building with our platform

Props

Prop	Type	Default	Description
items	Array	Required	Array of related items
title	string	'Related Documentation'	Section title

Item Object:

{
  title: 'Page Title',
  href: '/docs/page',
  description: 'Page description',
  icon: '📚'
}

Usage

<RelatedDocs
  title="See Also"
  items={[
    {
      title: 'API Reference',
      href: '/',
      description: 'Complete API docs',
      icon: '📚'
    }
  ]}
/>

Best Practices

• Place at end of pages
• Link to 2-4 related pages
• Use descriptive icons
• Write clear descriptions

When to Use

• End of documentation pages
• Navigation between related topics
• Cross-referencing content
• Guiding user journey

---

Callout

Enhanced admonition-style component for important information.

Content Enhancement

Live Example

Information

This is an informational callout with useful context.

Pro Tip

Use callouts to highlight important information throughout your documentation.

Warning

Make sure to backup your data before proceeding with this operation.

Danger

This action cannot be undone. Proceed with caution.

Success

Your configuration has been saved successfully!

This is a simple note without a custom title.

Props

Prop	Type	Default	Description
type	string	'info'	Type ('info', 'warning', 'danger', 'success', 'tip', 'note')
title	string	undefined	Optional custom title
icon	boolean	true	Show icon
children	ReactNode	Required	Content

Usage

<Callout type="warning" title="Important">
  Make sure to backup your data.
</Callout>

<Callout type="tip">
  Pro tip: Use keyboard shortcuts.
</Callout>

Best Practices

• Use appropriate type for content
• Keep content concise
• Don't nest callouts
• Use sparingly for impact

When to Use

• Important warnings
• Helpful tips
• Dangerous operations
• Success messages
• Additional context

---

CalloutBox

Alternative callout component with different styling.

Content Enhancement

Live Example

Did You Know?

CalloutBox offers an alternative styling to the standard Callout component.

Best Practice

Always validate user input before processing.

Props

Same as Callout component.

Usage

<CalloutBox type="info" title="Note">
  Content here
</CalloutBox>

---

Icon Gallery

Complete visual reference of all available icons. Use the Icon component with the icon name (without .svg extension).

arrow-down-right

arrow-right-small

arrow-right

arrow-up-right

book

books

box-detailed

chart

chat

checkmark

chevron-down-small

chevron-down

chevron-up

clipboard

clock

coin

community

compose

composition

cross

cube-detailed

cube

cycle

diamond-native

diamond

discord

dot

download

eye

geometric-diamond

github

globe

graduation

heart

key

layers-simple

layers

library

lightbulb

lightning

lock

memo

mobile

no-entry

package

padlock

palette

plug

puzzle

read-first

rocket

save

scroll

settings

shield

simplicity

siren

sparkles

star

target

thumbs-down

thumbs-up

users

warning

wave

wrench

Usage

import Icon from '@site/src/components/ui/Icon';

<Icon name="star" size={32} />
<Icon name="warning" size={24} />
<Icon name="lightbulb" size={48} />

Note: Use the icon name without the .svg extension. All icons support the size prop to adjust their dimensions.

---

Quick Reference

Component Selection Guide

Need	Use This Component
Multi-language code	CodeShowcase
Long code blocks	ExpandableCode
CLI commands	TerminalCommand
FAQ section	Accordion
Important info	Callout
API endpoint	ApiEndpoint
Object properties	PropertyTable
Function params	ParameterTable
JSON schema	SchemaViewer
Step-by-step guide	StepIndicator
Roadmap/changelog	Timeline
Feature comparison	ComparisonTable
Hero section	DocHero
Navigation cards	DocCard
Feature showcase	FeatureGrid or FeatureCard
Statistics	MetricCard with AnimatedCounter
Page title	GradientText
Status badge	Badge
CTA button	GradientButton
Related pages	RelatedDocs
Page feedback	WasThisHelpful

---

Best Practices Summary

Component Usage

1. Use the right component for the job
2. Don't overuse animated components
3. Maintain consistency across pages
4. Test in both light and dark modes
5. Verify mobile responsiveness

Performance

1. Limit AnimatedCounter usage (3-4 per page)
2. Use ExpandableCode for long snippets
3. Optimize images for web use
4. Don't nest complex components deeply

Accessibility

1. Always provide alt text for images
2. Use semantic HTML
3. Ensure keyboard navigation works
4. Maintain proper heading hierarchy
5. Test with screen readers

Visual Design

1. Use consistent color variants
2. Maintain proper spacing
3. Follow typography guidelines
4. Use gradients sparingly
5. Keep layouts clean and organized

---

Additional Resources

Related Documentation

📐

System Design Guide

Complete documentation standards and guidelines

📦

Component Inventory

Quick component reference and categorization

---

You're All Set! 🎉

You now have access to 30+ production-ready components with complete documentation.

30+ ComponentsFully DocumentedProduction Ready

---

Was this helpful?

Last updated:November 3, 2025