bootstrap_ui_kit

Provides a built-in User Interface Kit for your bootstrap enabled theme.

The goal of this module is to provide a clear representation of how all the elements within your site look/feel/behave, all in one centralized place located at /ui-kit.

📙 Features (1.x);

• 🙅‍♂️ Minimal setup required. Uses your custom theme but removes the header/footer.
• 🎨 Customize the UI Kit frontend using CSS3 variables. (ie. --bootstrap-ui-kit--sidebar-bg-color: var(--bs-primary, #180733);)
• 📖 Glossary override. Add, remove, rearrange sections within the sidebar.
• 🚀 Auto-discovery for custom sections.
• ‍💻 "Dev Mode", gives additional information for developers which often includes example code snippets.
• 🔗 Deep linking to sections within the UI kit. /ui-kit#your-custom-section
• 📋 Copy current section link to users clipboard.
• ✅ Color: Automatic color contrast checker using https://www.aremycolorsaccessible.com/api-page
• 🥾 Bootstrap Icons (SVG Sprites work too)
• ...Many more, but the idea is to customize this per project (hence all the auto-discovery functionality)

📙 Features (2.x);

• 🧩 Story-based component hydration — each component can link to a .story.yml file that defines props, transformed slots, and an optional library_wrapper (inline Twig or @include).
• 🔍 Auto-discovers stories across projects, including monorepos.
• 🪄 Merges variant, story, and custom overrides into a clean, predictable render pipeline.
• 🧱 Unified wrapper, attribute normalization, and slot type handler system keep markup consistent and extensible.
• 📖 Glossary customization — add, remove, and reorder sections; fully configurable on the backend.
• 🔗 Deep linking and copyable anchors for easy navigation.
• 🧰 Optional “Dev Mode” provides component insights and debug info.
• 🎨 Built-in color contrast checker for accessibility.
• 🖼️ Supports Bootstrap Icons and SVG sprites.
• 🔎 Search implemented on the iconography page for quick filtering and discovery.
• ⚙️ Lightweight and override-friendly design for real-world theming.