Skip to content
CAI
Software that uses CAICheck a score

nank1ro/flutter-shadcn-ui

70.8

Strong · 23 September 2026

46.3k

lines of production code

Dart

primary language

5

measurements over time

CAI band scale
CAI trend line
CAI lens gauges

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.