Libx Sample Documentation

    On this page

    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
    PaginationSequential navigationMulti-page guides, tutorials

    Layout Components

    ComponentPurposeExample Use Case
    CardGridResponsive card layoutFeature grids and link collections
    TwoColumnContentParallel 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 variant="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:

    • class: CSS classes for styling
    • style: Inline style object
    • default slot: 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: Uses semantic HTML and is verified by the repository accessibility checks

    Flexibility

    • Customizable: Accepts style and class
    • 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 class="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?