Bricolage UI

Production-ready Flutter components that you own

Stop fighting with boilerplate. Build your Design System in minutes, not months.

Live Demo • Documentation • CLI Tool

The shadcn/ui philosophy, adapted for Flutter.

---

See It In Action

Build a polished login page in under 2 minutes — from flutter create to production-ready UI.

Bricolage_UI_demo.mp4

Install CLI → Add components → Build your page → Done!

Table of Contents

• Stop Writing Boilerplate
• Quick Start
• Why CLI-First?
• Architecture
• Real-World Example
• By The Numbers
• 10-Second Theming
• Available Components
• Package Mode
• Repository Structure
• Contributing
• Links

---

Stop Writing Boilerplate

Compare raw Flutter to Bricolage UI. Same result, 90% less code.

Raw Flutter (40+ lines)	Bricolage UI (4 lines)
Container(   decoration: BoxDecoration(     borderRadius: BorderRadius.circular(8),     border: Border.all(color: Colors.grey),   ),   child: TextField(     decoration: InputDecoration(       labelText: 'Email',       hintText: '[email protected]',       border: InputBorder.none,       contentPadding: EdgeInsets.all(16),       // ... 30 more lines     ),   ), )	CustomTextField(   label: 'Email',   placeholder: '[email protected]', )

---

Quick Start (60 seconds)

# 1. Install CLI
dart pub global activate bricolage_ui_cli

# 2. Initialize in your project
cd your_flutter_app
bricolage_ui init

# 3. Add components
bricolage_ui add button textfield card

# 4. Start building
# Components are now in lib/components/ - they're yours to customize!

That's it! The components are now in your project. No external dependencies, full customization.

You can even uninstall the CLI after generating components - the code is yours to keep.

---

Why CLI-First?

Unlike traditional packages, Bricolage UI copies source code directly into your project. This gives you complete control and zero runtime overhead.

Feature	CLI (Production)	Package (Prototype)
Code Ownership	Code lives in your project	External dependency
Customization	Modify anything freely	Limited to exposed props
Runtime Deps	Zero dependencies	Package adds to bundle
Version Control	Track component changes	Package version only
Bundle Size	Only what you use	Entire package
Future-Proof	Delete CLI anytime	Tied to package updates

Think of it like shadcn/ui: Components become part of your codebase, not an external dependency you're locked into.

---

Architecture: The Missing Layer

Bricolage UI acts as a semantic bridge between your business logic and Flutter's rendering layer, letting you focus on features instead of styling boilerplate.

How it works:

• Your Client App handles business logic, validation, and state management
• Bricolage UI Interface provides the design system (components, tokens, themes, layouts)
• Flutter Framework renders everything using Material/Cupertino widgets
• CLI Tool injects component code directly into your project

Result: Your ViewModels stay clean. Your Views stay simple. Your app ships faster.

---

Real-World Example

// Your LoginScreen stays focused on logic
class LoginView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final vm = context.watch<LoginViewModel>();

    return Scaffold(
      appBar: CustomAppBar(title: 'Login'),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            CustomTextField(
              label: 'Email',
              errorText: vm.emailError,
              onChanged: vm.setEmail,
            ),
            SizedBox(height: 16),
            CustomTextField(
              label: 'Password',
              isPassword: true,
              errorText: vm.passwordError,
              onChanged: vm.setPassword,
            ),
            SizedBox(height: 24),
            CustomButton(
              text: 'Sign In',
              isLoading: vm.isSubmitting,
              onPressed: vm.submit,
            ),
          ],
        ),
      ),
    );
  }
}

No boilerplate. No styling chaos. Just clean, readable code.

---

By The Numbers

• 40+ Components - Everything from buttons to data tables
• Zero Dependencies - CLI mode adds no runtime overhead
• 100% Customizable - Code lives in your project
• Accessibility First - WCAG compliant out of the box
• Theme System - 40+ color tokens, typography scales
• 5 Preset Layouts - Dashboard, Profile, Feed, Form, Settings

---

10-Second Theming

Don't settle for Material Blue. Bricolage UI comes with 12+ professional presets, or build your own.

Default	Neo-Brutalism	Cyberpunk	Bento/iOS
Clean SaaS aesthetic	Gumroad/Notion style	Dev tools & CLI apps	Apple-inspired squircles

Also available: Bubblegum, Vintage, Amethyst, Spring, Monochrome, Retro Windows

How it works:

1. Pick a preset in the web preview dropdown
2. Customize colors, typography, spacing, and visual effects
3. Export → Theme is generated as a single unified theme.dart file
4. Copy-paste the generated file into your project's lib/theme/ folder

