shad-overview

name	shad-overview
description	A Flutter UI library that ports shadcn/ui's components, styles, and theming. Provides accessible, fully customizable widgets (Button, Card, Form, Sidebar, and more) plus theming, layout, and typography guides. Use this skill when building a Flutter UI, implementing a design system, or looking up how to use a specific `shad` component.

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

Name	Description	Reference
Accordion	A vertically stacked set of interactive headings that each reveal a section of content.	accordion.md
Alert	Displays a callout for user attention.	alert.md
Avatar	An image element with a fallback for representing the user.	avatar.md
Badge	Displays a badge or a component that looks like a badge.	badge.md
Breadcrumb	Displays the path to the current resource using a hierarchy of links.	breadcrumb.md
Button	Displays a button or a component that looks like a button. Six variants share one API.	button.md
Calendar	A component that allows users to select dates: single, multiple, or a range.	calendar.md
Card	Displays a card with title, description, content, and footer.	card.md
Checkbox	A control that allows the user to toggle between checked and not checked.	checkbox.md
Collapsible	An interactive component that expands and collapses a panel.

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.