shad 1.0.2

A high-fidelity Flutter port of shadcn/ui: 40+ components, all eight shadcn styles and 16 color schemes, with no Material or Cupertino dependency.

shad

A Flutter port of shadcn/ui. shad provides more than 40 components as plain Flutter widgets, themed by one ShadThemeData, with no dependency on Material or Cupertino.

Live component browser and docs: https://shad.serverpod.dev/

Features

• Components. Buttons, forms, dialogs, sheets, menus, a sidebar, a data table, and more. Every component is a regular StatelessWidget or StatefulWidget, so it composes with the rest of your widget tree.
• Styles. The eight named shadcn/ui styles (vega, nova, maia, lyra, mira, luma, sera, rhea) are complete presets for control size, radius, shadows, and type. You switch between them with one line.
• Color schemes. 16 palettes ship in light and dark, and you can define your own.
• Theming. One ShadThemeData resolves color, typography, radius, spacing, and every component's own theme. You can override any level without losing the rest.
• Forms. ShadForm and a *FormField widget for every input, with per-field validation.
• Localization. 82 locales, built on slang.
• Material and Cupertino interop, opt-in. package:shad/material.dart themes Material and Cupertino widgets from the shad theme, so both widget sets can share one page.

Installation

flutter pub add shad

Usage

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(),
        style: ShadStyleTokens.nova,
      ),
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadZincColorScheme.dark(),
        style: ShadStyleTokens.nova,
      ),
      themeMode: ShadThemeMode.system,
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ShadCard(
        width: 320,
        title: const Text('Create project'),
        description: const Text('Deploy your new project in one click.'),
        footer: ShadButton(
          onPressed: () {},
          child: const Text('Deploy'),
        ),
        child: const ShadInput(placeholder: Text('Name of your project')),
      ),
    );
  }
}

The live docs give the full component reference. Each page pairs a live preview with the exact source that renders it. The site also has guides on theming, styles, layout, forms, and responsive design.

Fonts

shad bundles no fonts. Text uses the platform's font (SF on Apple platforms, Roboto on Android, Segoe UI on Windows) until you choose another one. There are two ways to choose:

Google Fonts, fetched at runtime:

flutter pub add google_fonts

ShadThemeData(
  textTheme: ShadTextTheme.fromGoogleFont(GoogleFonts.inter),
)

Pass a static tear-off such as GoogleFonts.inter. If you wrap GoogleFonts.getFont(name) in a closure, create it once and reuse it. A new closure on every build makes the theme unequal to itself, which restarts the theme animation on every rebuild.

Your own font files: add the files to your app, declare them in your pubspec.yaml, and name the family:

flutter:
  fonts:
    - family: Inter
      fonts:
        - asset: fonts/Inter[opsz,wght].ttf

ShadThemeData(
  textTheme: ShadTextTheme(family: 'Inter'),
)

shadcn/ui's own default font is Inter. The Vercel look is Geist and Geist Mono.

Material and Cupertino

package:shad/shad.dart does not import Material or Cupertino, which Flutter is moving out of the SDK into the material_ui and cupertino_ui packages. To use Material or Cupertino widgets in a shad app, also import package:shad/material.dart and wrap the app in a ShadMaterial:

import 'package:shad/material.dart';
import 'package:shad/shad.dart';

ShadApp(
  builder: (context, child) => ShadMaterial(child: child!),
  home: const HomePage(),
)

ShadMaterial derives a Material theme from the shad theme. It also adds the Material and Cupertino localizations and a transparent Material, which widgets such as TextField and Slider need. To put shad widgets inside your own MaterialApp, use ShadApp.custom and shadMaterialThemeFrom(ShadTheme.of(context)). package:shad/material.dart uses the Material and Cupertino libraries that ship in the Flutter SDK.

Platform support

Android, iOS, macOS, Windows, Linux and the web, including WebAssembly. The package needs Flutter 3.41 or later.

Versioning

shad follows semantic versioning from 1.0:

• A breaking API change happens only in a major version. A renamed or removed member first stays as @Deprecated for at least the rest of that major version, with a data-driven fix, so dart fix --apply migrates your code.
• A visual change that brings a component closer to shadcn/ui is a bug fix, not a breaking change.

Upgrading from 0.x? See MIGRATION.md.

Not yet available

These shadcn/ui components have no shad equivalent yet: navigation menu, hover card, drawer, carousel, chart, combobox (partly covered by ShadSelect.withSearch), aspect ratio, native select, and the layout primitives button group, input group, field and item. The issue tracker is the place to ask for one.

Repository layout

Path	Contents
lib/	The shad package.
example/	The live docs site and component browser deployed to GitHub Pages. It is also a reference for how to structure an app around shad.
test/	The package's test suite.
skills/shad-overview/	An Agent Skill describing shad's API, for coding agents.

Contributing

Contributions are welcome. See CONTRIBUTING.md for how to set up the project, run the test suite, and open a pull request. To report a security problem, see SECURITY.md.

Credits

shad began as flutter-shadcn-ui by Alexandru Mariuti. It is now maintained by Serverpod.

License

MIT