Shadcn Flutter

Getting Started

1. Add the dependency:
   shell

   flutter pub add shadcn_flutter

2. Configure your

   main.dart

   :
   dart

   import 'package:shadcn_flutter/shadcn_flutter.dart';
   
   void main() {
     runApp(
       ShadcnApp(
         title: 'My App',
         theme: ThemeData(
           colorScheme: ColorSchemes.darkSlate,
           radius: 0.5,
         ),
         home: const MyHomePage(),
       ),
     );
   }
   
   class MyHomePage extends StatelessWidget {
     const MyHomePage({super.key});
   
     @override
     Widget build(BuildContext context) {
       return const Scaffold(
         child: Center(
           child: Text('Hello World!').h1(),
         ),
       );
     }
   }

Guides

Components

Animation

Control

Disclosure

Display

Feedback

Form

Layout

Navigation

Overlay

Utility

[!TIP] This is a curated list. For the full list of all 100+ components, check the components directory.

Interactive Usage Tips

1. Wait for Interaction: When using

   Popover

   or

   Dialog

   , prefer using the provided controllers for programmatic access.
2. Lean on Extensions: Use

   .h1()

   ,

   .p()

   ,

   .iconSmall()

   etc., instead of manually configuring

   TextStyle

   or

   size

   .
3. Density Matters: Use

   DensityContainer

   or

   theme.density

   to ensure spacing is consistent across platform-specific densities.