Shadcn Ui FlutterSAFE

shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: shadcn-ui-flutter
description: A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components including Buttons, Cards, Forms, and more. Use this skill when building Flutter UIs, implementing design systems, or needing specific component usage examples.
---

# Shadcn UI for Flutter

This skill provides documentation and examples for using the `shadcn_ui` package in Flutter.

## Theming and Customization
Shadcn UI for Flutter provides a powerful theming system. You can use built-in color schemes (blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, zinc) or create your own.

### Applying a Theme
Use `ShadThemeData` within `ShadApp` to define your light and dark themes.

### Detailed Guides
- [Theming](guides/theming.md)
- [Typography](guides/typography.md)
- [Material & Cupertino Interop](guides/interop.md)
- [Responsive](guides/responsive.md)
- [Decorator](guides/decorator.md)

## Components
| Name | Description | Reference |
| :--- | :--- | :--- |
| Accordion | A vertically stacked set of interactive headings that each reveal a section of content. | [accordion.md](components/accordion.md) |
| Alert | Displays a callout for user attention. | [alert.md](components/alert.md) |
| Avatar | An image element with a placeholder for representing the user. | [avatar.md](components/avatar.md) |
| Badge | Displays a badge or a component that looks like a badge. | [badge.md](components/badge.md) |
| Breadcrumb | Displays the path to the current resource using a hierarchy of links. | [breadcrumb.md](components/breadcrumb.md) |
| Button | Displays a button or a component that looks like a button. | [button.md](components/button.md) |
| Calendar | A date field component that allows users to enter and edit date. | [calendar.md](components/calendar.md) |
| Card | Displays a card with header, content, and footer. | [card.md](components/card.md) |
| Checkbox | A control that allows the user to toggle between checked and not checked. | [checkbox.md](components/checkbox.md) |
| Context Menu | Displays a menu to the user — such as a set of actions or functions — triggered by a mouse right-click. | [context-menu.md](components/context-menu.md) |
| Date Picker | A date picker component with range and presets. | [date-picker.md](components/date-picker.md) |
| Dialog | A modal dialog that interrupts the user. | [dialog.md](components/dialog.md) |
| Form | Builds a form with validation and easy access to form fields values. | [form.md](components/form.md) |
| IconButton | Displays an icon button or a component that looks like a button with an icon. | [icon-button.md](components/icon-button.md) |
| Input | Displays a form input field or a component that looks like an input field. | [input.md](components/input.md) |
| InputOTP | Accessible one-time password component with copy paste functionality. | [input-otp.md](components/input-otp.md) |
| Menubar | A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. | [menubar.md](components/menubar.md) |
| Popover | Displays rich content in a portal, triggered by a button. | [popover.md](components/popover.md) |
| Progress | Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. | [progress.md](components/progress.md) |
| RadioGroup | A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. | [radio-group.md](components/radio-group.md) |
| Resizable | Resizable panel groups and layouts. | [resizable.md](components/resizable.md) |
| Select | Displays a list of options for the user to pick from—triggered by a button. | [select.md](components/select.md) |
| Separator | Visually or semantically separates content. | [separator.md](components/separator.md) |
| Sheet | Extends the Dialog component to display content that complements the main content of the screen. | [sheet.md](components/sheet.md) |
| Slider | An input where the user selects a value from within a given range. | [slider.md](components/slider.md) |
| Sonner | An opinionated toast component. | [sonner.md](components/sonner.md) |
| Switch | A control that allows the user to toggle between checked and not checked. | [switch.md](components/switch.md) |
| Table | A responsive table component. | [table.md](components/table.md) |
| Tabs | A set of layered sections of content—known as tab panels—that are displayed one at a time. | [tabs.md](components/tabs.md) |
| Textarea | Displays a form textarea or a component that looks like a textarea. | [textarea.md](components/textarea.md) |
| Time Picker | A time picker component. | [time-picker.md](components/time-picker.md) |
| Toast | A succinct message that is displayed temporarily. | [toast.md](components/toast.md) |
| Tooltip | A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. | [tooltip.md](components/tooltip.md) |

## Usage Examples
Examples are available at the bottom of each component page.

### Basic Setup
Here is a complete example of a Counter App using `shadcn_ui`, including light and dark theme support.
```dart
import 'package:shadcn_ui/shadcn_ui.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ShadApp(
      debugShowCheckedModeBanner: false,
      theme: ShadThemeData(
        brightness: Brightness.light,
        colorScheme: const ShadZincColorScheme.light(),
      ),
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadZincColorScheme.dark(),
      ),
      themeMode: ThemeMode.system,
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.

[![ModelsAtlas audit: Shadcn Ui Flutter](https://modelsatlas.com/skills/nank1ro/shadcn-ui-flutter/badge.svg)](https://modelsatlas.com/skills/nank1ro/shadcn-ui-flutter/)

Not your listing, or something out of date? Claim or update your listing.