{"slug": "faststrap-component-based-fasthtml-extension-that-provides-reusable-ui-elements", "title": "Faststrap: Component-based FastHTML extension that provides reusable UI elements", "summary": "FastStrap, a component-based extension for the Python FastHTML framework, now ships 179 registered UI components plus HTMX presets, SEO/PWA helpers, and optional integrations, installable via `pip install faststrap`. Version 0.5.1+ adds a `mount_assets` helper for serving static files, and the project offers a separate `faststrap-preview-studio` package for previewing 73 components locally. The library targets Python developers building dashboards, data tools, and agent-friendly interfaces without npm, webpack, or vite build steps.", "body_md": "**Python-native UI components for FastHTML apps, dashboards, data tools, and AI-ready interfaces.**\n\nFastStrap helps Python developers build production web apps, admin panels, analytics dashboards, modelling tools, and agent-friendly interfaces with FastHTML, Bootstrap 5, and HTMX. The core stays lightweight and dependency-conscious: write Python, get polished HTML, and add JavaScript only when an optional integration truly needs it.\n\nFastHTML is amazing for building web apps in pure Python, but complete product and data interfaces still need a reliable UI layer. FastStrap fills that gap by providing:\n\n- **179 registered UI components** , plus HTMX presets, SEO/PWA helpers, and optional integrations\n- **Product UI foundations** - Forms, navigation, layouts, modals, notifications, auth screens, and Bootstrap surfaces\n- **Dashboard and data-app tools** - DataTable, metric cards, KPI cards, charts, maps, polling, SSE helpers, Markdown, Mermaid, JSON, and code rendering\n- **HTMX Presets Module** - Ready-to-use patterns for search, lazy loading, polling, optimistic actions, geolocation, and server-sent events\n- **SEO Module** - Comprehensive meta tags, Open Graph, Twitter Cards, and structured data\n- **PWA Module** - Installable app setup with manifest, service worker, icons, and offline foundations\n- **Agent-friendly direction** - Component registry metadata and structured primitives designed to support future AI/agent interfaces\n- **Zero JavaScript knowledge required for core workflows** - Components just work\n- **No build steps** - Pure Python, no npm/webpack/vite\n- **Full HTMX integration** - Dynamic updates without page reloads\n- **Zero-JS animations by default** - Beautiful effects with pure CSS (`Fx` ), with optional GSAP motion via`add_gsap(app)`\n- **Dark mode built-in** - Automatic theme switching\n- **Type-safe** - Full type hints for better IDE support\n- **Pythonic API** - Intuitive kwargs style\n- **Enhanced customization** - Slot classes, CSS variables, themes, and more\n- **Docs and examples included** - Coverage is expanding\n\nIt also ships higher-level modules for HTMX presets, SEO metadata composition, and PWA setup so production concerns are covered alongside UI components. The roadmap keeps heavier capabilities, such as richer plotting, ML dashboards, and agent surfaces, as focused optional integrations rather than bloating the core.\n\n```\npip install faststrap\n```\n\nOptional renderers can be installed only when you need them:\n\n```\npip install \"faststrap[markdown]\"\n```\n\n`faststrap[markdown]` installs the Python packages used by the `Markdown` display component. Chart.js and GSAP integrations load browser assets through `add_chartjs(app)` and `add_gsap(app)` and do not add Python dependencies.\n\n``` python\nfrom fasthtml.common import FastHTML, serve\nfrom faststrap import add_bootstrap, Card, Button, create_theme\n\napp = FastHTML()\n\n# Use built-in theme or create custom\ntheme = create_theme(primary=\"#7BA05B\", secondary=\"#48C774\")\nadd_bootstrap(app, theme=theme, mode=\"dark\")\n\n@app.route(\"/\")\ndef home():\n    return Card(\n        \"Welcome to FastStrap! Build beautiful UIs in pure Python.\",\n        header=\"Hello World!\",\n        footer=Button(\"Get Started\", variant=\"primary\")\n    )\n\nserve()\n```\n\nThat's it! You now have a modern, responsive web app with zero JavaScript.\n\nFaststrap V0.5.1+ includes a helper to easily mount your own static files (images, CSS, etc.):\n\n``` python\nfrom faststrap import mount_assets\n\n# Mount your \"assets\" directory at \"/assets\" URL\nmount_assets(app, \"assets\")\n\n# Use in your app\nImg(src=\"https://github.com/assets/logo.png\")\nDiv(style=\"background-image: url('/assets/hero.jpg')\")\n```\n\nSee [Static Files Guide](https://github.com/Faststrap-org/Faststrap/blob/main/docs/STATIC_FILES.md) for more details.\n\nExplore, test props, and preview all 73 FastStrap components interactively on your local machine with zero network latency — no cloud server costs, no cold starts, no internet required:\n\n```\npip install faststrap-preview-studio\nfaststrap-preview\n```\n\nOpens a local studio at `http://localhost:8080` with:\n\n- **Real-time viewport testing** — Mobile (375px), Tablet (768px), Laptop (1024px), Desktop (full)\n- **Dynamic props controls** — tweak variants, sizes, colours, and boolean toggles live\n- **Copy-ready Python snippets** with explicit import paths (`from faststrap import ...` )\n- **HTMX interactive sandboxes** for search, loading states, and data tables\n\nThe Studio bundles all FastStrap stylesheets and Bootstrap JS locally, so it works fully offline after installation.\n\nFaststrap now supports advanced attribute handling:\n\n``` python\nfrom faststrap import Button\n\n# Style dict and CSS variables\nButton(\n    \"Styled Button\",\n    style={\"background-color\": \"#7BA05B\", \"border\": \"none\"},\n    css_vars={\"--bs-btn-padding-y\": \"0.75rem\", \"--bs-btn-border-radius\": \"12px\"},\n    data={\"id\": \"123\", \"type\": \"demo\"},\n    aria={\"label\": \"Styled button\"},\n)\n\n# Filter None/False values automatically\nButton(\"Test\", disabled=None, hidden=False)  # None/False values are dropped\n```\n\nReusable close button for alerts, modals, and drawers:\n\n``` python\nfrom faststrap import CloseButton, Alert\n\n# Use in alerts\nAlert(\n    \"This alert uses CloseButton helper\",\n    variant=\"info\",\n    dismissible=True,\n)\n\n# Use in modals/drawers (automatically used)\n```\n\nMore control over button appearance and behavior:\n\n``` python\nfrom faststrap import Button\n\n# Render as link\nButton(\"As Link\", as_=\"a\", href=\"https://github.com/page\", variant=\"secondary\")\n\n# Loading states with custom text\nButton(\"Loading\", loading=True, loading_text=\"Please wait...\", spinner=True)\n\n# Full width, pill, active states\nButton(\"Full Width\", full_width=True, variant=\"info\")\nButton(\"Pill\", pill=True, variant=\"warning\")\nButton(\"Active\", active=True, variant=\"success\")\n\n# Icon and loading spinner control\nButton(\"Save\", icon=\"check-circle\", icon_pos=\"start\")\nButton(\"Saving\", loading=True, spinner=True, loading_text=\"Saving...\")\n```\n\nFine-grained control over component parts:\n\n``` python\nfrom faststrap import Card, Modal, Drawer, Dropdown\n\n# Card with custom slot classes\nCard(\n    \"Content\",\n    header=\"Custom Header\",\n    footer=\"Custom Footer\",\n    header_cls=\"bg-primary text-white p-3\",\n    body_cls=\"p-4\",\n    footer_cls=\"text-muted\",\n)\n\n# Modal with custom classes\nModal(\n    \"Modal content\",\n    title=\"Custom Modal\",\n    dialog_cls=\"shadow-lg\",\n    content_cls=\"border-0\",\n    header_cls=\"bg-primary text-white\",\n    body_cls=\"p-4\",\n)\n\n# Drawer with custom classes\nDrawer(\n    \"Drawer content\",\n    title=\"Custom Drawer\",\n    header_cls=\"bg-success text-white\",\n    body_cls=\"p-4\",\n)\n\n# Dropdown with custom classes\nDropdown(\n    \"Option 1\", \"Option 2\",\n    label=\"Custom Dropdown\",\n    toggle_cls=\"custom-toggle\",\n    menu_cls=\"custom-menu\",\n    item_cls=\"custom-item\",\n)\n```\n\nCreate and apply custom themes:\n\n``` python\nfrom faststrap import create_theme, add_bootstrap\n\n# Create custom theme\nmy_theme = create_theme(\n    primary=\"#7BA05B\",\n    secondary=\"#48C774\",\n    info=\"#36A3EB\",\n    warning=\"#FFC107\",\n    danger=\"#DC3545\",\n    success=\"#28A745\",\n    light=\"#F8F9FA\",\n    dark=\"#343A40\",\n)\n\n# Use built-in themes\nadd_bootstrap(app, theme=\"green-nature\")  # or \"blue-ocean\", \"purple-magic\", etc.\n\n# Or use custom theme\nadd_bootstrap(app, theme=my_theme)\n```\n\nAvailable built-in themes:\n\n- `green-nature`\n- `blue-ocean`\n- `purple-magic`\n- `red-alert`\n- `orange-sunset`\n- `teal-oasis`\n- `indigo-night`\n- `pink-love`\n- `cyan-sky`\n- `gray-mist`\n\nComponents include metadata about category, stability, and JavaScript requirements. The registry also helps developers and AI agents discover existing components before inventing new wrappers:\n\n``` python\nfrom faststrap import (\n    find_components,\n    get_component,\n    get_components_by_pattern,\n    list_component_metadata,\n    list_components,\n)\n\ncomponents = list_components(category=\"display\")\ncards = find_components(\"card\")\ntoast_components = get_components_by_pattern(\"toast\")\nmetadata = list_component_metadata()\n\n# Check if component requires JS\nmodal = get_component(\"Modal\")\n# Modal is registered with requires_js=True\n```\n\nFaststrap currently exposes **179 registered UI components** across forms, display, feedback, navigation, layout, and patterns, plus **22 HTMX preset helpers**, SEO/PWA helpers, accessibility helpers, core utilities, and optional integrations. Components are typed, HTMX-friendly, and follow Bootstrap conventions. Stability markers (`@stable`, `@beta`, `@experimental`) indicate API maturity.\n\n- `ActiveSearch`\n- `InfiniteScroll`\n- `AutoRefresh`\n- `LazyLoad`\n- `LoadingButton`\n- `OptimisticAction`\n- `LocationAction`\n- `PollUntil`\n- `ConfirmPrompt`\n- `Debounce`\n- `SwapOnEvent`\n- `hx_redirect`\n- `hx_refresh`\n- `hx_trigger`\n- `hx_reswap`\n- `hx_retarget`\n- `toast_response`\n- `SSEStream`\n- `sse_event`\n- `sse_comment`\n- `@require_auth`\n\n- `Button`\n- `ButtonGroup`\n- `ButtonToolbar`\n- `CalendarDatePicker`\n- `Checkbox`\n- `CloseButton`\n- `DateRangePicker`\n- `ExportButton`\n- `FileInput`\n- `FilterBar`\n- `FloatingActionButton`\n- `FloatingLabel`\n- `Form`\n- `FormBuilder`\n- `FormErrorSummary`\n- `FormGroup`\n- `FormGroupFromErrors`\n- `FormSection`\n- `FormWizard`\n- `GradientButton`\n- `Input`\n- `InputGroup`\n- `InputGroupText`\n- `InlineEditor`\n- `LiveValidationField`\n- `MultiSelect`\n- `Radio`\n- `Range`\n- `RangeSlider`\n- `SearchableSelect`\n- `Select`\n- `Switch`\n- `ThemeToggle`\n- `ToggleGroup`\n- `ValidationMessage`\n- `WizardStep`\n\n- `Avatar`\n- `AvatarGroup`\n- `Badge`\n- `BadgeGroup`\n- `Card`\n- `Carousel`\n- `CarouselItem`\n- `Chart`\n- `CodeBlock`\n- `DataTable`\n- `EmptyState`\n- `Figure`\n- `FlipCard`\n- `GlowCard`\n- `Image`\n- `JsonViewer`\n- `KPICard`\n- `KeyValueList`\n- `MapView`\n- `Markdown`\n- `Mermaid`\n- `MetricCard`\n- `RecordDetail`\n- `ResultCard`\n- `RevealCard`\n- `Sheet`\n- `SSETarget`\n- `StatCard`\n- `StatusBadge`\n- `Stepper`\n- `StepperStep`\n- `Svg`\n- `BsTable` /`BsTHead` /`BsTBody` /`BsTRow` /`BsTCell`\n- `Table`\n- `THead`\n- `TBody`\n- `TRow`\n- `TCell`\n- `TextClamp`\n- `Timeline`\n- `TimelineItem`\n- `TiltCard`\n- `TrendCard`\n\n- `FormBuilder` is now the preferred name for the Pydantic form builder API. If you are on`v0.6.0` or earlier, keep using`Form.from_pydantic()` . In`v0.6.1+` , prefer`FormBuilder.from_pydantic()` .`Form` remains as a compatibility alias.\n- `Table` ,`THead` ,`TBody` ,`TRow` , and`TCell` remain the primary table API.`v0.6.1` adds optional aliases`BsTable` ,`BsTHead` ,`BsTBody` ,`BsTRow` , and`BsTCell` for projects that import both FastHTML and Faststrap table primitives.\n\n- `Alert`\n- `ConfirmAction`\n- `ConfirmDialog`\n- `DotsLoader`\n- `ErrorDialog`\n- `ErrorPage`\n- `ErrorToast`\n- `InfoToast`\n- `InstallPrompt`\n- `Modal`\n- `ModernToast`\n- `ModernToastStack`\n- `NoticeAlert`\n- `NoticeToast`\n- `NotificationCenter`\n- `Placeholder`\n- `PlaceholderButton`\n- `PlaceholderCard`\n- `PolygonLoader`\n- `Popover`\n- `Progress`\n- `ProgressBar`\n- `ProgressRing`\n- `PulseLoader`\n- `RingLoader`\n- `ShadowLoader`\n- `SimpleToast`\n- `Spinner`\n- `SuccessToast`\n- `Toast`\n- `ToastContainer`\n- `Tooltip`\n- `TypewriterLoader`\n- `WarningToast`\n- `WaveLoader`\n\n- `Accordion`\n- `AccordionItem`\n- `BottomNav`\n- `BottomNavItem`\n- `Breadcrumb`\n- `Collapse`\n- `CommandItem`\n- `CommandPalette`\n- `Drawer`\n- `Dropdown`\n- `DropdownDivider`\n- `DropdownItem`\n- `GlassNavbar`\n- `GlassNavItem`\n- `ListGroup`\n- `ListGroupItem`\n- `Navbar`\n- `Pagination`\n- `Scrollspy`\n- `SidebarNavbar`\n- `SidebarNavItem`\n- `TabPane`\n- `Tabs`\n\n- `Container`\n- `Row`\n- `Col`\n- `Stack`\n- `Cluster`\n- `Center`\n- `Hero`\n- `DashboardGrid`\n- `PageHeader`\n- `ParallaxSection`\n\n- `Feature`\n- `FeatureGrid`\n- `FooterModern`\n- `NavbarModern`\n- `PricingGroup`\n- `PricingTier`\n- `Testimonial`\n- `TestimonialSection`\n\n- `DashboardLayout`\n- `LandingLayout`\n- `AuthLayout`\n\n- `SkipLink`\n- `LiveRegion`\n- `VisuallyHidden`\n- `FocusTrap`\n\n- `Fx` - Zero-JS animations and visual effects\n\n- `ChartJS` - Optional Chart.js integration via`add_chartjs(app)`\n- `Gsap` /`Motion` /`GsapReveal` - Optional GSAP motion integration via`add_gsap(app)`\n- `ModernToast` - Opinionated modern toast surface that remains separate from the core Bootstrap toast API\n\n- `list_components`\n- `get_component`\n- `find_components`\n- `get_components_by_pattern`\n- `list_component_metadata`\n- `theme_variant_css`\n\nDocs are actively being expanded to match the full API surface. See the docs site and `examples/` for current coverage and usage patterns.\n\n**View docs**: [https://faststrap-org.github.io/Faststrap/](https://faststrap-org.github.io/Faststrap/)\n\nFaststrap has a dedicated `showcase/` layer for polished, product-style references. These are fuller applications and landing pages, not tiny component demos.\n\n| Reference | Best Use | \n|---|---|\n| `showcase/novaflow_ai_saas.py` | Premium SaaS landing pages | \n| `showcase/atlas_command_center.py` | v0.7 command-center dashboard with new components | \n| `showcase/onboardflow_workspace.py` | Workflow/onboarding apps with FormWizard and live validation | \n| `showcase/northstar_ops_dashboard.py` | Dense analytics and operations dashboards | \n| `showcase/hotel_booking_showcase.py` | Luxury/editorial product marketing | \n| `showcase/ledgerleaf_finance.py` | Finance and mobile-aware account surfaces | \n\nSee the full gallery in the [Showcase docs](https://faststrap-org.github.io/Faststrap/showcase/).\n\nComprehensive examples organized by learning path:\n\n- `hello_world.py` - Your first Faststrap app\n- `first_card.py` - Working with components\n- `simple_form.py` - Building forms\n- `adding_htmx.py` - HTMX interactivity\n\n- `blog/` - Complete blog with posts, comments, admin\n- `calculator/` - HTMX-powered calculator\n- `game/` - Tic-tac-toe with win detection\n- `ecommerce/` - E-commerce store (existing)\n\n- `effects_showcase.py` - All Faststrap effects demo\n- `custom_themes.py` - Theme customization\n- `component_defaults.py` - Global configuration\n\n- `v070_component_wave.py` - Core v0.7.0 component wave demo\n- `v070_workflow_patterns.py` - HTMX workflow and helper patterns\n- `v070_optional_integrations.py` - ModernToast, ChartJS, and GSAP opt-in integrations\n\n**See**: `examples/README.md` for complete guide\n\nThe latest tagged release is **v0.9.1**. The current source tree includes any follow-up work recorded under `[Unreleased]` in `CHANGELOG.md`.\n\n- **179 registered UI components** in the current source tree across forms, display, feedback, navigation, layout, and patterns.\n- **245 names in `faststrap.__all__`** , plus HTMX presets, SEO/PWA helpers, and optional integrations.\n- **Optional integrations** for Chart.js, GSAP, and Markdown (`pip install faststrap[markdown]` required for the`Markdown` display component).\n- **Discovery APIs** including`list_components()` ,`find_components()` ,`get_components_by_pattern()` , and`list_component_metadata()` .\n- **Documentation structure** with component index, architecture guide, upgrade guide, performance guide, and custom component guide.\n\nUseful docs:\n\nFor the current source of truth on future build direction, see [`ROADMAP.md`](https://github.com/Faststrap-org/Faststrap/blob/main/ROADMAP.md).\n\n``` python\nfrom fasthtml.common import FastHTML\nfrom faststrap import add_bootstrap, create_theme\n\napp = FastHTML()\n\n# Basic setup (includes default FastStrap favicon)\nadd_bootstrap(app)\n\n# With dark mode\nadd_bootstrap(app, mode=\"dark\")\n\n# Custom theme\ntheme = create_theme(primary=\"#7BA05B\", secondary=\"#48C774\")\nadd_bootstrap(app, theme=theme)\n\n# Using CDN\n# Note: this covers Faststrap-managed assets only.\n# Your own app CSS/images still need to be served by your deployment setup.\nadd_bootstrap(app, use_cdn=True)\n```\n\nAll components follow Bootstrap's conventions with Pythonic names:\n\n``` python\nfrom faststrap import Button, Badge, Alert, Input, Select, Tabs\n\n# Button with HTMX\nButton(\"Save\", variant=\"primary\", hx_post=\"/save\", hx_target=\"#result\")\n\n# Form inputs\nInput(\"email\", input_type=\"email\", label=\"Email Address\", required=True)\nSelect(\"country\", (\"us\", \"USA\"), (\"uk\", \"UK\"), label=\"Country\")\n\n# Navigation tabs\nTabs(\n    (\"home\", \"Home\", True),\n    (\"profile\", \"Profile\"),\n    (\"settings\", \"Settings\")\n)\n```\n\nAll components support HTMX attributes:\n\n```\n# Dynamic button\nButton(\"Load More\", hx_get=\"/api/items\", hx_swap=\"beforeend\")\n\n# Live search input\nInput(\"search\", placeholder=\"Search...\", hx_get=\"/search\", hx_trigger=\"keyup changed delay:500ms\")\n\n# Dynamic dropdown\nSelect(\"category\", (\"a\", \"A\"), (\"b\", \"B\"), hx_get=\"/filter\", hx_trigger=\"change\")\npython\nfrom faststrap import Container, Row, Col\n\nContainer(\n    Row(\n        Col(\"Left column\", cols=12, md=6, lg=4),\n        Col(\"Middle column\", cols=12, md=6, lg=4),\n        Col(\"Right column\", cols=12, md=12, lg=4)\n    )\n)\npython\nfrom faststrap import Input, Select, Button, Card\n\nCard(\n    Input(\n        \"email\",\n        input_type=\"email\",\n        label=\"Email Address\",\n        placeholder=\"you@example.com\",\n        required=True,\n        help_text=\"We'll never share your email\"\n    ),\n    Input(\n        \"password\",\n        input_type=\"password\",\n        label=\"Password\",\n        required=True,\n        size=\"lg\"\n    ),\n    Select(\n        \"country\",\n        (\"us\", \"United States\"),\n        (\"uk\", \"United Kingdom\"),\n        (\"ca\", \"Canada\"),\n        label=\"Country\",\n        required=True\n    ),\n    Button(\"Sign Up\", variant=\"primary\", type=\"submit\", cls=\"w-100\"),\n    header=\"Create Account\"\n)\npython\nfrom faststrap import Tabs, TabPane, Card\n\nCard(\n    Tabs(\n        (\"profile\", \"Profile\", True),\n        (\"settings\", \"Settings\"),\n        (\"billing\", \"Billing\")\n    ),\n    Div(\n        TabPane(\"Profile content here\", tab_id=\"profile\", active=True),\n        TabPane(\"Settings content here\", tab_id=\"settings\"),\n        TabPane(\"Billing content here\", tab_id=\"billing\"),\n        cls=\"tab-content p-3\"\n    )\n)\npython\nfrom faststrap import Spinner, Progress, Button\n\n# Spinner in button\nButton(\n    Spinner(size=\"sm\", label=\"Loading...\"),\n    \" Processing...\",\n    variant=\"primary\",\n    disabled=True\n)\n\n# Progress bar\nProgress(75, variant=\"success\", striped=True, animated=True, label=\"75%\")\n\n# Stacked progress\nDiv(\n    ProgressBar(30, variant=\"success\"),\n    ProgressBar(20, variant=\"warning\"),\n    ProgressBar(10, variant=\"danger\"),\n    cls=\"progress\"\n)\npython\nfrom faststrap import Pagination, Breadcrumb\n\n# Breadcrumb\nBreadcrumb(\n    (Icon(\"house\"), \"/\"),\n    (\"Products\", \"/products\"),\n    (\"Laptops\", None)\n)\n\n# Page navigation\nPagination(\n    current_page=5,\n    total_pages=20,\n    size=\"lg\",\n    align=\"center\",\n    show_first_last=True\n)\nfaststrap/\n src/faststrap/               # Library source\n    components/              # 179 registered UI components\n    core/                    # Assets, theme, registry, discovery, base primitives\n    integrations/            # Optional ChartJS and GSAP integrations\n    presets/                 # HTMX interaction/response helpers\n    seo/                     # SEO + structured data helpers\n    pwa/                     # PWA manifest and install helpers\n    layouts/                 # Composed page layouts\n    static/                  # Vendored Bootstrap/Faststrap assets + favicon\n tests/                       # 779 collected tests in CI\n examples/                    # Structured examples by learning path\n    01_getting_started/\n    02_ui_components/\n    03_real_world_apps/\n    04_advanced/\n docs/                        # MkDocs site + guides (incl. deployment)\n pyproject.toml               # Packaging, tooling, and quality gates\n```\n\n- Python 3.10+\n- FastHTML 0.14.13+ (`python-fasthtml>=0.14.13` )\n- Git\n\n```\n# Clone repository\ngit clone https://github.com/Faststrap-org/Faststrap.git\ncd Faststrap\n\n# Create virtual environment\npython -m venv .venv\nsource .venv/bin/activate  # Windows: .venv\\Scripts\\activate\n\n# Install with dev dependencies\npip install -e \".[dev]\"\n\n# Run tests\npytest\n\n# Run with coverage\npytest --cov=faststrap\n\n# Type checking\nmypy src/faststrap\n\n# Format code\nblack src/faststrap tests\nruff check src/faststrap tests\n```\n\nUse `faststrap doctor` to catch common setup issues such as missing\n`add_bootstrap()`, serverless asset-mode mismatches, or unsupported dependency\nversions.\n\n```\nfaststrap doctor\nfaststrap doctor --path .\n```\n\n**Fixed in v0.4.6+!** If you're seeing 404 errors for Bootstrap CSS/JS files, update to the latest version:\n\n```\npip install --upgrade faststrap\n```\n\nWhen using `fast_app()`, add `data_bs_theme` to your root element:\n\n``` python\napp, rt = fast_app()\nadd_bootstrap(app, mode=\"light\")\n\n@rt(\"/\")\ndef get():\n    return Div(\n        YourContent(),\n        data_bs_theme=\"light\",  #  Add this for proper theming\n    )\n```\n\nWhen manually creating `Html()` + `Head()`, include `*app.hdrs`:\n\n``` python\n@app.route(\"/\")\ndef get():\n    return Html(\n        Head(\n            Title(\"My App\"),\n            *app.hdrs,  #  Required for Faststrap styles\n        ),\n        Body(YourContent())\n    )\n```\n\n**For more help**, see [TROUBLESHOOTING.md](https://github.com/Faststrap-org/Faststrap/blob/main/docs/TROUBLESHOOTING.md)\n\nWe welcome contributions! See [CONTRIBUTING.md](https://github.com/Faststrap-org/Faststrap/blob/main/CONTRIBUTING.md) for guidelines.\n\n1. **Pick a component** from[ROADMAP.md](https://github.com/Faststrap-org/Faststrap/blob/main/ROADMAP.md) active or planned sections\n2. **Follow patterns** in[BUILDING_COMPONENTS.md](https://github.com/Faststrap-org/Faststrap/blob/main/BUILDING_COMPONENTS.md)\n3. **Write tests** - Aim for 100% coverage (8-15 tests per component)\n4. **Submit PR** - We review within 48 hours\n\n- **Component Spec** :[COMPONENT_SPEC.md](https://github.com/Faststrap-org/Faststrap/blob/main/COMPONENT_SPEC.md)\n- **Building Guide** :[BUILDING_COMPONENTS.md](https://github.com/Faststrap-org/Faststrap/blob/main/BUILDING_COMPONENTS.md)\n- **Roadmap** :[ROADMAP.md](https://github.com/Faststrap-org/Faststrap/blob/main/ROADMAP.md)\n- **Contributing** :[CONTRIBUTING.md](https://github.com/Faststrap-org/Faststrap/blob/main/CONTRIBUTING.md)\n- **Changelog** :[CHANGELOG.md](https://github.com/Faststrap-org/Faststrap/blob/main/CHANGELOG.md)\n\n- **Documentation** :[GitHub README](https://github.com/Faststrap-org/Faststrap#readme)\n- **Bug Reports** :[GitHub Issues](https://github.com/Faststrap-org/Faststrap/issues)\n- **Discussions** :[GitHub Discussions](https://github.com/Faststrap-org/Faststrap/discussions)\n- **Discord** :[FastHTML Community](https://discord.gg/qcXvcxMhdP)\n\nMIT License - see [LICENSE](https://github.com/Faststrap-org/Faststrap/blob/main/LICENSE) file for details.\n\n- **FastHTML** - The amazing pure-Python web framework\n- **Bootstrap** - Battle-tested UI components\n- **HTMX** - Dynamic interactions without complexity\n- **Contributors** - Thank you!\n\n**Built with  for the FastHTML community**", "url": "https://wpnews.pro/news/faststrap-component-based-fasthtml-extension-that-provides-reusable-ui-elements", "canonical_source": "https://github.com/Faststrap-org/Faststrap", "published_at": "2026-10-31 07:07:35+00:00", "updated_at": "2026-10-31 07:18:38.050354+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "ai-agents", "structured-data"], "entities": ["FastStrap", "FastHTML", "Bootstrap 5", "HTMX", "Chart.js", "GSAP", "faststrap-preview-studio"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/faststrap-component-based-fasthtml-extension-that-provides-reusable-ui-elements", "markdown": "https://wpnews.pro/news/faststrap-component-based-fasthtml-extension-that-provides-reusable-ui-elements.md", "text": "https://wpnews.pro/news/faststrap-component-based-fasthtml-extension-that-provides-reusable-ui-elements.txt", "jsonld": "https://wpnews.pro/news/faststrap-component-based-fasthtml-extension-that-provides-reusable-ui-elements.jsonld"}}