Shadcn Flutter

Shadcn Flutter

A cohesive UI ecosystem for Flutter—components, theming, and tooling—ready to ditch Material and Cupertino. Built with modern design tokens and high-quality widgets across mobile, web, and desktop.

Getting Started

To set up a fresh Flutter application with Shadcn Flutter:

1. Add the dependency:

   flutter pub add shadcn_flutter
   

2. Configure your main.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

Learn the core concepts and design system fundamentals.

Components

Shadcn Flutter features over 100+ high-quality components. Below are the core categories.

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.