nank1ro/flutter-shadcn-ui
70.8
Strong · 23 September 2026
46.3k
lines of production code
Dart
primary language
5
measurements over time
What this system is
This system is a Flutter library and CLI tool that provides a comprehensive suite of customizable, theme-aware UI components inspired by Shadcn/ui. It enables developers to integrate these widgets directly into their source code without external library dependencies, offering extensive support for forms, data display, and navigation. The system includes a robust theming architecture with multiple color schemes, internationalization for 82 languages, and utilities for responsive layouts and animations.
How it got here
2024 — Initial library scaffolding and component release
23 changes.
This period established the foundational structure of the shadcn\_ui Flutter library, including project configuration, build systems, and the initial release of core UI components. It introduced a comprehensive theming architecture with multiple color schemes and text styles, alongside essential utility classes for animations, responsiveness, and state management. The work also delivered an interactive playground and example applications to demonstrate and test the newly created widgets and form integrations.
2025–2026 — CLI release and internationalization
7 changes.
This period focused on launching the shadcn\_ui CLI tool for direct component installation and establishing comprehensive localization infrastructure for 82 languages. Significant effort was also dedicated to expanding test coverage for core UI components and theme logic, alongside adding web-specific clipboard support and automation scripts for documentation.
Features
Added localization infrastructure and initial translations for 82 languages
The \lib/src/i18n\ directory now contains the complete localization setup for the Shad UI library. This includes YAML source files for 82 languages (such as English, German, Arabic, and Japanese) covering time picker, date picker, input, and keyboard toolbar strings. These sources are processed by the \slang\ code generator to produce the corresponding Dart localization classes (e.g., \strings.g.dart\) and a \GlobalShadLocalizations\ delegate that handles locale resolution and deferred loading. This change provides the foundational infrastructure for internationalization, enabling the application to display UI text in the user's preferred language.
lib/src/i18n · high confidence
Added web entry point and manifest for the playground
The playground now includes the necessary \index.html\ and \manifest.json\ files to run as a web application. This adds support for serving the app via a web browser, including configuration for the base href, loading the Flutter engine, and defining app metadata such as icons and theme colors for mobile and desktop browsers.
playground/web · high confidence
Expanded UI component examples in the documentation app
The example application now includes dedicated pages for a wide range of Shadcn UI components, providing users with interactive demos and configuration options. New additions include Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Context Menu, Dialog, IconButton, Input, and various form fields (Checkbox, Date Picker, Input, Date Range Picker). The diff also introduces pages for Date Picker, Dialog, IconButton, Input, and Input OTP, alongside form field variants for Checkbox, Date Picker, and Input. These pages demonstrate component usage, state management, and theming capabilities directly within the example app.
example/lib/pages · high confidence
Initial example project scaffolding
The example directory has been initialized with a standard Flutter project structure, including configuration files for version control (.gitignore), Flutter tooling (.metadata), analysis (analysis\_options.yaml with solidart\_lint integration), and DevTools (devtools\_options.yaml).
example · high confidence
Initial playground project scaffolding and Firebase hosting configuration
The playground location has been initialized as a new Flutter application, adding standard project files such as .firebaserc, .gitignore, .metadata, README.md, analysis\_options.yaml, and devtools\_options.yaml. Additionally, a firebase.json configuration file has been added to set up Firebase Hosting, pointing the public directory to build/web and configuring a rewrite rule to serve index.html for all routes, enabling the playground to be deployed and accessed via a web browser.
playground · high confidence
Initial release of Shad UI component library
This change introduces the complete set of UI components for the Shad library, including Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Context Menu, and many others. Users can now build interfaces using these customizable, theme-aware widgets that support variants, sizes, and extensive styling options via ShadTheme.
lib/src/components · high confidence
Initial release of the shadcn\_ui CLI tool
The CLI package is introduced as a new tool that allows users to install shadcn\_ui components directly into their source code without adding a library dependency. This initial version includes the core CLI entry point, a comprehensive set of UI components (such as buttons, dialogs, forms, and tables), theme configuration files, and utility helpers, along with standard project metadata like the MIT license and changelog.
cli · high confidence
Initial release of the shadcn\_ui Flutter library
This entry introduces the complete shadcn\_ui component library for Flutter, providing a comprehensive set of UI widgets including forms, data display, navigation, and feedback components. The library exports a wide range of features such as accordion, alert, avatar, badge, breadcrumb, button, calendar, card, checkbox, context menu, date picker, dialog, form fields (checkbox, date picker, input, input OTP, radio, select, switch, textarea, time picker), icon button, input, menubar, popover, progress, radio, resizable, select, separator, sheet, slider, sonner, switch, table, tabs, textarea, time picker, toast, and tooltip. It also includes theme support with multiple color schemes (base, blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, zinc) and component-specific themes, along with localization support, utility functions, and integration with external packages like flutter\_animate, intl, lucide\_icons\_flutter, two\_dimensional\_scrollables, and universal\_image.
lib · high confidence
Introduce interactive playground for live component previews
The playground application has been added to provide an interactive environment for testing and previewing Shadcn UI components. It features a dynamic theme system that supports switching between light and dark modes, as well as selecting from multiple color schemes (such as zinc, blue, slate, and others) via URL parameters or messages from the parent documentation site. The app includes a comprehensive router with dedicated pages for a wide range of components including buttons, inputs, dialogs, sheets, tables, and forms, allowing users to view and interact with these elements in real-time.
playground/lib · high confidence
Introduces themeable component definitions for Accordion, Alert, Avatar, Badge, Breadcrumb, Button, and Calendar
This change adds the theme definition files (and their generated counterparts) for several UI components, including Accordion, Alert, Avatar, Badge, Breadcrumb, Button, ButtonSizes, and Calendar. These new \Shad\*Theme\ classes allow users to customize the appearance of these components—such as colors, padding, text styles, and sizes—through a centralized theme configuration. The generated code provides \lerp\, \copyWith\, and \merge\ methods to support theme inheritance and dynamic updates.
lib/src/theme/components · high confidence
Introduction of ShadApp as the central application entry point
The library now provides a \ShadApp\ widget in \lib/src/app.dart\ to serve as the root of the application, replacing or supplementing the previous entry mechanism. This widget manages the integration of Shad theme data (including light/dark modes), localizations, and scroll behavior. It supports three distinct modes via constructors: \ShadApp\ for standard navigation, \ShadApp.router\ for router-based navigation, and \ShadApp.custom\ for fully custom app building, allowing developers to choose the level of control over the underlying Flutter Navigator or Router.
lib/src · high confidence
Introduction of ShadTextTheme with Google Fonts support and default style definitions
The text theme system has been restructured to introduce \ShadTextTheme\, which provides a comprehensive set of default text styles (such as \h1\, \p\, \blockquote\, etc.) defined in \text\_styles\_default.dart\. This change adds native support for Google Fonts via the new \GoogleFontTextStyle\ class and \GoogleFontBuilder\ typedef, allowing dynamic font family resolution based on weight and style. Additionally, an \omitFamilyAndPackage\ extension is provided to facilitate style merging by excluding font-specific properties.
_lib/src/theme/text\theme · high confidence
Introduction of Shadcn/ui color themes with selection support
The library now includes a comprehensive set of color schemes based on the Shadcn/ui design system, available in both light and dark modes. Users can select from twelve distinct palettes—blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, and zinc—via the new \ShadColorScheme.fromName\ factory. Each scheme defines standard UI tokens (background, primary, destructive, etc.) and introduces a dedicated \selection\ color property to control the appearance of selected text or items. The base \ShadColorScheme\ class also supports custom color overrides and interpolation for smooth theme transitions.
_lib/src/theme/color\scheme · high confidence
New example app showcasing Shadcn UI components
The example application has been introduced to demonstrate the Shadcn UI library for Flutter. It provides a navigable set of pages covering a wide range of UI components, including layout elements (Accordion, Card, Dialog, Sheet, Tabs, Resizable), form controls (Button, Input, Checkbox, Select, Switch, Radio Group, Slider, Textarea), and specialized widgets (Toast, Tooltip, Context Menu, Menubar, Breadcrumb, Avatar, Badge, Progress, Table, Calendar, Date Picker, Time Picker, Sonner, Keyboard Toolbar). The app also includes dedicated pages for form-field integrations and typography customization, allowing users to explore the library's capabilities and theming options.
example/lib · high confidence
New focusable, keyboard toolbar, and portal positioning components
The \lib/src/raw\_components\ area now includes three new widgets: \ShadFocusable\ wraps a child in a Flutter \Focus\ node and exposes focus state via a builder, enabling custom focus-aware UIs; \ShadKeyboardToolbar\ displays a customizable toolbar above the on-screen keyboard on iOS and Android, showing/hiding based on keyboard height and focus state; and \ShadPortal\ with \ShadAnchor\, \ShadAnchorAuto\, and \ShadGlobalAnchor\ provides overlay positioning logic, including automatic repositioning on resize and scroll, replacing the previous \flutter\_portal\ dependency.
_lib/src/raw\components · high confidence
New form field components for checkbox, date, input, radio, select, switch, and more
This location introduces a comprehensive suite of new form field widgets (ShadCheckboxFormField, ShadDatePickerFormField, ShadInputFormField, ShadInputOTPFormField, ShadRadioGroupFormField, ShadSelectFormField, ShadSwitchFormField, ShadTextareaFormField, ShadTimePickerFormField, and ShadDateRangePickerFormField) that integrate the library's UI components with the form builder system. These fields provide standard form capabilities including validation, auto-validation modes, and value transformation, while also exposing specific UI customization options such as cursor styling, placeholder alignment, and layout constraints to give users fine-grained control over their form inputs.
lib/src/components/form/fields · high confidence
New property editor components for boolean, enum, and string values
The example application now includes dedicated widgets for editing common property types: \MyBoolProperty\ renders a switch for boolean values, \MyEnumProperty\ provides a dropdown selector for enum values, and \MyStringProperty\ offers an input field for text values. These components standardize how these data types are presented and modified within the example's property inspection UI.
example/lib/common/properties · high confidence
New script to generate Shadcn UI Flutter agent skills
A new Dart script, \scripts/generate\_skills.dart\, has been added to automate the creation of agent skills for the Shadcn UI Flutter library. This tool reads documentation content from the \docs/src/content/docs\ directory (including components, guides, and utility files), cleans the MDX formatting, and generates structured markdown files in the \skills/shadcn-ui-flutter\ directory, culminating in a \SKILL.md\ file.
scripts · high confidence
New shared UI components for the example application
The example app now includes a set of reusable common widgets to standardize the presentation of component demos. This adds a configurable app bar with theme and directionality toggles, a base scaffold that supports a resizable split-view for side-by-side code and preview, a simple component view wrapper for labeling demos, and utility extensions for state management and list manipulation.
example/lib/common · high confidence
New utility classes for animations, borders, gestures, and responsive layouts
This change introduces a suite of new utility classes in the \lib/src/utils\ directory to support the component library's core features. It adds \ShadAnimate\ and \ShadAnimationBuilder\ for declarative and builder-based animations, \ShadBorder\ and \ShadBorderSide\ for consistent border styling with merging capabilities, and \ShadGestureDetector\ with \ShadHoverStrategies\ to handle complex hover and long-press interactions across devices. Additionally, it provides \ShadBreakpoints\ and \ShadResponsiveBuilder\ for customizable responsive layouts, \ShadStatesController\ for managing widget states (hovered, pressed, etc.), and helper utilities like \ShadPosition\ for positioning and \ShadProvider\ for lightweight state management.
lib/src/utils · high confidence
New utility extensions for responsive breakpoints, date manipulation, and data handling
This update introduces a suite of new utility extensions in the \lib/src/utils/extensions\ directory to support upcoming UI components and improve developer ergonomics. The \ShadBreakpointsExt\ extension on \BuildContext\ allows components to easily determine the current responsive breakpoint based on screen width and theme configuration. Comprehensive date-time helpers (\ShadDateTime\) are added for common calendar operations, including day/week/month navigation, ISO week number calculation, and start/end of period detection. Data handling is enhanced with \MapExtensions\ supporting dot-notation path access (\getByPath\), flat-to-nested map conversion (\toNestedMap\), and recursive deep merging, alongside deep-copy capabilities for Lists, Maps, and Sets. Additionally, gesture details (\TapDetails\, \LongPressDetails\) now support \copyWith\ for easier immutability, \TextStyle\ gains a \fallback\ method for merging styles, and \Duration\ gains arithmetic operators.
lib/src/utils/extensions · high confidence
Playground expands with new component demos and UI refinements
The playground now includes dedicated example pages for a wide range of Shad UI components, including accordion, alert, avatar, badge, breadcrumb, button, calendar, card, checkbox, context menu, date picker, dialog, divider, form, icon button, input, input OTP, menubar, popover, progress, radio group, resizable panes, and more. These additions allow users to interactively preview and test these components within the playground environment. Additionally, the entry includes various fixes and refinements such as improved icon sizing, better handling of select options, and corrections to form validation and layout spacing.
playground/lib/pages · high confidence
Web clipboard file paste support
The library now supports detecting and extracting file data from paste events on the web platform. Users can register listeners to receive file items (mimeType and bytes) when pasting files into the application, with corresponding error handling for extraction failures. This functionality is specific to web environments; on other platforms, the API remains a no-op.
lib/src/utils/clipboard · high confidence
Behavioural changes
Introduce ShadForm with auto-validation modes and value transformers
The form component in lib/src/components/form has been refactored to introduce ShadForm, a new stateful widget that manages form fields with configurable auto-validation modes (disabled, always, onUserInteraction, alwaysAfterFirstValidation). It supports value transformation via toValueTransformer and fromValueTransformer callbacks, allowing custom formatting before saving or populating fields. The form also supports nested value retrieval using a configurable fieldIdSeparator (defaulting to '.') and provides access to raw and transformed values through rawValue and value getters. Fields can be registered with unique IDs and integrated with ShadInputDecorator for consistent styling and error display.
lib/src/components/form · high confidence
New ShadThemeData and ShadTheme widget architecture
The theme system has been restructured around a new \ShadThemeData\ class and \ShadTheme\ widget. \ShadThemeData\ now serves as the central configuration object, accepting granular theme overrides for individual components (such as buttons, badges, inputs, and dialogs) via dedicated theme parameters, and it supports merging with existing theme data. The \ShadTheme\ widget provides the necessary \InheritedWidget\ infrastructure to make this data available throughout the widget tree, including a \merge\ method for localized overrides and an \ShadAnimatedTheme\ variant for animated transitions between theme states.
lib/src/theme · high confidence
Theme system refactored into a generator-based architecture with new base and variant classes
The theme system in \lib/src/theme/themes\ has been restructured to use a generator-based approach. A new \ShadBaseTheme\ abstract class now defines the complete set of required theme properties (such as \colorScheme\, \radius\, and individual component themes like \buttonTheme\ and \badgeTheme\), serving as the foundation for theme variants. Two new concrete variants, \ShadDefaultThemeVariant\ and \ShadDefaultThemeNoSecondaryBorderVariant\, implement this interface to provide default styling configurations, with the latter explicitly disabling secondary borders. Additionally, a new \ShadShadows\ utility class has been added to centralize shadow definitions (sm, regular, md, lg, xl, xl2, inner) used across these themes.
lib/src/theme/themes · high confidence
Test coverage
Added tests for ShadColorScheme and ShadThemeData merge logic; Added tests for ShadPortal visibility and anchor fallback behavior; Added widget tests for core UI components.
Housekeeping
Initial project scaffolding and configuration
The repository is initialized with essential configuration files including \.coderabbit.yaml\ for AI review path filtering, a \.justfile\ for development task automation, and a \.pubignore\ to exclude non-library directories from the published package. Build system setup includes \analysis\_options.yaml\ for linting, \build.yaml\ for code generation (specifically configuring the \slang\ i18n builder), and a \Makefile\ for build and deployment tasks. Documentation is established with \CONTRIBUTING.md\ and an updated \README.md\ featuring project badges and component progress tracking.
(repo-wide) · high confidence
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
How this codebase got here
Score
- CAI 65 → 71 (+6.0)
- Rubric changed (rubric-2026.08.19 → rubric-2026.09.15) — scores are not directly comparable.
Lenses
- Code Health 93 → 83 (-10.7)
- Architecture 95 → 96 (+1.1)
- Maturity 53 → 62 (+8.6)
- Readiness 65 → 74 (+9.0)
- Security 72 → 76 (+3.9)
- Domain Modelling 100 → 100 (+0.0)
Resolved (12)
- Change coupling: checkbox.dart ↔ radio.dart (lib/src/components/form/fields/checkbox.dart)
- Change coupling: checkbox.dart ↔ select.dart (lib/src/components/form/fields/checkbox.dart)
- Change coupling: data.dart ↔ text_styles_default.dart (lib/src/theme/data.dart)
- Change coupling: radio.dart ↔ select.dart (lib/src/components/form/fields/radio.dart)
- Change coupling: radio.dart ↔ switch.dart (lib/src/components/form/fields/radio.dart)
- Coverage not included — suite not readable by the collector
- Dependency hygiene not measured — dependency manifest found but not parsed for hygiene
- No exposed public API
- Off-boarding risk: anonymized user #1
- Test reliability not included
- The Packages included in the library section lists flutter_animate, lucide_icons_flutter, two_dimensional_scrollables, intl, and universal_image but does not mention the ShadcnUI core package or its dependencies (e.g. shadcn_ui). (docs/src/content/docs/packages.md)
- complexity unreadable for .dart — churn × complexity hotspots could not be measured
New (236)
- CODEOWNERS assigns no owner to any path
- Change coupling: textarea.dart ↔ input.dart (lib/src/components/form/fields/textarea.dart)
- ClassTooLong: ShadButton (lib/src/components/button.dart)
- ClassTooLong: ShadDatePicker (lib/src/components/date_picker.dart)
- ClassTooLong: ShadDefaultThemeNoSecondaryBorderVariant (lib/src/theme/themes/default_theme_no_secondary_border_variant.dart)
- ClassTooLong: ShadDefaultThemeVariant (lib/src/theme/themes/default_theme_variant.dart)
- ClassTooLong: ShadInputState (lib/src/components/input.dart)
- ClassTooLong: ShadSelectState (lib/src/components/select.dart)
- ClassTooLong: ShadTextTheme (lib/src/theme/text_theme/theme.dart)
- ClassTooLong: _ShadCalendarState (lib/src/components/calendar.dart)
- ClassTooLong: _ShadSheetState (lib/src/components/sheet.dart)
- Documentation: no architecture or design documentation (docs/README.md)
- Documentation: no installation or build instructions (README.md)
- Documentation: written for insiders (docs/src/content/docs/Utils/responsive.md)
- Duplicated block (10 lines × 2) (lib/src/theme/themes/default_theme_no_secondary_border_variant.dart)
- Duplicated block (10 lines × 2) (lib/src/theme/themes/default_theme_no_secondary_border_variant.dart)
- Duplicated block (10 lines × 2) (lib/src/theme/themes/default_theme_no_secondary_border_variant.dart)
- Duplicated block (10 lines × 2) (lib/src/theme/themes/default_theme_no_secondary_border_variant.dart)
- Duplicated block (10 lines × 2) (lib/src/theme/themes/default_theme_no_secondary_border_variant.dart)
- Duplicated block (10 lines × 2) (lib/src/theme/themes/default_theme_no_secondary_border_variant.dart)
- …and 216 more
Changes since last survey
- 21 commits — 17 feature/other, 4 fixes
By area
- .github/workflows — 13 commits
- (root) — 4 commits
- docs/apps.json — 3 commits
- .github/scripts — 1 commit
Notable commits
- fix: Fix app showcase validation for CASE | Be Heard (#703)
- fix: fix(dialog): move SafeArea to route level to prevent unnecessary padding (#685)
- fix: fix(select): guard animateToTop/animateToBottom against a detached ScrollController (#686) (#687)
- fix: fix(tooltip): hide the tooltip when its route is no longer displayed (#696)
- change: ci: bump actions/checkout from 4.3.1 to 6.0.3 (#670)
- change: ci: bump actions/checkout from 6.0.3 to 7.0.1 (#693)
- change: ci: bump actions/github-script from 7.1.0 to 9.0.0 (#672)
- change: ci: bump actions/setup-node from 4.4.0 to 6.4.0 (#671)
- change: ci: bump actions/setup-node from 6.4.0 to 7.0.0 (#691)
- change: ci: bump anthropics/claude-code-action from 1.0.141 to 1.0.211 (#694)
- change: ci: bump anthropics/claude-code-action from 1.0.211 to 1.0.216 (#697)
- change: ci: bump anthropics/claude-code-action from 1.0.216 to 1.0.223 (#701)
- change: ci: bump anthropics/claude-code-action from 1.0.223 to 1.0.231 (#708)
- change: ci: bump cloudflare/wrangler-action from 3.15.0 to 4.0.0 (#673)
- change: ci: bump dart-lang/setup-dart from 1.7.1 to 1.7.2 (#668)
- change: ci: bump dart-lang/setup-dart from 1.7.2 to 1.8.1 (#692)
- change: ci: bump subosito/flutter-action from 2.21.0 to 2.23.0 (#669)
- change: docs: add BIShare - File Transfer App to apps showcase (#684)
- change: docs: add EasyTimeManager to apps showcase (#689)
- change: docs: add SPEND - Split & Track Expenses to apps showcase (#699)
- …and 1 more
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
Survey your own repository
nank1ro/flutter-shadcn-ui was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.
About this page
- The score is its most recent published measurement, taken on 23 September 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
- Measured at commit 2dcfb928ce3b97c23d1acea5cd6b768b3ef772aa — the exact code this score is about.
- Scored under rubric-2026.09.15 — the same rubric and the same method as every other entry in this index.
- Measured by watchdog.canine.dev using codehealth-analyzer preprod-955b9cee9818.