---

Introduction

Welcome to shadcn_flutter, a cohesive UI ecosystem built on the shadcn/ui design system for Flutter applications across mobile, web, and desktop. Rather than a one‑to‑one design‑system port, this project focuses on delivering a consistent, production‑ready experience that feels at home on every platform.

Features

• 84 components and growing!
• Standalone ecosystem: zero dependency on material_ui or cupertino_ui; optional interop when needed.
• shadcn/ui design tokens and ready-to-use New York theme.
• Works inside MaterialApp and CupertinoApp; mix and match while you migrate.
• First-class support across Android, iOS, Web, macOS, Windows, and Linux.
• Various widget extensions for typography purposes.

Interop

shadcn_flutter is Material- and Cupertino-free. Two companion packages add them back when you need them:

Package	Add it when
shadcn_flutter	Always. Built on package:flutter/widgets.dart alone.
shadcn_flutter_material	You also use Material widgets — Scaffold, AppBar, showDialog, ScaffoldMessenger, Icons.
shadcn_flutter_cupertino	You also use Cupertino widgets — CupertinoPageScaffold, CupertinoNavigationBar, showCupertinoDialog, CupertinoIcons.

flutter pub add shadcn_flutter_material

MaterialShadcnApp is a drop-in replacement for ShadcnApp. It takes exactly the same parameters, registers the Material localizations, and installs the Theme, Material and ScaffoldMessenger ancestors that Material widgets need:

import 'package:material_ui/material_ui.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter_material/shadcn_flutter_material.dart';

void main() {
  runApp(
    MaterialShadcnApp(
      theme: ThemeData(colorScheme: ColorSchemes.lightZinc(), radius: 0.5),
      home: Scaffold(
        appBar: AppBar(title: const Text('Hybrid app')),
        body: const Center(child: PrimaryButton(child: Text('shadcn'))),
      ),
    ),
  );
}

The Material theme is derived from the shadcn theme, so it follows it automatically — including darkTheme and themeMode. Pass materialTheme to override that. If Material widgets appear in only one subtree, keep plain ShadcnApp and wrap that subtree in a MaterialLayer instead.

shadcn_flutter_cupertino mirrors all of this with CupertinoShadcnApp and CupertinoLayer. See the Material/Cupertino guide for the full migration table.

Components Library

Animation

Disclosure

Feedback

Forms

Layout

Navigation

Surfaces

Data Display

Utilities

LLMs Support

This repository includes a prebuilt, machine‑friendly reference file you can feed to LLMs and editor assistants:

• llms-full.txt - Full component reference with props, methods, and usage examples

Agent Skills

For compatible coding agents that support Agent Skills, you can install with this command:

npx skills add sunarya-thito/shadcn_flutter

FAQ

Does this replace Material/Cupertino?

Yes. shadcn_flutter is a standalone ecosystem built on the shadcn/ui design system, and depends on neither. Interop is optional — add shadcn_flutter_material or shadcn_flutter_cupertino so you can adopt it incrementally or go all‑in.

Where did Icons, MaterialPageRoute and SliverAppBar go?

They used to be re-exported from Material by this package. Now:

• Icons.x → LucideIcons.*, RadixIcons.* or BootstrapIcons.*, all bundled here; or Icons from shadcn_flutter_material to keep the Material set.
• MaterialPageRoute / MaterialPage → ShadcnPageRoute / ShadcnPage, both in this package.
• SliverAppBar → SliverPersistentHeader, or SliverAppBar from shadcn_flutter_material.

Can I use it with my existing MaterialApp/CupertinoApp?

Yes. Drop shadcn_flutter components into your app, keep your current routing (e.g., GoRouter) and state management, and migrate over time.

Does it support GoRouter?

Yes.

Which platforms are supported?

Android, iOS, Web, macOS, Windows, and Linux.

Can I use it commercially?

Yes. Free to use for personal and commercial projects. No attribution required.

Can I choose between Default and New York styles?

This package currently supports the New York style. If you need the default style of shadcn/ui, consider this package: flutter-shadcn-ui by @nank1ro.

Contributing & Support

We welcome contributions from the community! Here's how you can help make shadcn_flutter even better:

Ways to Contribute

Financial Support

• GitHub Sponsors - Support ongoing development
• PayPal - Support ongoing development
• Star the repository - Help us reach more developers
• Share the project - Spread the word in your community

Code Contributions

• Bug fixes - Help us squash those pesky bugs
• New features - Add components or enhance existing ones
• Documentation - Improve guides, examples, and API docs
• Testing - Write tests to improve reliability

Community Support

• Join our Discord - Get help and connect with other developers
• Help others - Answer questions and share your knowledge
• Write tutorials - Create blog posts or video tutorials

Recognition

This project is funded and maintained by the community. Every contribution, no matter how small, makes a difference and helps ensure the continued development of shadcn_flutter.

Thank you to all our contributors and supporters! 🙏

---