### Run Getting Started Example

Source: https://github.com/faststrap-org/faststrap/blob/main/examples/README.md

Commands to navigate to the getting started directory and execute a Python application.

```bash
cd examples/01_getting_started
python hello_world.py
# Open http://localhost:5000
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/input.md

A basic example of how to use the Input component.

```python
Input("full_name", placeholder="Enter your name", label="Full Name")
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/feedback/modal.md

Example of how to use the Modal component.

```python
# The Trigger
trigger = Button("Launch Modal", data_bs_toggle="modal", data_bs_target="#myModal")

# The Modal Definition
modal = Modal(
    "Hello! This is a modal dialog.", 
    title="Example Modal", 
    modal_id="myModal",
    footer=Button("Save", variant="primary")
)
```

--------------------------------

### Quick Start Development Setup

Source: https://github.com/faststrap-org/faststrap/blob/main/CONTRIBUTING.md

Initial steps to fork, clone, and configure the development environment for FastStrap.

```bash
# 1. Fork and clone
git clone https://github.com/YOUR_USERNAME/Faststrap.git
cd Faststrap

# 2. Create virtual environment
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate

# 3. Install with dev dependencies
pip install -e ".[dev]"

# 4. Create a branch
git checkout -b feature/my-component

# 5. Make changes and test
pytest

# 6. Submit PR
git push origin feature/my-component
```

--------------------------------

### Basic DashboardLayout Setup

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/layouts/dashboard.md

A quick start example demonstrating the basic structure of the DashboardLayout with essential elements like a title, main content card, and sidebar navigation items.

```python
from faststrap import DashboardLayout, ListGroupItem

DashboardLayout(
    # Main content
    H1("Dashboard"),
    Card("Your content here"),
    
    # Configuration
    title="My Admin",
    sidebar_items=[
        ListGroupItem("Dashboard", href="/", active=True),
        ListGroupItem("Users", href="/users"),
        ListGroupItem("Settings", href="/settings")
    ]
)
```

--------------------------------

### Run Landing Page Example

Source: https://github.com/faststrap-org/faststrap/blob/main/examples/templates/landing/README.md

Navigate to the landing page example directory and run the Python script to start the development server. Open the provided URL in your browser to view the template.

```bash
# From the Faststrap root directory
cd examples/templates/landing
python main.py
```

--------------------------------

### Quick Start Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/api/registry.md

Demonstrates how to find and list components using the Faststrap registry.

```python
from faststrap import find_components, list_components, list_component_metadata

display_components = list_components(category="display")
card_like = find_components("card")

for meta in list_component_metadata(category="feedback"):
    print(meta["name"], meta["requires_js"])
```

--------------------------------

### NavbarModern Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/patterns/navbar-modern.md

A quick start example demonstrating how to use the NavbarModern component with brand and navigation items.

```python
from faststrap import NavbarModern

NavbarModern(
    brand="Faststrap",
    items=[
        ("Docs", "/docs"),
        ("Showcase", "/showcase"),
        ("GitHub", "https://github.com/Faststrap-org/Faststrap"),
    ],
)
```

--------------------------------

### Quick Start Grid Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/layout/grid.md

A basic example demonstrating a three-column layout using Container, Row, and Col with specified widths.

```python
Container(
    Row(
        Col("Left Column", width=4),
        Col("Center Column", width=4),
        Col("Right Column", width=4)
    )
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/kpi-card.md

A basic example of how to use the KPICard component.

```python
from faststrap import KPICard

