Component Overview

This documentation system includes a comprehensive set of UI components designed to enhance your documentation with interactive elements, visual aids, and improved user experience.

Available Components

Content Components

Navigation Components

Layout Components

Quick Examples

Icons with Text

Interactive Elements

Content Cards

Using Components

Import Statement

All components are available from the @docs/ui package:

import { Icon, Button, Card, Tabs, TabItem } from '@docs/ui';

MDX Integration

Components work seamlessly in MDX files:

---
title: "My Document"
---

import { Icon, Alert } from '@docs/ui';

# My Document

<Alert type="info">
  <Icon name="info" />
  This is an information callout using components.
</Alert>

Regular markdown content continues here...

Component Props

Most components accept standard props:

• className: CSS classes for styling
• style: Inline styles object
• children: Content to render inside the component
• Component-specific props: Documented in individual component pages

Design Principles

Consistency

All components follow consistent design patterns:

• Color scheme: Uses CSS custom properties for theming
• Typography: Matches documentation typography scale
• Spacing: Follows consistent spacing units
• Accessibility: WCAG 2.1 AA compliant

Flexibility

Components are designed to be flexible:

• Customizable: Accept style and className props
• Responsive: Work well on all screen sizes
• Composable: Can be combined to create complex layouts
• Themeable: Support both light and dark themes

Performance

Components are optimized for performance:

• Tree-shakeable: Only import what you use
• Lightweight: Minimal bundle impact
• Server-side rendering: Full SSR support
• Fast loading: Optimized for quick page loads

Component Categories

Content Enhancement

Make your content more engaging:

• Icons: Add visual indicators and emphasis
• Buttons: Create interactive call-to-action elements
• Alerts: Highlight important information

Organization

Structure your content effectively:

• Tabs: Organize related content in tabs
• Cards: Group related information
• Grids: Create responsive layouts

Navigation

Help users navigate your content:

• Table of Contents: In-page navigation
• Breadcrumbs: Show current location
• Pagination: Sequential navigation

Accessibility Features

All components include accessibility features:

• Keyboard navigation: Full keyboard support
• Screen reader support: Proper ARIA labels and roles
• Focus management: Logical focus order
• Color contrast: Meets WCAG contrast requirements
• Reduced motion: Respects user motion preferences

Customization

CSS Custom Properties

Components use CSS custom properties for theming:

:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
}

Style Overrides

Override component styles with CSS classes:

.custom-button {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  border-radius: 25px;
}

<Button className="custom-button">Custom Styled Button</Button>

Getting Started with Components

1. Explore Icons: Start with the most commonly used component
2. Try Tabs: Learn how to organize content effectively
3. Create Layouts: Build responsive page layouts
4. Add Navigation: Improve content discoverability

Next Steps

Ready to enhance your documentation with components?

• Icon Component: Learn about the versatile icon system
• Tab Component: Organize content with tabbed interfaces
• Sidebar Generation: Understand automatic navigation