Shad Overview

Shad: shadcn/ui for Flutter

shad ports shadcn/ui's components and design system to Flutter. Every widget is a plain, fully customizable Flutter widget, themed by one ShadThemeData.

Import everything through one file:

import 'package:shad/shad.dart';

The least obvious part of the API: use ShadPadding instead of Flutter's Padding inside a shad-themed page. It has no plain constructor, only ShadPadding.all, .symmetric, .only, and .directional, and their arguments are steps on the theme's spacing scale, not logical pixels — ShadPadding.symmetric(horizontal: 6, vertical: 4) is shadcn's px-6 py-4, not 6px/4px. See layout.md for a full example.

Guides

• Installation: add the package, set up ShadApp, use a component.
• Theming: color schemes, component theme overrides, radius, focus rings, Material/Cupertino interop.
• Styles: the eight shadcn geometry presets (vega, nova, maia, lyra, mira, luma, sera, rhea).
• Typography: the text role scale and how to change the font.
• Layout: ShadRow, ShadColumn, ShadGap, ShadPadding.
• Form: ShadForm and the *FormField widgets.
• Responsive: the breakpoint scale, ShadResponsiveBuilder, context.breakpoint.
• Portal: the overlay primitive behind popovers, selects, and menus.

Components

Each component page shows the actual example source bundled with the example app, so it cannot drift from the code that runs.

Basic setup

A complete counter app with light and dark theme support:

import 'package:flutter/widgets.dart';
import 'package:shad/shad.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ShadApp(
      theme: ShadThemeData(
        brightness: Brightness.light,
        colorScheme: const ShadZincColorScheme.light(),
      ),
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadZincColorScheme.dark(),
      ),
      themeMode: ThemeMode.system,
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
              style: theme.textTheme.muted,
            ),
            Text('$_counter', style: theme.textTheme.h1),
            const SizedBox(height: 16),
            ShadButton(
              onPressed: () => setState(() => _counter++),
              child: const Icon(LucideIcons.plus),
            ),
          ],
        ),
      ),
    );
  }
}

Packages re-exported by shad

shad's public API (package:shad/shad.dart) re-exports the parts of a few libraries that its own component signatures depend on, so callers do not need a second dependency just to pass an argument shad asks for.

• flutter_animate: the effects: parameter on ShadPopover, ShadSelect, ShadAccordion, ShadMenubar, and similar components takes a List<Effect> (aliased as AnimateEffect).
• lucide_icons_flutter: the icon set used throughout the library and its examples, exposed as LucideIcons.*. Browse the icons here.
• two_dimensional_scrollables: ShadTable builds on TableView, so ShadTableCell extends its TableViewCell.
• intl: DateFormat and NumberFormat are used by the calendar, date picker, and pagination widgets.