KPICard(
    "Campaign Health",
    metrics=[
        ("Leads", "1,240", "+18%", "up"),
        ("CAC", "$42", "-6%", "up"),
        ("Churn", "2.1%", "+0.4%", "down"),
    ],
    columns=3,
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/chart.md

Example of rendering a Matplotlib chart.

```python
from faststrap import Chart

Chart(fig, backend="matplotlib")
```

--------------------------------

### Quick Start Examples

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/checks.md

Basic examples of Checkbox, Radio, and Switch components.

```python
Checkbox("subscribe", label="Subscribe to newsletter")
Radio("plan", value="monthly", label="Monthly Plan")
Switch("notifications", label="Enable Notifications")
```

--------------------------------

### Markdown Migration Guide Example

Source: https://github.com/faststrap-org/faststrap/blob/main/ROADMAP_EXPANDED.md

Provide a clear migration guide in markdown format, detailing breaking changes and offering simple find/replace instructions for common refactors.

```markdown
## Migrating from v0.6.x to v0.7.0

### Button Component

**Breaking Change:** `color` parameter removed.

**Before:**
```python
Button("Click", color="primary")
```

**After:**
```python
Button("Click", variant="primary")
```

**Find/Replace:** `color=`  `variant=`
```

--------------------------------

### Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/feedback/install-prompt.md

An example demonstrating the InstallPrompt component with custom parameters.

```python
InstallPrompt(
    title="Install FastApp",
    description="Install our app for offline access and faster performance!",
    ios_text="Tap Share then Add to Home Screen.",
    android_text="Install Now",
    delay=2000
)
```

--------------------------------

### MetricCard Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/metric-card.md

A quick start example demonstrating how to use the MetricCard component with a title, value, delta, and icon.

```python
from faststrap import Icon, MetricCard

MetricCard(
    "Revenue",
    "$42.8k",
    delta="+12.4%",
    delta_type="up",
    icon=Icon("graph-up"),
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/presets/poll-until.md

Example of initializing PollUntil in Python.

```python
from faststrap.presets import PollUntil

PollUntil(
    endpoint="/jobs/42/status",
    interval=1500,
    content="Checking job status...",
)
```

--------------------------------

### Run Auth Pages Example

Source: https://github.com/faststrap-org/faststrap/blob/main/examples/05_new_components/README.md

Command to run the authentication pages example.

```bash
python examples/05_new_components/auth_pages.py
```

--------------------------------

### Faststrap Example Template

Source: https://github.com/faststrap-org/faststrap/blob/main/examples/README.md

Use this template to create new Faststrap examples. It includes necessary imports, app setup, and a basic route structure.

```python
"""
Example: [Brief Description]

Demonstrates: [What this example shows]
Components: [List of components used]
Difficulty: [Beginner/Intermediate/Advanced]
"""

from fasthtml.common import *
from faststrap import *

app, rt = fast_app()

@rt("/")
def get():
    return Container(
        H1("Example Title"),
        # Your example code here
    )

serve()
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/multi-select.md

A basic example of a multi-select component.

```python
from faststrap import MultiSelect

MultiSelect(
    "team",
    ("platform", "Platform"),
    ("ops", "Ops"),
    ("data", "Data"),
    selected=["data"],
    label="Teams",
)
```

--------------------------------

### Run Faststrap Example

Source: https://github.com/faststrap-org/faststrap/blob/main/examples/README.md

Navigate to the example directory and run the Python script to execute a Faststrap example. Open your browser to view the result.

```bash
# Navigate to example directory
cd examples/01_getting_started

# Run the example
python hello_world.py

# Open your browser
# http://localhost:5000
```

--------------------------------

### GlassNavbar Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/navigation/glass-navbar.md

Example of how to use the GlassNavbar component with basic parameters.

```python
from faststrap import GlassNavbar

GlassNavbar(
    ("Home", "/"),
    ("Features", "/features"),
    ("Pricing", "/pricing"),
    brand="NovaFlow",
    blur_strength="medium",
    transparency=0.82,
    theme="light",
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/action-buttons.md

Example usage of GradientButton and FloatingActionButton.

```python
from faststrap import FloatingActionButton, GradientButton

GradientButton("Launch", gradient="blue", href="/start")

FloatingActionButton(
    icon="plus",
    variant="success",
    position="bottom-right",
    label="Create item",
    hx_get="/items/new",
    hx_target="#modal",
)
```

--------------------------------

### Quick Start PWA Setup

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/PWA_GUIDE.md

This code snippet demonstrates the basic setup for adding PWA capabilities to a Faststrap application, including bootstrap and PWA meta-tags.

```python
from fasthtml.common import FastHTML
from faststrap import add_bootstrap, add_pwa

app = FastHTML()
add_bootstrap(app)

add_pwa(
    app,
    name="My App",
    short_name="MyApp",
    theme_color="#0d6efd",
    icon_path="/assets/icon.png",
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/navigation/navbar.md

A basic example of how to use the Navbar component with various item types.

```python
from faststrap import Button, Navbar, ThemeToggle

Navbar(
    brand="Faststrap",
    items=[
        ("Home", "/"),
        ("Docs", "/docs"),
        {"text": "Pricing", "href": "/pricing", "active": True},
        ThemeToggle(endpoint="/theme/toggle"),
        Button("Get Started", href="/signup", variant="primary", cls="ms-lg-3"),
    ],
    expand="lg",
    color_scheme="dark",
    bg="primary",
)
```

--------------------------------

### Run Pattern Components Example

Source: https://github.com/faststrap-org/faststrap/blob/main/examples/05_new_components/README.md

Command to run the pattern components example.

```bash
python examples/05_new_components/pattern_components.py
```

--------------------------------

### Install dependencies and run Gunicorn

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/deployment/vps.md

Updates the system, installs required Python packages, and starts the application using Gunicorn with Uvicorn workers.

```bash
sudo apt update && sudo apt install python3-pip nginx -y
pip install faststrap uvicorn gunicorn

gunicorn main:app -w 4 -k uvicorn.workers.UvicornWorker \
  --bind 127.0.0.1:5001
```

--------------------------------

### PageHeader Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/layout/page-header.md

A quick start example demonstrating how to use the PageHeader component with various elements like title, subtitle, badge, and actions.

```python
from faststrap import PageHeader, Button, Badge

PageHeader(
    "Reports",
    eyebrow="Analytics",
    subtitle="Quarterly performance and exports.",
    badge=Badge("Live", variant="success"),
    actions=[
        Button("Export", variant="secondary", outline=True),
        Button("New Report", variant="primary"),
    ],
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/feedback/loaders.md

This example demonstrates how to import and use various loader components from the faststrap library.

```python
from faststrap import (
    DotsLoader,
    RingLoader,
    WaveLoader,
    PulseLoader,
    PolygonLoader,
    TypewriterLoader,
    ShadowLoader,
    ProgressRing,
)

DotsLoader(variant="info", label="Searching")
RingLoader(size="48px", variant="success")
WaveLoader(variant="warning")
PulseLoader(size="lg", variant="danger")
PolygonLoader(label="Preparing report")
TypewriterLoader("Generating...")
ShadowLoader("Training...")
ProgressRing(72, variant="success")
```

--------------------------------

### Quick Start Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/data-table.md

Demonstrates the basic initialization of a DataTable with sorting, search, and pagination enabled, and specifies an endpoint for data fetching.

```python
from faststrap import DataTable

DataTable(
    data,
    sortable=True,
    searchable=True,
    pagination=True,
    per_page=25,
    endpoint="/users",
)
```

--------------------------------

### Quick Start Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/live-validation.md

Demonstrates how to use LiveValidationField with an Input component to create a field with live validation.

```python
from faststrap import Input, LiveValidationField

LiveValidationField(
    Input(name="email", placeholder="you@example.com"),
    validate_url="/validate/email",
    label="Email",
    help_text="We will validate this when the field changes.",
)
```

--------------------------------

### FormSection Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/form-section.md

A basic example demonstrating how to use FormSection with Input fields, a title, description, and actions.

```python
from faststrap import Button, FormSection, Input

FormSection(
    Input(name="name", label="Name"),
    Input(name="email", label="Email", type="email"),
    title="Profile",
    description="Public account details.",
    actions=Button("Save", variant="primary"),
)
```

--------------------------------

### Alternative Quick Start with PageMeta

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/seo/index.md

Example of using the PageMeta component for a more comprehensive head composition.

```python
@app.get("/")
def home():
    return (
        PageMeta(
            title="My Site - Welcome",
            description="The best site on the internet",
            canonical="https://mysite.com/",
            include_pwa=True,
            pwa_name="My Site",
            pwa_short_name="MySite",
        ),
        Container(H1("Welcome!")),
    )
```

--------------------------------

### Example Structure

Source: https://github.com/faststrap-org/faststrap/blob/main/examples/05_new_components/README.md

Basic structure for a Faststrap example application.

```python
from fasthtml.common import *
from faststrap import *

app = FastHTML()
add_bootstrap(app)

@app.get("/")
def home():
    return Container(
        # Component demonstrations
    )

serve()
```

--------------------------------

### Registry Metadata and Discovery Examples

Source: https://github.com/faststrap-org/faststrap/blob/main/README.md

Demonstrates how to use Faststrap's registry functions to find, get, and list components and their metadata, including checking for JavaScript requirements.

```python
from faststrap import (
    find_components,
    get_component,
    get_components_by_pattern,
    list_component_metadata,
    list_components,
)

components = list_components(category="display")
cards = find_components("card")
toast_components = get_components_by_pattern("toast")
metadata = list_component_metadata()

# Check if component requires JS
modal = get_component("Modal")
# Modal is registered with requires_js=True
```

--------------------------------

### Project Structure Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/deployment/vercel.md

An example of the project structure required for Vercel deployment.

```text
my-app/
|-- assets/
|   `-- custom.css
|-- main.py
|-- requirements.txt
|-- .vercelignore
`-- vercel.json
```

--------------------------------

### Quick Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/presets/index.md

A quick example demonstrating the usage of HTMX presets and response helpers.

```python
from fasthtml.common import *
from faststrap import *
from faststrap.presets import ActiveSearch, toast_response

app = FastHTML()
add_bootstrap(app)

@app.get("/")
def home():
    return Container(
        ActiveSearch(
            endpoint="/api/search",
            target="#results",
            placeholder="Search users...",
        ),
        Div(id="results"),
    )

@app.get("/api/search")
def search(q: str = ""):
    results = db.search(q)
    return Div(*[Card(r.name) for r in results])

@app.post("/save")
def save():
    return toast_response(
        content=Card("Saved!"),
        message="Changes saved successfully",
        variant="success",
    )
```

--------------------------------

### app.py

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/getting-started/quick-start.md

Create a new file named app.py.

```python
from fasthtml.common import FastHTML, serve
from faststrap import add_bootstrap, Container, Hero, Button

# 1. Initialize FastHTML
app = FastHTML()

# 2. Inject FastStrap (Bootstrap 5)
add_bootstrap(app)

# 3. Define your first page
@app.route("/")
def home():
    return Container(
        Hero(
            title="FastStrap is Live!",
            subtitle="Building beautiful Python UIs has never been easier.",
            cta=Button("View Components", variant="primary", href="/components"),
            align="center",
        )
    )

# 4. Run the server
if __name__ == "__main__":
    serve()
```

--------------------------------

### Complete Landing Page Example with Animations

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/layouts/landing.md

A comprehensive example of LandingLayout showcasing advanced features like animations (Fx.fade_in, Fx.delay_sm), hover effects (Fx.hover_lift), and a multi-column feature section. This example assumes an `app` object is defined for routing.

```python
from faststrap import LandingLayout, NavbarModern, Hero, Card, Row, Col, Fx

@app.get("/")
def home():
    return LandingLayout(
        # Hero section
        Hero(
            H1("Build Faster with Faststrap", cls=Fx.fade_in),
            P("Modern Bootstrap components for FastHTML", cls=f"{Fx.fade_in} {Fx.delay_sm}"),
            Button("Get Started", variant="primary", size="lg", cls=f"{Fx.fade_in} {Fx.delay_md}"),
            variant="primary"
        ),
        
        # Features section
        Container(
            H2("Features", cls="text-center mb-5"),
            Row(
                Col(
                    Card(
                        Icon("lightning-fill", cls="text-primary fs-1"),
                        H4("Fast Development"),
                        P("Build UIs in pure Python"),
                        cls=f"{Fx.fade_in} {Fx.hover_lift}"
                    ),
                    md=4
                ),
                Col(
                    Card(
                        Icon("palette-fill", cls="text-success fs-1"),
                        H4("Beautiful Design"),
                        P("Bootstrap 5 components"),
                        cls=f"{Fx.fade_in} {Fx.hover_lift} {Fx.delay_sm}"
                    ),
                    md=4
                ),
                Col(
                    Card(
                        Icon("code-slash", cls="text-info fs-1"),
                        H4("Zero JavaScript"),
                        P("No JS knowledge required"),
                        cls=f"{Fx.fade_in} {Fx.hover_lift} {Fx.delay_md}"
                    ),
                    md=4
                )
            ),
            cls="py-5",
            id="features"
        ),
        
        # Navbar
        navbar=NavbarModern(
            brand="Faststrap",
            items=[
                ("Features", "#features"),
                ("Docs", "/docs"),
                ("GitHub", "https://github.com/...")
            ]
        ),
        
        # Footer
        footer=Div(
            Container(
                "© 2026 Faststrap. Built with ❤️ using FastHTML.",
                cls="text-center text-muted py-4"
            ),
            cls="bg-light border-top"
        )
    )
)
```

--------------------------------

### Finding the Right Icon Name Examples

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/icon.md

Examples demonstrating correct and incorrect icon name usage.

```python
Icon("check-circle")      # good
Icon("arrow-right")       # good
Icon("person-fill")       # good

Icon("checkmark")         # wrong
Icon("right-arrow")       # wrong
```

--------------------------------

### Adding Components

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/getting-started/quick-start.md

You can nest components just like HTML:

```python
from faststrap import Card, Button, Input

Card(
    Input("email", label="Email", placeholder="you@example.com"),
    Button("Join Waitlist", variant="primary", full_width=True),
    title="Get Notified"
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/range-slider.md

Basic range slider example.

```python
from faststrap import RangeSlider

RangeSlider("score", min_value=0, max_value=100, value=75, label="Score")
```

--------------------------------

### ProgressRing Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/feedback/loaders.md

This example shows how to use the ProgressRing component with various parameters.

```python
ProgressRing(
    42,
    max_value=100,
    variant="primary",
    show_text=True,
    label="Profile completion",
)
```

--------------------------------

### Run it

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/getting-started/quick-start.md

Execute the script.

```bash
python app.py
```

--------------------------------

### Main Application Setup

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/deployment/railway.md

Initialization of the FastHTML application with Bootstrap integration.

```python
from fasthtml.common import FastHTML
from faststrap import add_bootstrap

app = FastHTML()
add_bootstrap(app)  # use_cdn=False is fine on Railway

# Expose bare app; Railway uses startCommand
```

--------------------------------

### Select Component Usage Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/select.md

Example demonstrating how to use the Select component with various accessibility attributes and options.

```APIDOC
## Select Component Usage Example

### Description
This example shows how to instantiate the `Select` component with custom labels, ARIA attributes for screen readers, and help text.

### Method
N/A (Component instantiation)

### Endpoint
N/A (Component instantiation)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```python
Select(
    "language",
    ("en", "English"),
    ("es", "Spanish"),
    ("fr", "French"),
    label="Preferred Language",
    aria_label="Choose your preferred language",  # Screen reader description
    aria_required="true",                         # Explicitly mark as required
    help_text="This will be used for all communications"
)
```

### Response
#### Success Response (200)
N/A (Component instantiation)

#### Response Example
N/A
```

--------------------------------

### Optional Integrations Installation

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/guides/upgrading.md

Shows how to install Faststrap with optional integrations like markdown support.

```bash
pip install faststrap
pip install "faststrap[markdown]"
```

--------------------------------

### Theme System Examples

Source: https://github.com/faststrap-org/faststrap/blob/main/README.md

Shows how to create a custom theme using `create_theme` and apply it, or use built-in themes with `add_bootstrap`.

```python
from faststrap import create_theme, add_bootstrap

# Create custom theme
my_theme = create_theme(
    primary="#7BA05B",
    secondary="#48C774",
    info="#36A3EB",
    warning="#FFC107",
    danger="#DC3545",
    success="#28A745",
    light="#F8F9FA",
    dark="#343A40",
)

# Use built-in themes
add_bootstrap(app, theme="green-nature")  # or "blue-ocean", "purple-magic", etc.

# Or use custom theme
add_bootstrap(app, theme=my_theme)
```

--------------------------------

### Quick Start Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/api/theme-variants.md

Example of using theme_variant_css to generate light and dark mode styles for a custom component.

```python
from faststrap import theme_variant_css

theme_variant_css(
    ".premium-card",
    light={
        "background": "rgba(255, 255, 255, .86)",
        "border": "1px solid rgba(15, 23, 42, .08)",
    },
    dark={
        "background": "rgba(15, 23, 42, .72)",
        "border": "1px solid rgba(255, 255, 255, .12)",
    },
)
```

```css
[data-bs-theme="light"] .premium-card {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(15, 23, 42, .08);
}

[data-bs-theme="dark"] .premium-card {
  background: rgba(15, 23, 42, .72);
  border: 1px solid rgba(255, 255, 255, .12);
}
```

--------------------------------

### Initialize a project with a template

Source: https://github.com/faststrap-org/faststrap/blob/main/ROADMAP_EXPANDED.md

Use the CLI to scaffold a new project using a community-provided template.

```bash
# Install template via CLI
faststrap init my-blog --template=community/blog-pro

# This downloads template files to your project
# NOT imported as Python package
```

--------------------------------

### Development Workflow Setup

Source: https://github.com/faststrap-org/faststrap/blob/main/CONTRIBUTING.md

Commands to clone the repository, add the upstream remote, and prepare the virtual environment.

```bash
# Clone your fork
git clone https://github.com/Faststrap-org/Faststrap.git
cd Faststrap

# Add upstream remote
git remote add upstream https://github.com/Faststrap-org/Faststrap.git

# Create virtual environment
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate

# Install with dev dependencies
pip install -e ".[dev]"
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/layout/parallax-section.md

Example of how to use the ParallaxSection component with a Button.

```python
from faststrap import Button, ParallaxSection

ParallaxSection(
    Button("Explore rooms", variant="light"),
    img_src="/static/hotel.jpg",
    height="520px",
    overlay_opacity=0.45,
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/api/presets.md

Demonstrates basic usage of ActiveSearch for live search and hx_redirect for server-side redirects.

```python
from faststrap.presets import ActiveSearch, hx_redirect

# Live search in one line
search = ActiveSearch(endpoint="/search", target="#results")

# Server-side redirect
return hx_redirect("/dashboard")
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/structured-display.md

Demonstrates how to import and use KeyValueList, JsonViewer, CodeBlock, and RecordDetail components in Python.

```python
from faststrap import CodeBlock, JsonViewer, KeyValueList, RecordDetail

KeyValueList({
    "Status": "Ready",
    "Owner": "Ops",
})

RecordDetail(
    {"ID": 42, "State": "queued"},
    title="Training Job",
    subtitle="Submitted 2 minutes ago",
)

CodeBlock("print('hello')", language="python", filename="demo.py")
JsonViewer({"accuracy": 0.94, "loss": 0.12}, title="Metrics")
```

--------------------------------

### Initialize Faststrap Project via CLI

Source: https://github.com/faststrap-org/faststrap/blob/main/ROADMAP_EXPANDED.md

The CLI tool handles project scaffolding, template selection, authentication setup, and database configuration.

```python
import click
from pathlib import Path

TEMPLATES = {
    "dashboard": "Admin dashboard with sidebar, auth, CRUD",
    "landing": "Marketing landing page with hero, features, pricing",
    "ecommerce": "Online store with products, cart, checkout",
    "blog": "Blog with posts, categories, comments",
    "blank": "Minimal FastHTML + Faststrap setup"
}

@click.command()
@click.argument('project_name', required=False)
@click.option('--template', type=click.Choice(list(TEMPLATES.keys())))
@click.option('--auth/--no-auth', default=False)
@click.option('--db', type=click.Choice(['sqlite', 'postgres', 'none']), default='none')
def init(project_name, template, auth, db):
    """Initialize a new Faststrap project"""
    
    # Interactive prompts if not provided
    if not project_name:
        project_name = click.prompt('Project name')
    
    if not template:
        click.echo('\nAvailable templates:')
        for name, desc in TEMPLATES.items():
            click.echo(f'  {name}: {desc}')
        template = click.prompt('Choose template', type=click.Choice(list(TEMPLATES.keys())))
    
    # Create project
    project_path = Path.cwd() / project_name
    project_path.mkdir(exist_ok=True)
    
    # Copy template files
    copy_template(template, project_path)
    
    # Add auth if requested
    if auth:
        add_auth_scaffold(project_path)
    
    # Configure database
    if db != 'none':
        configure_database(project_path, db)
    
    click.echo(f'\n Project created: {project_path}')
    click.echo(f'Run: cd {project_name} && python main.py')
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/patterns/pricing.md

Demonstrates how to create a pricing group with two pricing tiers, one of which is highlighted.

```python
from faststrap import PricingGroup, PricingTier

PricingGroup(
    PricingTier("Starter", 19, features=["3 projects", "Email support"]),
    PricingTier(
        "Pro",
        49,
        features=["Unlimited projects", "Priority support"],
        highlighted=True,
    ),
    title="Choose your plan",
    subtitle="Start small and scale when you need more.",
)
```

--------------------------------

### Quick Start: Mount Bootstrap and Assets

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/STATIC_FILES.md

Initializes a FastHTML app, adds Faststrap's Bootstrap files, and mounts custom assets from an 'assets' directory.

```python
from fasthtml.common import FastHTML
from faststrap import add_bootstrap, mount_assets

app = FastHTML()
add_bootstrap(app)           # Mounts Faststrap files at /static/
mount_assets(app, "assets")  # Mounts your files at /assets/

@app.route("/")
def home():
    return Div(
        Img(src="/assets/logo.png"),
        style="background-image: url('/assets/hero.jpg');"
    )
```

--------------------------------

### list_components function example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/api/registry.md

Shows how to get all registered component names or filter by category.

```python
from faststrap import list_components

all_names = list_components()
forms = list_components(category="forms")
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/visual-cards.md

Demonstrates how to use FlipCard, TiltCard, RevealCard, and GlowCard with various parameters.

```python
from faststrap import Button, FlipCard, GlowCard, RevealCard, TiltCard

FlipCard(
    front="Plan summary",
    back=Button("Upgrade", variant="light"),
    height="260px",
)

TiltCard("Hover me", cls="card-body")

RevealCard(
    "/static/room.jpg",
    "Harbor Suite",
    description="Private terrace, skyline view.",
    action=Button("View Room", variant="light"),
)

GlowCard("Important metric", glow_color="#38bdf8", intensity="high", cls="card-body")
```

--------------------------------

### Faststrap CLI: Initialize Project

Source: https://github.com/faststrap-org/faststrap/blob/main/ROADMAP_EXPANDED.md

Command to initialize a new Faststrap project with various options for templates, authentication, and database configuration.

```APIDOC
## CLI: init

### Description
Initializes a new Faststrap project. Allows specifying project name, template, authentication, and database.

### Method
CLI Command

### Endpoint
`faststrap init [project_name]`

### Parameters
#### Path Parameters
- **project_name** (string) - Optional - The name of the project to create.

#### Query Parameters
- **--template** (choice) - Optional - The template to use for the project. Available options: dashboard, landing, ecommerce, blog, blank.
- **--auth** (boolean) - Optional - Whether to include authentication scaffolding. Use `--no-auth` to disable.
- **--db** (choice) - Optional - The database to configure. Available options: sqlite, postgres, none. Defaults to 'none'.

### Request Example
```bash
faststrap init my_awesome_project --template dashboard --auth --db postgres
```

### Response
- **Success Response**
  - Output indicating project creation and next steps.

### Response Example
```
 Project created: /path/to/my_awesome_project
 Run: cd my_awesome_project && python main.py
```
```

--------------------------------

### Complete HTMX Flow Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/inline-editor.md

A full example demonstrating the read/edit loop using InlineEditor with HTMX, including app setup, route definitions for read, edit, and save actions.

```python
from fasthtml.common import fast_app
from faststrap import InlineEditor

app, rt = fast_app()

title = "Quarterly planning"


def title_editor(editing: bool = False):
    return InlineEditor(
        "title",
        title,
        editing=editing,
        endpoint="/title",
        edit_endpoint="/title/edit",
        id="title-editor",
        method="patch",
    )


@rt("/")
def home():
    return title_editor()


@rt("/title/edit")
def edit_title():
    return title_editor(editing=True)


@rt("/title", methods=["PATCH"])
async def save_title(request):
    global title
    form = await request.form()
    title = form.get("title", "")
    return title_editor()
```

--------------------------------

### Quick Start Stat Card

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/stat_card.md

A basic example of a StatCard with title, value, icon, and trend.

```python
StatCard(
    title="Total Revenue",
    value="$45,231.89",
    icon=BI("currency-dollar"),
    trend="+20.1%",
    trend_type="up"
)
```

--------------------------------

### Run Local Feature Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/getting-started/installation.md

Execute a local example script to test FastStrap features. After running, open the provided local URL in your browser.

```bash
python examples/05_new_components/pre_v060_features.py
```

--------------------------------

### Complete HTMX Flow Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/form-wizard.md

A full example of an HTMX-driven form wizard flow, including the Faststrap app setup, route definitions for the initial wizard display, and handling POST requests for step navigation.

```python
from fasthtml.common import fast_app
from faststrap import FormWizard, WizardStep, Input

app, rt = fast_app()


def setup_wizard(step: int = 0):
    return FormWizard(
        WizardStep("Account", Input("email", input_type="email", label="Email")),
        WizardStep("Profile", Input("company", label="Company")),
        WizardStep("Finish", Input("plan", label="Plan")),
        current_step=step,
        endpoint="/setup",
        hx_target="#setup-wizard",
        id="setup-wizard",
    )


@rt("/")
def home():
    return setup_wizard()


@rt("/setup", methods=["POST"])
async def setup(request):
    form = await request.form()
    step = int(form.get("step", 0))
    return setup_wizard(step)
```

--------------------------------

### Hello World

Source: https://github.com/faststrap-org/faststrap/blob/main/README.md

A basic example of creating a web app with FastStrap, FastHTML, and Bootstrap 5 in dark mode.

```python
from fasthtml.common import FastHTML, serve
from faststrap import add_bootstrap, Card, Button, create_theme

app = FastHTML()

# Use built-in theme or create custom
theme = create_theme(primary="#7BA05B", secondary="#48C774")
add_bootstrap(app, theme=theme, mode="dark")

@app.route("/")
def home():
    return Card(
        "Welcome to FastStrap! Build beautiful UIs in pure Python.",
        header="Hello World!",
        footer=Button("Get Started", variant="primary")
    )

serve()
```

--------------------------------

### LoadingButton Examples

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/presets/loading-button.md

Illustrates different ways to use the LoadingButton component, including POST requests with confirmation and GET requests.

```APIDOC
### POST with Confirmation

```python
LoadingButton(
    "Delete Account",
    endpoint="/api/delete-account",
    method="delete",
    variant="danger",
    hx_confirm="Are you sure? This cannot be undone.",
)
```

### GET Request

```python
LoadingButton(
    "Load More",
    endpoint="/api/items?page=2",
    method="get",
    target="#items-list",
    variant="outline-primary",
)
```
```

--------------------------------

### Use faststrap init CLI

Source: https://github.com/faststrap-org/faststrap/blob/main/ROADMAP_EXPANDED.md

Commands for scaffolding new projects, either interactively or via command-line arguments.

```bash
# Interactive mode
faststrap init

> Project name: my-app
> Template: [dashboard, landing, ecommerce, blog, blank]
> Choose: dashboard
> Include auth [y/N]: y
> Include database [y/N]: y
> Creating project...
> Done! Run: cd my-app && python main.py

# Non-interactive
faststrap init my-app --template=dashboard --auth --db=sqlite

# List available templates
faststrap init --list-templates
```

--------------------------------

### Quick Start with SEO

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/seo/index.md

Example of using the SEO component to add metadata to a FastHTML application.

```python
from fasthtml.common import *
from faststrap import SEO, StructuredData, PageMeta

app = FastHTML()

@app.get("/")
def home():
    return (
        SEO(
            title="My Site - Welcome",
            description="The best site on the internet",
            image="/assets/og-image.jpg",
            url="https://mysite.com/"
        ),
        Container(
            H1("Welcome!"),
        )
    )
```

--------------------------------

### Faststrap App Initialization in main.py

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/deployment/render.md

Initializes the FastHTML app and adds Bootstrap support. Local static serving is supported on Render.

```python
from fasthtml.common import FastHTML
from faststrap import add_bootstrap

app = FastHTML()
add_bootstrap(app)  # Local static serving is supported on Render
```

--------------------------------

### Faststrap Initialization with fast_app()

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/TROUBLESHOOTING.md

The `fast_app()` pattern is suitable for quick prototypes and simple applications. It automatically includes headers and simplifies boilerplate, but requires manual theme attribute addition.

```python
from fasthtml.common import *
from faststrap import add_bootstrap, Card, Button

app, rt = fast_app()
add_bootstrap(app)

@rt("/")
def get():
    return Card(
        "Welcome!",
        Button("Click Me", variant="primary")
    )  # ✅ Auto-wrapped, headers included

serve()
```

--------------------------------

### Development Setup

Source: https://github.com/faststrap-org/faststrap/blob/main/README.md

Commands to set up the development environment for Faststrap.

```bash
# Clone repository
git clone https://github.com/Faststrap-org/Faststrap.git
cd Faststrap

# Create virtual environment
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate

# Install with dev dependencies
pip install -e ".[dev]"

# Run tests
pytest

# Run with coverage
pytest --cov=faststrap

# Type checking
mypy src/faststrap

# Format code
black src/faststrap tests
ruff check src/faststrap tests
```

--------------------------------

### Quick Start Table

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/table.md

A basic example of the Table component with header and body rows, demonstrating striping and hover effects.

```python
Table(
    THead(TRow(TCell("ID"), TCell("Name"), TCell("Role"))),
    TBody(
        TRow(TCell("1"), TCell("Alice"), TCell("Admin")),
        TRow(TCell("2"), TCell("Bob"), TCell("User")),
    ),
    striped=True, hover=True
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/forms/button.md

The simplest way to create a button.

```python
Button("Click Me", variant="primary")
```

--------------------------------

### get_components_by_pattern function example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/api/registry.md

Shows how to get component callables whose registry text matches a query, useful for agent/tool workflows.

```python
from faststrap import get_components_by_pattern

for component in get_components_by_pattern("metric"):
    print(component.__name__)
```

--------------------------------

### Hero Component Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/layout/hero.md

A basic example of the Hero component with a title, subtitle, call to action, and light background.

```python
Hero(
    title="Build Faster with FastStrap",
    subtitle="The definitive Bootstrap component library for FastHTML.",
    cta=Button("Get Started", size="lg", variant="primary"),
    bg_variant="light",
    align="center",
)
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/sheet.md

Demonstrates how to use the Sheet component with a Button to trigger it.

```python
from faststrap import Button, Sheet

Button(
    "Open actions",
    data_bs_toggle="offcanvas",
    data_bs_target="#mobileActions",
)

Sheet(
    "Quick actions go here",
    sheet_id="mobileActions",
    title="Actions",
)
```

--------------------------------

### Installation

Source: https://github.com/faststrap-org/faststrap/blob/main/README.md

Install FastStrap using pip.

```bash
pip install faststrap
```

--------------------------------

### Installation

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/display/markdown.md

Install the markdown component using pip.

```bash
pip install "faststrap[markdown]"
```

--------------------------------

### Scaffold project with community template

Source: https://github.com/faststrap-org/faststrap/blob/main/ROADMAP_EXPANDED.md

Detailed workflow for initializing a project using a community template from the registry.

```bash
# Scaffold with community template
faststrap init my-app --template=community/saas-starter

# This:
# 1. Checks registry for template
# 2. Downloads from GitHub
# 3. Extracts to new project
# 4. Runs setup scripts
# 5. Installs dependencies
```

--------------------------------

### Implement a Registration Page

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/layouts/auth.md

A sign-up form example featuring multiple input fields, a terms of service checkbox, and HTMX integration.

```python
@app.get("/register")
def register_page():
    return AuthLayout(
        FormGroup(
            Input(name="name", placeholder="John Doe"),
            label="Full Name",
            required=True
        ),
        FormGroup(
            Input("email", input_type="email", placeholder="you@example.com"),
            label="Email Address",
            required=True
        ),
        FormGroup(
            Input("password", input_type="password"),
            label="Password",
            help_text="At least 8 characters",
            required=True
        ),
        FormGroup(
            Input("confirm_password", input_type="password"),
            label="Confirm Password",
            required=True
        ),
        Checkbox(
            "I agree to the Terms of Service and Privacy Policy",
            name="agree_terms",
            required=True
        ),
        Button("Create Account", type="submit", variant="primary", full_width=True),
        title="Create Account",
        subtitle="Join thousands of users",
        logo="/static/logo.png",
        footer_text="Already have an account?",
        footer_link="/login",
        footer_link_text="Sign in",
        form_attrs={
            "hx_post": "/auth/register",
            "hx_target": "#auth-container"
        }
    )
```

--------------------------------

### Example: custom.css

Source: https://github.com/faststrap-org/faststrap/blob/main/skills/faststrap-app-builder/references/css-architecture.md

Example of a custom.css file that imports all other CSS modules.

```css
@import url("./_brand.css");
@import url("./_typography.css");
@import url("./_layout.css");
@import url("./_surfaces.css");
@import url("./_interactions.css");
```

--------------------------------

### Compelling Descriptions Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/seo/index.md

Example of a compelling meta description.

```python
description="Learn 10 essential Python tips to write cleaner code. Perfect for beginners and experienced developers."
```

--------------------------------

### StructuredData.organization() Example

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/seo/index.md

Example of generating Organization structured data.

```python
StructuredData.organization(
    name="Company Name",
    url="https://example.com",
    logo="https://example.com/logo.png",
    social_links=[
        "https://twitter.com/company",
        "https://linkedin.com/company/company"
    ]
)
```

--------------------------------

### v070_workflow_patterns.py - Workflow Patterns Demo

Source: https://github.com/faststrap-org/faststrap/blob/main/examples/05_new_components/README.md

Demonstrates CommandPalette, CommandItem, FormWizard, WizardStep, LiveValidationField, ValidationMessage, Pagination query preservation, HTMX links, DataTable.query_params(), DataTable.page_url(), ConfirmAction, and theme_variant_css().

```bash
python examples/05_new_components/v070_workflow_patterns.py
```

--------------------------------

### Quick Start

Source: https://github.com/faststrap-org/faststrap/blob/main/docs/components/patterns/testimonial-section.md

The simplest way to create a testimonial.

```python
Testimonial(
    quote="This product changed my life! Highly recommended.",
    author="John Doe",
    role="CEO, Acme Corp",
    rating=5
)
```