Loading...
Loading...
Install and set up Flutter Shadcn UI (shadcn_ui), configure ShadApp with Material or Cupertino, and use bundled packages. Use when starting a Flutter project with shadcn_ui, adding shadcn_ui dependency, or integrating Shadcn with MaterialApp/CupertinoApp.
npx skill4agent add serverpod/skills-registry shadcn_ui-getting-startedflutter pub add shadcn_uipubspec.yamldependencies:
shadcn_ui: ^0.2.4 # use latest versionShadAppimport 'package:shadcn_ui/shadcn_ui.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return ShadApp();
}
}ShadApp.routerShadApp.customappBuilderMaterialAppShadAppBuilderimport '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!);
},
);
},
);MaterialApp.routerThemeDataShadThemeDataTheme.of(context).copyWith(...)CupertinoAppappBuilderimport '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!);
},
);
},
);CupertinoApp.routerCupertinoTheme.of(context).copyWith(...)List<Effect>LucideIconsLucideIcons.activityShadTableShadAvatar