Libx Sample Documentation

Component Overview

This documentation system ships with a broad set of UI components built to enhance content with interactive elements, visual cues, and better user experience.

Available Components

Content Components

ComponentPurposeExample Use Case
IconDisplay scalable vector iconsStatus indicators, navigation, emphasis
ButtonInteractive buttons and linksCalls to action, navigation, downloads
CardContent containersFeature highlights, summaries, links
AlertImportant noticesWarnings, tips, informational callouts
ComponentPurposeExample Use Case
TabsOrganize content in tabsCode examples, multi-option instructions
TableOfContentsPage navigationLong documents, reference pages
BreadcrumbsPath navigationDeep content hierarchies
PaginationSequential navigationMulti-page guides, tutorials

Layout Components

ComponentPurposeExample Use Case
GridResponsive layoutFeature grids, media galleries
TwoColumnParallel contentComparisons, before/after examples
SidebarContextual infoRelated links, quick reference
HeroProminent headersLanding pages, section intros

Quick Examples

Icons with Text

Information message with icon
Warning message with icon
Success message with icon

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 informational callout powered by components.
</Alert>

Regular Markdown content continues here...

Component Props

Most components share standard props:

  • className: CSS classes for styling
  • style: Inline style object
  • children: Content rendered inside the component
  • Component-specific props: Documented on each component page

Design Principles

Consistency

  • Color scheme: Uses CSS custom properties for theming
  • Typography: Matches the documentation scale
  • Spacing: Adheres to shared spacing units
  • Accessibility: Meets WCAG 2.1 AA guidelines

Flexibility

  • Customizable: Accepts style and className
  • Responsive: Works across screen sizes
  • Composable: Combine to create richer layouts
  • Theme-ready: Supports light and dark themes

Performance

  • Tree-shakeable: Import only what you need
  • Lightweight: Minimal bundle overhead
  • SSR friendly: Works with Astro server rendering
  • Fast-loading: Optimized for quick paints

Component Categories

Content Enhancement

Use components to make docs more engaging:

  • Icons: Add visual indicators and emphasis
  • Tabs: Group related content under tabs
  • Sidebar Generation: Provide navigation that scales with large docs

Accessibility Features

Every component ships with built-in accessibility:

  • Keyboard navigation support
  • Screen reader friendly labels/roles
  • Focus management that follows logical order
  • Color contrast that satisfies WCAG
  • Reduced motion honoring user preferences

Customization

CSS Custom Properties

Tune themes via CSS variables:

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

Style Overrides

Override styles with class names:

.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. Sidebar Auto-generation: Understand how navigation JSON is produced

Next Steps

Ready to enhance documentation with components?