Shadcn UI Flutter

https://github.com/sunarya-thito/shadcn_flutter
Admin
A set of widgets and utilities for building applications in Flutter, porting the shadcn UI package...
Tokens:282,939
Snippets:1,445
Trust Score:8.6
License:BSD-3-Clause
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Command Example page setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/utility/command.md

Shows how to embed the Command example in a ComponentPage with a WidgetUsageExample. The path points to the example file and the child is the CommandExample1 widget.

```dart
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';
import 'command/command_example_1.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'command',
      description:
          'A command is a component that allows you to search for items.',
      displayName: 'Command',
      children: [
        WidgetUsageExample(
          title: 'Command Example',
          path: 'lib/pages/docs/components/command/command_example_1.dart',
          child: CommandExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Chip Example - ComponentPage setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/utility/chip.md

Sets up a ComponentPage for the Chip component, referencing the example file 'lib/pages/docs/components/chip/chip_example_1.dart'.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/chip/chip_example_1.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'chip',
      description: 'A chip is a small, interactive element that represents an attribute, text, entity, or action.',
      displayName: 'Chip',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/chip/chip_example_1.dart',
          child: ChipExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### TimePicker Example Page Setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/form/time_picker.md

Page setup for the TimePicker component, using ComponentPage and WidgetUsageExample to display the example widget.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/time_picker/time_picker_example_1.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'time_picker',
      description:
          'Time picker is a component that allows users to pick a time.',
      displayName: 'Time Picker',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/time_picker/time_picker_example_1.dart',
          child: TimePickerExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Tree Example - ComponentPage setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/navigation/tree.md

Sets up a ComponentPage for the Tree widget, referencing the example file and displaying the TreeExample1 widget.

```dart
import 'package:docs/pages/docs/components/tree/tree_example_1.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';

