Examples
Quickly get a project started with any of our pre-built examples ranging from layout scaffolds to complete web apps and framework starter kits.
Official Examples Showcase
Browse interactive previews of all official boodoo templates, dashboards, pricing tables, checkout forms, and starters.
Starter Template Preview
Every template is built purely with Boodoo components and utilities. Here is a typical card-based layout structure:
Interactive Dashboard Card
Responsive grid card with standard Boodoo utility classes and zero third-party framework overhead.
<div class="card shadow-sm border p-3 rounded-3">
<div class="d-flex align-items-center justify-content-between mb-2">
<span class="badge bg-primary-soft"><span>Featured Example</span></span>
<small class="text-muted"><span>Just now</span></small>
</div>
<h4 class="h5 fw-bold mb-1"><span>Interactive Dashboard Card</span></h4>
<p class="text-muted small mb-3"><span>Responsive grid card with standard Boodoo utility classes.</span></p>
<div class="d-flex justify-content-between align-items-center">
<a href="#" class="btn btn-sm btn-primary"><span>Open Dashboard</span></a>
<span class="text-muted small"><span>Vanilla JS + CSS</span></span>
</div>
</div>Framework Starter Kits
Kickstart your modern web app using boodoo configured out of the box with your preferred framework or bundler:
Electron Desktop
Cross-platform desktop starter with frameless titlebar and native styling.
View Guide →Angular
Angular standalone component starter configured with boodoo CSS & plugins.
npx create-boodoo
Cordova & PhoneGap
Hybrid mobile app starter with deviceready lifecycle and native mobile styles.
npx create-boodoo
Meteor.js
Full-stack reactive web app with Meteor Blaze and boodoo framework styling.
npx create-boodoo
Photon Desktop UI
Desktop app starter styled with classic Photon macOS/Electron toolbar & panes.
View Docs →React Native Web
Universal web & mobile architecture using React Native Web and boodoo design tokens.
npx create-boodoo
React Native Mobile (iOS & Android)
Native mobile primitives, Paper theme adapter, and Expo starter template.
View Mobile Examples →Featured Templates
Each template is built with standard boodoo components and utility classes with zero third-party framework overhead:
| Template | Category | Description | Preview |
|---|---|---|---|
| Dashboard | Admin | Admin shell with sidebar navigation, metric cards, and responsive transaction tables. | Open |
| Pricing Table | SaaS | Three-tier subscription cards with highlight badge and detailed comparison table. | Open |
| Checkout Form | E-commerce | Billing and shipping address inputs, payment radio options, and order summary badge. | Open |
| Album & Gallery | Media | Photo portfolio layout with responsive card grids and drawer header. | Open |
| Blog Magazine | Content | Editorial publication layout with category scroller and featured stories. | Open |
| Sign-in Card | Auth | Centered authentication modal with floating labels and remember me option. | Open |
| Cover Splash | Landing | Fullscreen hero splash page with dark radial gradients and action buttons. | Open |
| Heroes Showcase | Layout | Collection of modern hero layouts: centered, two-column split, and dark cards. | Open |
| Features Grid | Layout | Column feature grids with icon boxes, hanging icons, and badge tags. | Open |
| Fixed Navbar | Navigation | Top-anchored fixed navigation bar with smooth mobile toggle drawer. | Open |
| Starter Template | Boilerplate | Minimal clean template to bootstrap any new web page. | Open |
Versioned Source Code Archive
You can download the full boodoo framework source code corresponding to the current release
(v1.3.1):
boodoo v1.3.1 Source Zip
Includes all Sass files, Less files, vanilla JS source modules, precompiled dist CSS and JS assets, and license.