Skip to main content
Official Examples & Templates

Build anything with boodoo

Quickly get a project started with any of our examples ranging from using parts of the framework to complete templates and modern framework starter kits.

๐Ÿ“Š ADMIN APP

Sidebar + Metrics + Table

Dashboard

Basic admin dashboard shell with responsive collapsable sidebar navigation, financial metric counters, and transactions data table.

๐Ÿ’ณ COMMERCE

Three Tiers + Feature Table

Pricing Table

Clean SaaS subscription pricing cards featuring highlighted popular tier, responsive column grid, and detailed feature comparison table.

๐Ÿ›’ FORMS

Billing + Order Summary

Checkout Form

Custom form controls, floating input groups, validation attributes, radio payment selectors, and sticky cart summary list.

๐Ÿ–ผ๏ธ GALLERY

Responsive Card Grid

Album & Portfolio

Simple photo and project gallery template with lead hero, responsive card grid, action buttons, and slide-down collapse drawer.

๐Ÿ“ฐ EDITORIAL

Magazine Header + Sticky Sidebar

Blog Magazine

Editorial layout with custom header branding, category horizontal scroller, jumbo lead featured post, and sticky sidebar widget.

๐Ÿ” AUTH

Centered Floating Form

Sign-in Card

Custom form layout with floating labels, remember me checkbox, brand avatar badge, and clean centered card elevation.

๐ŸŒŒ MINIMAL

Fullscreen Splash Page

Cover

A one-page template for building simple and beautiful full-height splash pages with navbar header and footer.

๐Ÿš€ HEROES

Centered, Split & Elevated

Heroes Collection

Display prominent landing headers with centered banners, two-column split mockups, and dark elevated surfaces.

โœจ HIGHLIGHTS

Feature Columns & Icons

Features Grid

Showcase product capabilities with iconic columns, hanging icon blocks, and soft-colored badge markers.

๐Ÿ“Œ NAVBAR

Fixed Top Sticky Bar

Fixed Navbar

Demonstrating top fixed position header with mobile collapse menu, body offset padding, and search input group.

๐Ÿ STARTER

Clean Scaffold

Starter Template

Minimal responsive starter boilerplate with container, grid cards, header, and footer ready for rapid prototyping.

STARTER KITS

Framework & Build Tool Starters

Ready-to-use application boilerplates configured with boodoo CSS & vanilla JS for your favorite toolchains.

โš›๏ธ

React + Vite

React 18/19 Single Page Application configured with Vite, HMR, and boodoo styles.

Download Starter .zip npm install && npm run dev
๐ŸŸข

Vue 3 + Vite

Vue 3 SFC application with Vite build toolchain and boodoo component classes.

Download Starter .zip npm install && npm run dev
โ–ฒ

Next.js App Router

Server-rendered Next.js project with zero runtime CSS configuration.

Download Starter .zip npm install && npm run dev
๐ŸŒ

HTML5 + CDN

Zero build tools needed. Pure static HTML file loading from the fast CDN.

Download Starter .zip Open index.html directly

How to install & import boodoo in your project

Whether you use npm, pnpm, or CDN, getting started takes seconds:

// 1. Install via npm
$ npm install boodoo
// 2. Import CSS in your root file (main.jsx, main.js, or layout.jsx)
import 'boodoo/dist/css/boodoo.min.css';
// 3. Optional: Import vanilla JS components
import 'boodoo/dist/js/boodoo.esm.js';
VERSIONED SOURCE REPOSITORY

Need the full framework source?

Download the complete boodoo v1.0.5 distribution archive including Sass, Less, vanilla JS modules, compiled assets, and test benches.