class TreeExample extends StatelessWidget {
  const TreeExample({super.key});
  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'tree',
      description:
          'A tree is a way of displaying a hierarchical list of items.',
      displayName: 'Tree',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/tree/tree_example_1.dart',
          child: TreeExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Dialog Example - ComponentPage setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/overlay/dialog.md

Sets up a ComponentPage for the dialog component, importing the example file and displaying it with WidgetUsageExample.

```dart
import 'package:docs/pages/docs/components/dialog/dialog_example_1.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'dialog',
      description: 'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.',
      displayName: 'Dialog',
      children: [
        WidgetUsageExample(
          title: 'Dialog Example',
          path: 'lib/pages/docs/components/dialog/dialog_example_1.dart',
          child: DialogExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Drawer Example Page Setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/overlay/drawer.md

Shows how to register a drawer example in the documentation page using ComponentPage and WidgetUsageExample, referencing the external drawer_example_1.dart file.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import 'drawer/drawer_example_1.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'drawer',
      description:
          'A drawer is a panel that slides in from the edge of a screen.',
      displayName: 'Drawer',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/drawer/drawer_example_1.dart',
          child: DrawerExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### ToastExample page setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/feedback/toast.md

Defines the main ToastExample page that wraps the toast example in a ComponentPage with a WidgetUsageExample, referencing the external example file at lib/pages/docs/components/toast/toast_example_1.dart.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/toast/toast_example_1.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'toast',
      description: 'A toast is a non-modal, unobtrusive window element used to display brief, auto-expiring information to the user.',
      displayName: 'Toast',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/toast/toast_example_1.dart',
          child: ToastExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Pagination Example - ComponentPage setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/navigation/pagination.md

Shows how to set up a component page for the Pagination widget, importing the example and using ComponentPage with a WidgetUsageExample.

```dart
import 'package:docs/pages/docs/components/pagination/pagination_example_1.dart';
import 'package:flutter/widgets.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'pagination',
      description: 'A pagination component is used to navigate through a series of pages.',
      displayName: 'Pagination',
      children: [
        WidgetUsageExample(
          title: 'Pagination Example',
          path:
              'lib/pages/docs/components/pagination/pagination_example_1.dart',
          child: PaginationExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### NavigationMenu Example 1 (Partial)

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/navigation/navigation_menu.md

Starts the NavigationMenu example widget, importing shadcn_flutter and gap packages.

```dart
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:gap/gap.dart';

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

```

--------------------------------

### Radio Group Example - ComponentPage setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/form/radio_group.md

Sets up a ComponentPage for the RadioGroup example, referencing the example file 'radio_group_example_1.dart'.

```dart
import 'package:docs/pages/docs/components/radio_group/radio_group_example_1.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../component_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'radio_group',
      description: 'A radio group is a group of radio buttons.',
      displayName: 'Radio Group',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/radio_group/radio_group_example_1.dart',
          child: RadioGroupExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Switcher Example

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/navigation/switcher.md

Shows the main component page setup for the Switcher widget, including two usage examples.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/switcher/switcher_example_1.dart';
import 'package:docs/pages/docs/components/switcher/switcher_example_2.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'switcher',
      description: 'A Switcher widget allows you to switch between different widgets with a transition effect.',
      displayName: 'Switcher',
      children: [
        WidgetUsageExample(
          title: 'Switcher Example 1',
          path: 'lib/pages/docs/components/switcher/switcher_example_1.dart',
          child: SwitcherExample1(),
        ),
        WidgetUsageExample(
          title: 'Switcher Example 2',
          path: 'lib/pages/docs/components/switcher/switcher_example_2.dart',
          child: SwitcherExample2(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Dropdown Menu Example - ComponentPage setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/utility/dropdown_menu.md

Sets up a ComponentPage for the DropdownMenu component, including a WidgetUsageExample that references the example file. This is the main page structure for the dropdown menu documentation.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import 'dropdown_menu/dropdown_menu_example_1.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'dropdown_menu',
      description: 'Dropdown menu is a menu that appears when you click a button or other control.',
      displayName: 'Dropdown Menu',
      children: [
        WidgetUsageExample(
          title: 'Dropdown Menu Example',
          path: 'lib/pages/docs/components/dropdown_menu/dropdown_menu_example_1.dart',
          child: DropdownMenuExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Windows PowerShell quickstart commands

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/CONTRIBUTING.md

Windows PowerShell commands to set up the Flutter environment, run the example app, and launch the docs app with web semantics for accessibility checks.

```powershell
# From repository root - resolves dependencies for every package in the workspace
flutter --version
flutter pub get

# Run the example app
cd packages/shadcn_flutter/example
flutter run

# Run the docs app in Chrome with web semantics (recommended for a11y checks)
cd ../../..
./run_docs_web_semantics.bat
```

--------------------------------

### Use MaterialShadcnApp as a drop-in replacement

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter_material/README.md

This example shows a complete app setup using MaterialShadcnApp, which registers Material localizations and installs the necessary Theme, Material, and ScaffoldMessenger ancestors. The Material theme is derived from the shadcn theme, so it follows darkTheme and themeMode automatically.

```dart
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(
      title: 'My App',
      theme: ThemeData(
        colorScheme: ColorSchemes.lightZinc,
        radius: 0.5,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Hybrid app')),
        body: const Center(
          child: PrimaryButton(child: Text('A shadcn button')),
        ),
      ),
    ),
  );
}
```

--------------------------------

### Form Example: Full Page with Imports and State

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/form/form.md

The main example page for the Form component, showing imports for all form examples and the DocsPage setup with onThisPage navigation. It demonstrates the typical structure of a documentation page for a component.

```dart
import 'package:docs/pages/docs/components/form/form_example_3.dart';
import 'package:docs/pages/docs/components/form/form_example_4.dart';
import 'package:docs/pages/docs/components/form/form_example_5.dart';
import 'package:docs/pages/docs/components/form/form_example_6.dart';
import 'package:docs/pages/docs/components/form/form_example_7.dart';
import 'package:docs/pages/docs/components/form/form_example_8.dart';
import 'package:docs/pages/docs/components/form/form_example_9.dart';
import 'package:docs/pages/docs_page.dart';
import 'package:go_router/go_router.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import 'form/form_example_1.dart';
import 'form/form_example_2.dart';

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

  @override
  State<FormExample> createState() => _FormExampleState();
}

