shadcn_ui-getting-started

Shadcn UI for Flutter — Getting Started

Instructions

Installation

From the project root:

flutter pub add shadcn_ui

Or add to pubspec.yaml:

dependencies:
  shadcn_ui: ^0.2.4  # use latest version

Shadcn only (pure)

Use ShadApp for apps that use only Shadcn UI components (no Material/Cupertino):

import 'package:shadcn_ui/shadcn_ui.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ShadApp();
  }
}

For declarative routing use ShadApp.router.

Shadcn + Material

Use ShadApp.custom with appBuilder to wrap MaterialApp and use shadcn and Material together. Wrap the app with ShadAppBuilder in the builder:

import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:flutter/material.dart';

return ShadApp.custom(
  themeMode: ThemeMode.dark,
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(),
  ),
  appBuilder: (context) {
    return MaterialApp(
      theme: Theme.of(context),
      builder: (context, child) {
        return ShadAppBuilder(child: child!);
      },
    );
  },
);

Use MaterialApp.router when using the Router API.

ShadApp builds a default Material ThemeData from ShadThemeData (fontFamily, extensions, colorScheme mapping, dividerTheme, textSelectionTheme, iconTheme, scrollbarTheme). Override with Theme.of(context).copyWith(...) without losing shadcn defaults.

Shadcn + Cupertino

Use CupertinoApp inside appBuilder for Cupertino + shadcn:

import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

return ShadApp.custom(
  themeMode: ThemeMode.dark,
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(),
  ),
  appBuilder: (context) {
    return CupertinoApp(
      theme: CupertinoTheme.of(context),
      localizationsDelegates: const [
        DefaultMaterialLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
        DefaultWidgetsLocalizations.delegate,
      ],
      builder: (context, child) {
        return ShadAppBuilder(child: child!);
      },
    );
  },
);