ComponentShowLayout

A standard wrapper layout organism for individual component documentation pages. Provides consistent structure with breadcrumbs, title, status badge, category, and optional sidebar.

Basic Layout

Button

Stable

Building Blocks

Primary CTA with 4 variants and 3 sizes for user actions.

Main content area - examples, props tables, etc.

Status Variants

Stable: Stable

Beta: Beta

Experimental: Experimental

With Sidebar

Modal

Stable

Narrative Sections

Dialog overlay for focused interactions.

Main content with examples...

Props table...

Usage Example

<x-interface-frameworks.component-show-layout
    title="Button"
    category="Building Blocks"
    categorySlug="building-blocks"
    status="Stable"
    description="Primary CTA with 4 variants..."
>
    
    <div>Examples, props tables, etc.</div>

    
    <x-slot:sidebar>
        <nav>Table of contents...</nav>
    </x-slot:sidebar>
</x-interface-frameworks.component-show-layout>

Props

Prop	Type	Default	Description
title	string	''	Component name
category	string	'Building Blocks'	Category display name
categorySlug	string	'building-blocks'	Category slug for routes
status	string	'Stable'	Stable, Beta, Experimental, Deprecated
description	string	''	Brief component description
class	string	''	Additional CSS classes

Slots

Slot	Description
default	Main content area (examples, props, etc.)
sidebar	Optional sticky sidebar (table of contents)

Accessibility Features

Semantic header element for page structure
Breadcrumb navigation with proper ARIA attributes
Status badge provides visual and text indication
Sidebar uses aside element with sticky positioning
Main content wrapped in main element