class _FormExampleState extends State<FormExample> {
  final OnThisPage overviewKey = OnThisPage();
  final OnThisPage formKeysKey = OnThisPage();
  final OnThisPage keyReferenceKey = OnThisPage();
  final OnThisPage validationKey = OnThisPage();
  final OnThisPage showErrorsKey = OnThisPage();
  final OnThisPage submittingKey = OnThisPage();
  final OnThisPage controlledKey = OnThisPage();
  final OnThisPage ignoreFormKey = OnThisPage();
  final OnThisPage pitfallsKey = OnThisPage();
  final OnThisPage example1Key = OnThisPage();
  final OnThisPage example2Key = OnThisPage();
  final OnThisPage example3Key = OnThisPage();

  @override
  Widget build(BuildContext context) {
    return DocsPage(
      name: 'form',
      onThisPage: {
        'Overview': overviewKey,
        'Form Keys': formKeysKey,
        'Key Reference': keyReferenceKey,
        'Validation': validationKey,
        'Show Errors vs Validation Mode': showErrorsKey,
        'Submitting': submittingKey,
        'Controlled Variants': controlledKey,
        'IgnoreForm': ignoreFormKey,
        'Common Pitfalls': pitfallsKey,
        'Example: Table Layout': example1Key,
        'Example: Column Layout': example2Key,
        'Example: Async Validation': example3Key,
      },
      navigationItems: [
        TextButton(
          density: ButtonDensity.compact,
          onPressed: () {
            context.pushNamed('components');
          },
          child: const Text('Components'),
        ),
      ],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Text('Form').h1(),
          const Text(
            'A helper widget that makes it easy to build and validate forms '
            'with typed field keys, composable validators, and flexible error display.',
          ).lead(),

          // ── Overview ──
          const Text('Overview').h2().anchored(overviewKey),
          const Text(
            'The Form widget provides a structured way to collect, validate, and '
            'submit user input. Unlike Material\'s built-in form system, shadcn_flutter '
            'uses typed FormKey objects to identify each field and carry its value type. '
            'This gives you compile-time type safety when reading submitted values.',
          ).p(),
          const Text('A typical form setup involves three parts:').p(),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                'Form — the container widget that manages state and handles submission.',
              ).li(),
              const Text(
                'FormField / FormInline — wraps each input with a label, validator, and error display.',
              ).li(),
              const Text(
                'FormKey — a typed key that uniquely identifies a field and its value type.',
              ).li(),
            ],
          ).p(),
          const Text(
            'The following example shows a form with multiple field types '
            '(TextField, Checkbox, DatePicker, Switch), each using the correct '
            'typed FormKey alias. Notice how the keys\' generic types (String, '
            'CheckboxState, DateTime, bool) match each widget\'s reported value.',
          ).p(),
          const WidgetUsageExample(
            path: 'lib/pages/docs/components/form/form_example_4.dart',
            child: FormExample4(),
          ),
        ],
      ),
    );
  }
}
```

--------------------------------

### Stepper Example - ComponentPage with six WidgetUsageExample entries

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/layout/stepper.md

Main example page that assembles the Stepper component documentation. It imports six separate example files and displays them under the ComponentPage with titles like 'Vertical Example' and 'Variants Example'. Use this as the entry point for the Stepper component showcase.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/stepper/stepper_example_1.dart';
import 'package:docs/pages/docs/components/stepper/stepper_example_2.dart';
import 'package:docs/pages/docs/components/stepper/stepper_example_3.dart';
import 'package:docs/pages/docs/components/stepper/stepper_example_4.dart';
import 'package:docs/pages/docs/components/stepper/stepper_example_5.dart';
import 'package:docs/pages/docs/components/stepper/stepper_example_6.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'stepper',
      description:
          'A stepper is a fundamental part of material design '
          'guidelines. Steppers convey progress through numbered steps.',
      displayName: 'Stepper',
      children: [
        WidgetUsageExample(
          title: 'Vertical Example',
          path: 'lib/pages/docs/components/stepper/stepper_example_1.dart',
          child: StepperExample1(),
        ),
        WidgetUsageExample(
          title: 'Horizontal Example',
          path: 'lib/pages/docs/components/stepper/stepper_example_2.dart',
          child: StepperExample2(),
        ),
        WidgetUsageExample(
          title: 'Failed Step Example',
          path: 'lib/pages/docs/components/stepper/stepper_example_3.dart',
          child: StepperExample3(),
        ),
        WidgetUsageExample(
          title: 'Clickable Step Example',
          path: 'lib/pages/docs/components/stepper/stepper_example_4.dart',
          child: StepperExample4(),
        ),
        WidgetUsageExample(
          title: 'Custom Icon Example',
          path: 'lib/pages/docs/components/stepper/stepper_example_5.dart',
          child: StepperExample5(),
        ),
        WidgetUsageExample(
          title: 'Variants Example',
          path: 'lib/pages/docs/components/stepper/stepper_example_6.dart',
          child: StepperExample6(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Checkbox Example Page

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/form/checkbox.md

Main example page that displays two checkbox examples using WidgetUsageExample. It imports the example files and sets up the component page.

```dart
import 'package:docs/pages/docs/components/checkbox/checkbox_example_1.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';
import 'checkbox/checkbox_example_2.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'checkbox',
      description:
          'Checkboxes allow the user to select one or more items from a set.',
      displayName: 'Checkbox',
      children: [
        WidgetUsageExample(
          title: 'Checkbox Example',
          path: 'lib/pages/docs/components/checkbox/checkbox_example_1.dart',
          child: CheckboxExample1(),
        ),
        WidgetUsageExample(
          title: 'Checkbox Example with Tristate',
          path: 'lib/pages/docs/components/checkbox/checkbox_example_2.dart',
          child: CheckboxExample2(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Badge Example Page

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/utility/badge.md

Main example page that composes the four badge style examples (primary, secondary, outline, destructive) into a ComponentPage. It imports each example file and uses WidgetUsageExample to display them with their source paths.

```dart
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';
import 'badge/badge_example_1.dart';
import 'badge/badge_example_2.dart';
import 'badge/badge_example_3.dart';
import 'badge/badge_example_4.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'badge',
      description: 'Badges are small status descriptors for UI elements.',
      displayName: 'Badge',
      children: [
        WidgetUsageExample(
          title: 'Primary Badge Example',
          path: 'lib/pages/docs/components/badge/badge_example_1.dart',
          child: BadgeExample1(),
        ),
        WidgetUsageExample(
          title: 'Secondary Badge Example',
          path: 'lib/pages/docs/components/badge/badge_example_2.dart',
          child: BadgeExample2(),
        ),
        WidgetUsageExample(
          title: 'Outline Badge Example',
          path: 'lib/pages/docs/components/badge/badge_example_3.dart',
          child: BadgeExample3(),
        ),
        WidgetUsageExample(
          title: 'Destructive Badge Example',
          path: 'lib/pages/docs/components/badge/badge_example_4.dart',
          child: BadgeExample4(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Table Example

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/display/table.md

Imports and displays four table examples: basic, resizable, scrollable, and right-to-left. Each example is wrapped in a WidgetUsageExample with a title and file path.

```dart
import 'package:docs/pages/docs/components/table/table_example_1.dart';
import 'package:docs/pages/docs/components/table/table_example_2.dart';
import 'package:docs/pages/docs/components/table/table_example_3.dart';
import 'package:docs/pages/docs/components/table/table_example_4.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'table',
      description: 'A table displays data in a tabular format.',
      displayName: 'Table',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/table/table_example_1.dart',
          child: TableExample1(),
        ),
        WidgetUsageExample(
          title: 'Resizable Example',
          path: 'lib/pages/docs/components/table/table_example_2.dart',
          child: TableExample2(),
        ),
        WidgetUsageExample(
          title: 'Scrollable Example',
          path: 'lib/pages/docs/components/table/table_example_3.dart',
          child: TableExample3(),
        ),
        WidgetUsageExample(
          title: 'Right-to-left Example',
          path: 'lib/pages/docs/components/table/table_example_4.dart',
          child: TableExample4(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Window Example 1

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/overlay/window.md

Demonstrates a WindowNavigator simulating multiple desktop-style windows, with an action to add a new window at runtime.

```dart
import 'package:docs/debug.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

// Demonstrates a WindowNavigator simulating multiple desktop-style windows,
// with an action to add a new window at runtime.

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

  @override
  State<WindowExample1> createState() => _WindowExample1State();
}

class _WindowExample1State extends State<WindowExample1> {
  final GlobalKey<WindowNavigatorHandle> navigatorKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        OutlinedContainer(
          height: 600, // for example purpose
          child: WindowNavigator(
            key: navigatorKey,
            // Pre-populate with two windows, each with its own bounds and title.
            initialWindows: [
              Window(
                bounds: const Rect.fromLTWH(0, 0, 200, 200),
                title: const Text('Window 1'),
                content: const RebuildCounter(),
              ),
              Window(
                bounds: const Rect.fromLTWH(200, 0, 200, 200),
                title: const Text('Window 2'),
                content: const RebuildCounter(),
              ),
            ],
            child: const Center(child: Text('Desktop')),
          ),
        ),
        PrimaryButton(
          child: const Text('Add Window'),
          onPressed: () {
            // Push a new window via the navigator; title uses the current count.
            navigatorKey.currentState?.pushWindow(
              Window(
                bounds: const Rect.fromLTWH(0, 0, 200, 200),
                title: Text(
                  'Window ${navigatorKey.currentState!.windows.length + 1}',
                ),
                content: const RebuildCounter(),
              ),
            );
          },
        ),
      ],
    );
  }
}

```

--------------------------------

### Window Example

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/overlay/window.md

Shows how to create a component page for the Window component, using the WindowExample1 widget as the example.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/window/window_example_1.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'window',
      description:
          'A window manager that allows you to create and manage windows.',
      displayName: 'Window',
      children: [
        WidgetUsageExample(
          title: 'Window Example',
          path: 'lib/pages/docs/components/window/window_example_1.dart',
          child: WindowExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Input OTP Example - Main Component Page

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/form/input_otp.md

The main example page that assembles the InputOTP component documentation, importing and displaying four sub-examples. It uses the ComponentPage and WidgetUsageExample widgets to show each example with its source path.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/input_otp/input_otp_example_1.dart';
import 'package:docs/pages/docs/components/input_otp/input_otp_example_3.dart';
import 'package:docs/pages/docs/components/input_otp/input_otp_example_4.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import 'input_otp/input_otp_example_2.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'input_otp',
      description:
          'Input OTP is a component that allows users to enter OTP code.',
      displayName: 'Input OTP',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/input_otp/input_otp_example_1.dart',
          child: InputOTPExample1(),
        ),
        WidgetUsageExample(
          title: 'Initial Value Example',
          path: 'lib/pages/docs/components/input_otp/input_otp_example_2.dart',
          child: InputOTPExample2(),
        ),
        WidgetUsageExample(
          title: 'Obscured Example',
          path: 'lib/pages/docs/components/input_otp/input_otp_example_3.dart',
          child: InputOTPExample3(),
        ),
        WidgetUsageExample(
          title: 'Upper Case Alphabet Example',
          path: 'lib/pages/docs/components/input_otp/input_otp_example_4.dart',
          child: InputOTPExample4(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Run the example app with flutter run

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter_genui/example/README.md

Runs the app directly with Flutter. After launch, enter the OpenRouter API key on the login screen.

```bash
flutter run              # then enter the key on the login screen
```

--------------------------------

### Swiper component page setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/overlay/swiper.md

Defines the Swiper component page, registering the swiper example with a description and display name. It imports the example file and uses WidgetUsageExample to embed SwiperExample1.

```dart
import 'package:docs/pages/docs/components/swiper/swiper_example_1.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'swiper',
      description: 'Enable swiping gestures to open a drawer or a sheet.',
      displayName: 'Swiper',
      children: [
        WidgetUsageExample(
          title: 'Example 1',
          path: 'lib/pages/docs/components/swiper/swiper_example_1.dart',
          child: SwiperExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Apply border radius from theme

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/guides/layout.md

Use theme.borderRadiusMd to get a BorderRadius or theme.radiusMd for a double value. The example shows both approaches in a Container decoration.

```dart
Container(
  decoration: BoxDecoration(
    borderRadius: theme.borderRadiusMd, // Returns a BorderRadius
    // or
    borderRadius: BorderRadius.circular(theme.radiusMd),
  ),
)
```

--------------------------------

### Select component page with six usage examples

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/form/select.md

Main example page for the Select component. It imports six example files and renders them inside a ComponentPage with WidgetUsageExample widgets, each with a title and a path to the corresponding source file.

```dart
import 'package:docs/pages/docs/components/select/select_example_1.dart';
import 'package:docs/pages/docs/components/select/select_example_2.dart';
import 'package:docs/pages/docs/components/select/select_example_3.dart';
import 'package:docs/pages/docs/components/select/select_example_4.dart';
import 'package:docs/pages/docs/components/select/select_example_5.dart';
import 'package:docs/pages/docs/components/select/select_example_6.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'select',
      description: 'A select component that allows you to select an item from a list of items.',
      displayName: 'Select',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/select/select_example_1.dart',
          child: SelectExample1(),
        ),
        WidgetUsageExample(
          title: 'Example with search',
          path: 'lib/pages/docs/components/select/select_example_2.dart',
          child: SelectExample2(),
        ),
        WidgetUsageExample(
          title: 'Asynchronous infinite example',
          path: 'lib/pages/docs/components/select/select_example_3.dart',
          child: SelectExample3(),
        ),
        WidgetUsageExample(
          title: 'Example with no virtualization',
          path: 'lib/pages/docs/components/select/select_example_4.dart',
          child: SelectExample4(),
        ),
        WidgetUsageExample(
          title: 'Example with custom colors',
          path: 'lib/pages/docs/components/select/select_example_5.dart',
          child: SelectExample5(),
        ),
        WidgetUsageExample(
          title: 'Example with create new item',
          path: 'lib/pages/docs/components/select/select_example_6.dart',
          child: SelectExample6(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Slider Example 2 - Ranged Slider

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/form/slider.md

A ranged slider using SliderValue.ranged with start and end values. Displays the current range below the slider.

```dart
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:gap/gap.dart';

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

  @override
  State<SliderExample2> createState() => _SliderExample2State();
}

class _SliderExample2State extends State<SliderExample2> {
  // A ranged slider has a start and end thumb/value.
  SliderValue value = const SliderValue.ranged(0.5, 0.75);
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Slider(
          value: value,
          onChanged: (value) {
            setState(() {
              this.value = value;
            });
          },
        ),
        const Gap(16),
        // Display the current ranged values below the slider.
        Text('Value: ${value.start} - ${value.end}'),
      ],
    );
  }
}

```

--------------------------------

### Basic TextField Example

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/other/text_field.md

Creates a TextField with an email keyboard, clear and revalidate features, and an onChanged callback. Use as a starting point for single-line text input.

```dart
TextField(
  hintText: 'Enter your email',
  keyboardType: TextInputType.emailAddress,
  features: [
    InputClearFeature(),
    InputRevalidateFeature(),
  ],
  onChanged: (text) => _handleTextChange(text),
);
```

--------------------------------

### Radio Group Example 1 - Stateful usage

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/form/radio_group.md

Shows a stateful RadioGroup<int> with RadioItem children. The selected value is stored in state and echoed below. Starts with no selection (null).

```dart
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:gap/gap.dart';

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

  @override
  State<RadioGroupExample1> createState() => _RadioGroupExample1State();
}

class _RadioGroupExample1State extends State<RadioGroupExample1> {
  // Start with no selection (null). The UI reflects this until the user picks an option.
  int? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // A generic RadioGroup for int values. It controls selection for its RadioItem children.
        RadioGroup<int>(
          value: selectedValue,
          onChanged: (value) {
            setState(() {
              // Save the selected value emitted by the tapped RadioItem.
              selectedValue = value;
            });
          },
          child: const Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Each RadioItem represents a single choice with an associated integer value.
              RadioItem(value: 1, trailing: Text('Option 1')),
              RadioItem(value: 2, trailing: Text('Option 2')),
              RadioItem(value: 3, trailing: Text('Option 3')),
            ],
          ),
        ),
        const Gap(16),
        // Echo the selection below for demonstration purposes.
        Text('Selected: $selectedValue'),
      ],
    );
  }
}

```

--------------------------------

### Tree example build method with options

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/navigation/tree.md

Builds the Tree example UI with expand/collapse icons, recursive selection, branch line style, and expand/collapse all buttons. Uses built-in handlers for selection and expansion, and toggles for options.

```dart
@override
Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      OutlinedContainer(
        child: SizedBox(
          height: 300,
          width: 250,
          child: Tree(
            // Show a separate expand/collapse icon when true; otherwise use row affordance.
            expandIcon: expandIcon,
            shrinkWrap: true,
            // When true, selecting a parent can affect children (see below toggle).
            recursiveSelection: recursiveSelection,
            nodes: treeItems,
            // Draw connecting lines either as path curves or straight lines.
            branchLine: usePath ? BranchLine.path : BranchLine.line,
            // Use a built-in handler to update selection state across nodes.
            onSelectionChanged: Tree.defaultSelectionHandler(treeItems, (
              value,
            ) {
              setState(() {
                treeItems = value;
              });
            }),
            builder: (context, node) {
              return TreeItem(
                onPressed: () {},
                trailing: node.leaf
                    ? Container(
                        width: 16,
                        height: 16,
                        alignment: Alignment.center,
                        child: const CircularProgressIndicator(),
                      )
                    : null,
                leading: node.leaf
                    ? const Icon(BootstrapIcons.fileImage)
                    : Icon(
                        node.expanded
                            ? BootstrapIcons.folder2Open
                            : BootstrapIcons.folder2,
                      ),
                // Expand/collapse handling; updates treeItems with new expanded state.
                onExpand: Tree.defaultItemExpandHandler(treeItems, node, (
                  value,
                ) {
                  setState(() {
                    treeItems = value;
                  });
                }),
                child: Text(node.data),
              );
            },
          ),
        ),
      ),
      const Gap(16),
      Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          PrimaryButton(
            onPressed: () {
              setState(() {
                treeItems = treeItems.expandAll();
              });
            },
            child: const Text('Expand All'),
          ),
          const Gap(8),
          PrimaryButton(
            onPressed: () {
              setState(() {
                treeItems = treeItems.collapseAll();
              });
            },
            child: const Text('Collapse All'),
          ),
        ],
      ),
      const Gap(8),
      Checkbox(
        state: expandIcon ? CheckboxState.checked : CheckboxState.unchecked,
        onChanged: (value) {
          setState(() {
            expandIcon = value == CheckboxState.checked;
          });
        },
        trailing: const Text('Expand Icon'),
      ),
      const Gap(8),
      Checkbox(
        state: usePath ? CheckboxState.checked : CheckboxState.unchecked,
        onChanged: (value) {
          setState(() {
            usePath = value == CheckboxState.checked;
          });
        },
        trailing: const Text('Use Path Branch Line'),
      ),
      const Gap(8),
      Checkbox(
        state: recursiveSelection
            ? CheckboxState.checked
            : CheckboxState.unchecked,
        onChanged: (value) {
          setState(() {
            recursiveSelection = value == CheckboxState.checked;
            if (recursiveSelection) {
              // Update nodes so parent/child reflect selected state recursively.
              treeItems = treeItems.updateRecursiveSelection();
            }
          });
        },
        trailing: const Text('Recursive Selection'),
      ),
    ],
  );
}

```

--------------------------------

### Refresh Trigger Example - ComponentPage setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/utility/refresh_trigger.md

Shows how to embed the RefreshTriggerExample1 widget inside a ComponentPage with a ScrollConfiguration that enables mouse and touch drag devices, and wraps it in an OutlinedContainer with a fixed height.

```dart
import 'dart:ui';

import 'package:docs/pages/docs/components/refresh_trigger/refresh_trigger_example_1.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

import '../../widget_usage_example.dart';
import '../component_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return ComponentPage(
      name: 'refresh_trigger',
      description: 'A trigger that can be used to refresh a list.',
      displayName: 'Refresh Trigger',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/refresh_trigger/refresh_trigger_example_1.dart',
          child: ScrollConfiguration(
            behavior: ScrollConfiguration.of(context).copyWith(
              dragDevices: {PointerDeviceKind.mouse, PointerDeviceKind.touch},
            ),
            child: OutlinedContainer(
              child: const RefreshTriggerExample1().sized(height: 400),
            ),
          ),
        ),
      ],
    );
  }
}

```

--------------------------------

### Nested Drawer Example with showOverlay

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/overlay/drawer.md

Demonstrates opening nested drawers from different screen edges using showOverlay with DrawerConfiguration, LinkedAnchor, and OverlayAnchor. Shows how to close the top-most overlay with closeOverlay and how to open another drawer from within a drawer.

```dart
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:gap/gap.dart';

/// Drawer overlay opened from different screen edges.
///
/// Repeatedly opens nested drawers cycling through positions to showcase
/// [openDrawer] and how to close using [closeOverlay].
class DrawerExample1 extends StatefulWidget {
  const DrawerExample1({super.key});

  @override
  State<DrawerExample1> createState() => _DrawerExample1State();
}

class _DrawerExample1State extends State<DrawerExample1> {
  // Sequence of positions to cycle through as drawers are stacked.
  List<OverlayPosition> positions = [
    OverlayPosition.end,
    OverlayPosition.end,
    OverlayPosition.bottom,
    OverlayPosition.bottom,
    OverlayPosition.top,
    OverlayPosition.top,
    OverlayPosition.start,
    OverlayPosition.start,
  ];

  // Open a drawer and optionally open another from within it.
  void open(int count) {
    final Symbol currentAnchor = Symbol('drawer_anchor_$count');
    showOverlay(
      context,
      DrawerConfiguration(
        anchor: LinkedAnchor(
          count == 0
              ? #outerDrawerButton
              : Symbol('drawer_anchor_${count - 1}'),
        ),
        expands: true,
        position: positions[count % positions.length],
      ),
      builder: (context) {
        return OverlayAnchor(
          anchor: currentAnchor,
          child: Container(
            padding: const EdgeInsets.all(48),
            child: IntrinsicWidth(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Text(
                    'Drawer ${count + 1} at ${positions[count % positions.length].name}',
                  ),
                  const Gap(16),
                  PrimaryButton(
                    onPressed: () {
                      // Open another drawer on top.
                      open(count + 1);
                    },
                    child: const Text('Open Another Drawer'),
                  ),
                  const Gap(8),
                  SecondaryButton(
                    onPressed: () {
                      // Close the current top-most overlay.
                      closeOverlay(context);
                    },
                    child: const Text('Close Drawer'),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return OverlayAnchor(
      anchor: #outerDrawerButton,
      child: PrimaryButton(
        onPressed: () {
          open(0);
        },
        child: const Text('Open Drawer'),
      ),
    );
  }
}

```

--------------------------------

### MaterialShadcnApp root setup

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/guides/interop.md

Use MaterialShadcnApp as a drop-in replacement for ShadcnApp when your app uses Material widgets. It takes the same parameters, registers Material localizations, and installs the Material Theme, Material, and ScaffoldMessenger ancestors.

```dart
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(
      title: 'My App',
      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'))),
      ),
    ),
  );
}
```

--------------------------------

### Menubar Example - ComponentPage wrapper

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/components/navigation/menubar.md

A page-level example that wraps the MenubarExample1 widget in a ComponentPage and WidgetUsageExample, providing the standard documentation layout for the menubar component.

```dart
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/menubar/menubar_example_1.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return const ComponentPage(
      name: 'menubar',
      description:
          'A bar of buttons that provies quick access to common actions.',
      displayName: 'Menubar',
      children: [
        WidgetUsageExample(
          title: 'Example',
          path: 'lib/pages/docs/components/menubar/menubar_example_1.dart',
          child: MenubarExample1(),
        ),
      ],
    );
  }
}

```

--------------------------------

### Run the app

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter/skills/shadcn-flutter/guides/setup.md

Runs the Flutter app after setup is complete.

```shell
flutter run
```

--------------------------------

### Run the example app with run.bat

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter_genui/example/README.md

Launches the example app on Chrome. Any extra arguments are forwarded to `flutter run`.

```bat
run.bat -d chrome
```

--------------------------------

### Migrate from shadcn_flutter: add SkeletonizerLayer

Source: https://github.com/sunarya-thito/shadcn_flutter/blob/master/packages/shadcn_flutter_skeletonizer/README.md

Migration example showing the change from shadcn_flutter's automatic installation to manually adding SkeletonizerLayer via surfaceBuilder. The extension methods still work without the layer, but the pulse falls back to skeletonizer's own defaults instead of following the shadcn theme.

```dart
// before, shadcn_flutter installed this itself
Text('Loading').asSkeleton();

// after
ShadcnApp(
  surfaceBuilder: (context, child) => SkeletonizerLayer(child: child),
  home: Text('Loading').asSkeleton(),
);
```
Tokens:
Raw