bloomBUILD•SHIP•BLOOM
Getting StartedInstallation
.md

Installation

Get started with Bloom UI in less than 2 minutes. Choose between the shadcn-style CLI workflow (where you own the component code) or the standard pub.dev package.

1

Option 1: CLI Workflow (Recommended)

The Bloom CLI manages design tokens, installs individual primitives directly into your lib/bloom_ui/ folder, and ensures zero runtime dependencies.

1. Activate the Bloom CLI globally:

dart pub global activate bloom_cli

2. Initialize Bloom UI in your Flutter project:

Run this command in the root of your Flutter project. It will prompt you for your preferred style theme (Nova, Vega, Maia, etc.) and write the base token system to lib/bloom_ui/theme/.

bloom ui init

3. Add components as needed:

# Add individual components
bloom ui add button card dialog chart
# Or add all 60+ components at once
bloom ui add all
2

Option 2: Pub.dev Package

If you prefer managing Bloom UI as a standard pub.dev package:

flutter pub add bloom_ui

Setup Theme & Extensions

Wrap your root MaterialApp with the BloomTheme extension in your lib/main.dart:

lib/main.dart
dart
import 'package:flutter/material.dart';
import 'package:bloom_ui/bloom_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Bloom App',
      theme: ThemeData(
        brightness: Brightness.light,
        extensions: const [BloomTheme.light], // or BloomTheme.novaLight, vegaLight, etc.
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        extensions: const [BloomTheme.dark],
      ),
      home: const HomeScreen(),
    );
  }
}

bloom.config.json

The bloom.config.json file at the root of your project defines your target directory, style preset, and custom aliases:

bloom.config.json
json
{
  "$schema": "https://bloom.dev/schema.json",
  "style": "nova",
  "rsc": false,
  "aliases": {
    "components": "lib/bloom_ui/primitives",
    "theme": "lib/bloom_ui/theme",
    "utils": "lib/bloom_ui/utils"
  }
}
Previous: IntroductionNext: Theming & Tokens