// A comprehensive UI ecosystem for Flutter built on the shadcn/ui design system.
| name | shadcn-flutter |
| description | A comprehensive UI ecosystem for Flutter built on the shadcn/ui design system. |
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.
To set up a fresh Flutter application with Shadcn Flutter:
Add the dependency:
flutter pub add shadcn_flutter
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(),
),
);
}
}
Learn the core concepts and design system fundamentals.
| Name | Description | Path |
|---|---|---|
| Introduction | Overview of the ecosystem, features, and FAQ. | guides/introduction.md |
| Installation | Step-by-step setup for stable and experimental versions. | guides/installation.md |
| Theming | Customizing tokens like radius, density, and scaling. | guides/theming.md |
| Colors | Using the Tailwind-based color palette and ColorShades. | guides/colors.md |
| Typography | Semantic text styles and widget extensions. | guides/typography.md |
| Layout | Spacing, gaps, and responsive layout helpers. | guides/layout.md |
| Icons | Accessing the 10,000+ bundled icons (Lucide, Radix, etc). | guides/icons.md |
| Interop | Using Material and Cupertino widgets incrementally. | guides/interop.md |
| State Management | Guide to the built-in Data and Model state system. | guides/state_management.md |
| Web Preloader | Customizing the loading experience for web apps. | guides/web_preloader.md |
Shadcn Flutter features over 100+ high-quality components. Below are the core categories.
| Component | Path |
|---|---|
| Number Ticker | components/animation/number_ticker.md |
| Component | Path |
|---|---|
| Button | components/control/button.md |
| Component | Path |
|---|---|
| Accordion | components/disclosure/accordion.md |
| Collapsible | components/disclosure/collapsible.md |
| Component | Path |
|---|---|
| Avatar | components/display/avatar.md |
| Chat Bubble | components/display/chat.md |
| Code Snippet | components/display/code_snippet.md |
| Table | components/display/table.md |
| Tracker | components/display/tracker.md |
| Component | Path |
|---|---|
| Alert | components/feedback/alert.md |
| Alert Dialog | components/feedback/alert_dialog.md |
| Progress | components/feedback/progress.md |
| Skeleton | components/feedback/skeleton.md |
| Toast | components/feedback/toast.md |
| Component | Path |
|---|---|
| AutoComplete | components/form/autocomplete.md |
| Checkbox | components/form/checkbox.md |
| Chip Input | components/form/chip_input.md |
| Color Picker | components/form/color_picker.md |
| Date Picker | components/form/date_picker.md |
| Form | components/form/form.md |
| Formatted Input | components/form/formatted_input.md |
| Text Input | components/form/input.md |
| Input OTP | components/form/input_otp.md |
| Item Picker | components/form/item_picker.md |
| Phone Input | components/form/phone_input.md |
| Radio Group | components/form/radio_group.md |
| Select | components/form/select.md |
| Slider | components/form/slider.md |
| Star Rating | components/form/star_rating.md |
| Switch | components/form/switch.md |
| Text Area | components/form/text_area.md |
| Time Picker | components/form/time_picker.md |
| Component | Path |
|---|---|
| Card | components/layout/card.md |
| Card Image | components/layout/card_image.md |
| Carousel | components/layout/carousel.md |
| Divider | components/layout/divider.md |
| Resizable | components/layout/resizable.md |
| Scaffold | components/layout/scaffold.md |
| Sortable | components/layout/sortable.md |
| Stepper | components/layout/stepper.md |
| Steps | components/layout/steps.md |
| Timeline | components/layout/timeline.md |
| Component | Path |
|---|---|
| Breadcrumb | components/navigation/breadcrumb.md |
| Dot Indicator | components/navigation/dot_indicator.md |
| Menubar | components/navigation/menubar.md |
| Navigation Menu | components/navigation/navigation_menu.md |
| Pagination | components/navigation/pagination.md |
| Switcher | components/navigation/switcher.md |
| Tab List | components/navigation/tab_list.md |
| Tab Pane | components/navigation/tab_pane.md |
| Tabs | components/navigation/tabs.md |
| Tree | components/navigation/tree.md |
| Component | Path |
|---|---|
| Dialog | components/overlay/dialog.md |
| Drawer | components/overlay/drawer.md |
| Hover Card | components/overlay/hover_card.md |
| Popover | components/overlay/popover.md |
| Swiper | components/overlay/swiper.md |
| Tooltip | components/overlay/tooltip.md |
| Window | components/overlay/window.md |
| Component | Path |
|---|---|
| Badge | components/utility/badge.md |
| Calendar | components/utility/calendar.md |
| Chip | components/utility/chip.md |
| Command | components/utility/command.md |
| Context Menu | components/utility/context_menu.md |
| Dropdown Menu | components/utility/dropdown_menu.md |
| Overflow Marquee | components/utility/overflow_marquee.md |
| Refresh Trigger | components/utility/refresh_trigger.md |
[!TIP] This is a curated list. For the full list of all 100+ components, check the components directory.
Popover or Dialog, prefer using the provided controllers for programmatic access..h1(), .p(), .iconSmall() etc., instead of manually configuring TextStyle or size.DensityContainer or theme.density to ensure spacing is consistent across platform-specific densities.