// Your exported theme (lib/theme/theme.dart)
class UIColors {
  static const Color primary = Color(0xFFFFE600);    // Neo-Brutalism yellow
  static const Color background = Color(0xFFFFFBEB); // Warm white
  static const Color border = Color(0xFF000000);     // Sharp black borders
  // ... all your customized colors
}

class UITypography {
  static const double fontSizeBase = 16.0;
  // ... typography settings
}

class UIRadius {
  static const double md = 8.0;
  // ... radius values
}
// ... and more theme classes in one file

---

Visual Effects

Apply professional visual effects to any component. All effects are customizable and work seamlessly with any theme.

Glassmorphism	Neumorphism	Gradient	Border Glow
Frosted glass with backdrop blur	Soft shadows and highlights	Smooth color transitions	Glowing animated borders

Also available: Pulse, Floating, Tilt Hover, Hard Shadows, and Hover Animations

How to use:

1. Enable effects in the Effects tab of the web preview
2. Adjust parameters like blur intensity, glow color, gradient angles
3. Mix and match - combine multiple effects for unique designs
4. Export → All effect settings are included in your theme.dart file

Effects automatically work with buttons, cards, textfields, alerts, chips, and dashboard components.

---

Recommended: CLI Tool (Production Mode)

The Bricolage UI CLI is the recommended approach for production applications. It copies component source code directly into your project.

Installation:

dart pub global activate bricolage_ui_cli

Usage:

bricolage_ui init                    # Setup your project
bricolage_ui add button card dialog  # Copy specific components
bricolage_ui add-all                 # Or get all 40+ components
bricolage_ui list                    # View all 40+ components

Available Components (40+)

Inputs TextField TextArea Checkbox Radio Switch Select Slider Dropdown	Feedback Alert Toast Dialog Spinner Progress Skeleton Badge	Navigation AppBar BottomNavBar Tabs Breadcrumb Pagination Divider
Layout Card Accordion BottomSheet Table	Display Avatar Chip Tooltip Empty Popover	Forms FormField ToggleGroup Select

→ View full component gallery

---

Alternative: Package Mode (Rapid Prototyping)

Use the traditional package for quick mockups and demos where customization isn't critical.

Installation:

flutter pub add bricolage_ui

Usage:

import 'package:bricolage_ui/bricolage_ui.dart';

// Use components directly
CustomButton(
  text: 'Click Me',
  onPressed: () {},
)

When to use Package Mode:

• Building quick prototypes or demos
• Testing UI concepts rapidly
• Don't need extensive customization
• Prefer convenience over control

---

Repository Structure

Project	Description	Links
CLI Tool	Production-ready component generator	README • pub.dev
Package	Rapid prototyping library	pub.dev
Web Preview	Interactive component customizer & theme editor	Demo • README
Docs	Full documentation site	Docs • README

bricolage_ui_cli/

CLI tool for production development. Copy components into your project with full customization control.

bricolage_ui/

Component library package for rapid prototyping and demos.

bricolage_ui_preview/

Interactive web application for customizing and previewing components in real-time.

Features:

• Customize theme (colors, typography, spacing, radius, shadows, fonts)
• Preview components on mobile/desktop frames
• 5 preset UI layouts (Dashboard, Profile, Feed, Form, Settings)
• Popular app theme presets (Netflix, Spotify, Amazon, etc.)
• Export customized theme files as ZIP

Live Demo: https://bricolage-ui.vercel.app

bricolage_ui_docs/

Complete documentation website built with VitePress, featuring detailed component documentation, installation guides, and theming instructions.

Features:

• Comprehensive component documentation with API references
• Getting started guides and installation instructions
• CLI vs Package mode comparison
• Theming and customization guides
• Search functionality and responsive design

---

Contributing

We welcome contributions! Whether you want to:

• Add new components
• Improve existing components
• Fix bugs or improve documentation
• Add new theme presets

Check out our Contributing Guide to get started.

Ways to contribute:

• Report issues on GitHub
• Submit pull requests for new components
• Improve documentation
• Share feedback and feature requests

---

Links

• Documentation: https://docs-bricolage-ui.vercel.app
• CLI Tool: pub.dev/packages/bricolage_ui_cli
• Package: pub.dev/packages/bricolage_ui
• Live Demo: bricolage-ui.vercel.app
• GitHub: github.com/TejasS1233/bricolage-ui

---

Ready to build faster?

Get Started • View Demo • Star on GitHub

For Flutter developers who value their time