### Install Shadcn UI Package

Source: https://context7_llms

This command installs the shadcn_ui package into your Flutter project. Alternatively, you can manually add it to your pubspec.yaml file.

```bash
flutter pub add shadcn_ui
```

```yaml
dependencies:
    shadcn_ui: ^0.2.4 # replace with the latest version
```

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

### Setup Shadcn UI Pure Application

Source: https://context7_llms

Demonstrates how to set up a Flutter application using only Shadcn UI components. This involves replacing the root widget with ShadApp.

```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();
  }
}
```

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

### Setup Shadcn UI with Material Components

Source: https://context7_llms

Illustrates how to integrate Shadcn UI components with Flutter's Material Design. This setup uses ShadApp.custom to configure both Shadcn themes and MaterialApp.

```dart
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ShadApp.custom(
      themeMode: ThemeMode.dark,
      darkTheme: ShadThemeData(
        brightness: Brightness.dark,
        colorScheme: const ShadSlateColorScheme.dark(),
      ),
      appBuilder: (context) {
        return MaterialApp(
          theme: Theme.of(context),
          builder: (context, child) {
            return ShadAppBuilder(child: child!);
          },
        );
      },
    );
  }
}
```

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

### Flutter Menubar Example with Shadcn UI

Source: https://context7_llms

Demonstrates how to implement a persistent menubar in a Flutter application using the shadcn-ui library. This example showcases nested menu items, dividers, icons, and the ability to disable menu options. It requires the flutter_shadcn_ui and lucide_icons packages.

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

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    final square = SizedBox.square(
      dimension: 16,
      child: Center(
        child: SizedBox.square(
          dimension: 8,
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: theme.colorScheme.foreground,
              shape: BoxShape.circle,
            ),
          ),
        ),
      ),
    );
    final divider = ShadSeparator.horizontal(
      margin: const EdgeInsets.symmetric(vertical: 4),
      color: theme.colorScheme.muted,
    );
    return ShadMenubar(
      items: [
        ShadMenubarItem(
          items: [
            const ShadContextMenuItem(child: Text('New Tab')),
            const ShadContextMenuItem(child: Text('New Window')),
            const ShadContextMenuItem(
              enabled: false,
              child: Text('New Incognito Window'),
            ),
            divider,
            const ShadContextMenuItem(
              trailing: Icon(LucideIcons.chevronRight),
              items: [
                ShadContextMenuItem(child: Text('Email Link')),
                ShadContextMenuItem(child: Text('Messages')),
                ShadContextMenuItem(child: Text('Notes')),
              ],
              child: Text('Share'),
            ),
            divider,
            const ShadContextMenuItem(child: Text('Print...'))
          ],
          child: const Text('File'),
        ),
        ShadMenubarItem(
          items: [
            const ShadContextMenuItem(child: Text('Undo')),
            const ShadContextMenuItem(child: Text('Redo')),
            divider,
            ShadContextMenuItem(
              trailing: const Icon(LucideIcons.chevronRight),
              items: [
                const ShadContextMenuItem(child: Text('Search the web')),
                divider,
                const ShadContextMenuItem(child: Text('Find...'))
                const ShadContextMenuItem(child: Text('Find Next'))
                const ShadContextMenuItem(child: Text('Find Previous'))
              ],
              child: const Text('Find'),
            ),
            divider,
            const ShadContextMenuItem(child: Text('Cut'))
            const ShadContextMenuItem(child: Text('Copy'))
            const ShadContextMenuItem(child: Text('Paste'))
          ],
          child: const Text('Edit'),
        ),
        ShadMenubarItem(
          items: [
            const ShadContextMenuItem.inset(
              child: Text('Always Show Bookmarks Bar'),
            ),
            const ShadContextMenuItem(
              leading: Icon(LucideIcons.check),
              child: Text('Always Show Full URLs'),
            ),
            divider,
            const ShadContextMenuItem.inset(child: Text('Reload'))
            const ShadContextMenuItem.inset(
                enabled: false, child: Text('Force Reload'))
            divider,
            const ShadContextMenuItem.inset(
              child: Text('Toggle Full Screen'),
            ),
            divider,
            const ShadContextMenuItem.inset(child: Text('Hide Sidebar'))
          ],
          child: const Text('View'),
        ),
        ShadMenubarItem(items: [
          const ShadContextMenuItem.inset(child: Text('Andy'))
          ShadContextMenuItem(leading: square, child: const Text('Benoit'))
          const ShadContextMenuItem.inset(child: Text('Luis'))
          divider,
          const ShadContextMenuItem.inset(child: Text('Edit...'))
          divider,
          const ShadContextMenuItem.inset(child: Text('Add Profile...'))
        ], child: const Text('Profiles'))
      ],
    );
  }
}
```

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

### Shadcn IconButton Examples

Source: https://context7_llms

Illustrates various styles of Shadcn UI IconButtons, including primary, secondary, destructive, outline, ghost, loading, and gradient/shadow effects. Requires `shadcn_flutter` and `lucide_flutter`.

```dart
ShadIconButton(
  onPressed: () => print('Primary'),
  icon: const Icon(LucideIcons.rocket),
)
```

```dart
ShadIconButton.secondary(
  icon: const Icon(LucideIcons.rocket),
  onPressed: () => print('Secondary'),
)
```

```dart
ShadIconButton.destructive(
  icon: const Icon(LucideIcons.rocket),
  onPressed: () => print('Destructive'),
)
```

```dart
ShadIconButton.outline(
  icon: const Icon(LucideIcons.rocket),
  onPressed: () => print('Outline'),
)
```

```dart
ShadIconButton.ghost(
  icon: const Icon(LucideIcons.rocket),
  onPressed: () => print('Ghost'),
)
```

```dart
ShadIconButton(
  icon: SizedBox.square(
    dimension: 16,
    child: CircularProgressIndicator(
      strokeWidth: 2,
      color: ShadTheme.of(context).colorScheme.primaryForeground,
    ),
  ),
)
```

```dart
ShadIconButton(
  gradient: const LinearGradient(colors: [
    Colors.cyan,
    Colors.indigo,
  ]),
  shadows: [
    BoxShadow(
      color: Colors.blue.withValues(alpha: .4),
      spreadRadius: 4,
      blurRadius: 10,
      offset: const Offset(0, 2),
    ),
  ],
  icon: const Icon(LucideIcons.rocket),
)
```

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

### ShadCard for Project Creation Form (Dart)

Source: https://context7_llms

Implements a ShadCard component in Flutter to create a project setup form. It includes fields for project name, framework selection using ShadSelect, and action buttons for cancel and deploy.

```dart
const frameworks = {
  'next': 'Next.js',
  'react': 'React',
  'astro': 'Astro',
  'nuxt': 'Nuxt.js',
};

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

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return ShadCard(
      width: 350,
      title: Text('Create project', style: theme.textTheme.h4),
      description: const Text('Deploy your new project in one-click.'),
      footer: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          ShadButton.outline(
            child: const Text('Cancel'),
            onPressed: () {},
          ),
          ShadButton(
            child: const Text('Deploy'),
            onPressed: () {},
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text('Name'),
            const SizedBox(height: 6),
            const ShadInput(placeholder: Text('Name of your project')),
            const SizedBox(height: 16),
            const Text('Framework'),
            const SizedBox(height: 6),
            ShadSelect<String>(
              placeholder: const Text('Select'),
              options: frameworks.entries
                  .map((e) => ShadOption(value: e.key, child: Text(e.value)))
                  .toList(),
              selectedOptionBuilder: (context, value) {
                return Text(frameworks[value]!);
              },
              onChanged: (value) {},
            ),
          ],
        ),
      ),
    );
  }
}
```

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

### Show Shadcn Alert Dialog

Source: https://context7_llms

Demonstrates how to display a Shadcn alert dialog with title, description, and actions. Requires the `shadcn_flutter` package.

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

  @override
  Widget build(BuildContext context) {
    return ShadButton.outline(
      child: const Text('Show Dialog'),
      onPressed: () {
        showShadDialog(
          context: context,
          builder: (context) => ShadDialog.alert(
            title: const Text('Are you absolutely sure?'),
            description: const Padding(
              padding: EdgeInsets.only(bottom: 8),
              child: Text(
                'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
              ),
            ),
            actions: [
              ShadButton.outline(
                child: const Text('Cancel'),
                onPressed: () => Navigator.of(context).pop(false),
              ),
              ShadButton(
                child: const Text('Continue'),
                onPressed: () => Navigator.of(context).pop(true),
              ),
            ],
          ),
        );
      },
    );
  }
}
```

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

### Resizable Panel Group with Visible Handle in Dart

Source: https://context7_llms

Demonstrates enabling and customizing the resize handle in a ShadResizablePanelGroup using the `showHandle: true` property. This example displays a sidebar and content panel, with the handle clearly visible between them, allowing for user interaction.

```dart
class HandleResizable extends StatelessWidget {
  const HandleResizable({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return ConstrainedBox(
      constraints: const BoxConstraints(maxHeight: 200),
      child: DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: theme.radius,
            border: Border.all(
              color: theme.colorScheme.border,
            ),
          ),
          child: ClipRRect(
          borderRadius: theme.radius,
          child: ShadResizablePanelGroup(
            showHandle: true,
            children: [
              ShadResizablePanel(
                id: 0,
                defaultSize: .5,
                minSize: .2,
                child: Center(
                  child: Text('Sidebar', style: theme.textTheme.large),
                ),
              ),
              ShadResizablePanel(
                id: 1,
                defaultSize: .5,
                minSize: .2,
                child: Center(
                  child: Text('Content', style: theme.textTheme.large),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

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

### Display Shadcn UI Toasts with Actions in Flutter

Source: https://context7_llms

Demonstrates the integration of the Shadcn UI Sonner component to display informative toast messages in Flutter applications. The example shows how to create a toast with a title, description, and an optional action button (e.g., 'Undo'), using `ShadSonner.of(context).show()` to present the toast.

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    final sonner = ShadSonner.of(context);
    final id = Random().nextInt(1000);
    final now = DateTime.now();
    sonner.show(
      ShadToast(
        id: id,
        title: const Text('Event has been created'),
        description: Text(DateFormat.yMd().add_jms().format(now)),
        action: ShadButton(
          child: const Text('Undo'),
          onPressed: () => sonner.hide(id),
        ),
      ),
    );
  },
)

```

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

### Create Shadcn UI Color Schemes from Name

Source: https://context7_llms

This example demonstrates creating Shadcn UI color schemes dynamically using `ShadColorScheme.fromName`. It shows how to define available color scheme names and then instantiate light and dark color schemes based on user selection or application state. This is useful for implementing theme switching features.

```dart
// available color scheme names
final shadThemeColors = [
  'blue',
  'gray',
  'green',
  'neutral',
  'orange',
  'red',
  'rose',
  'slate',
  'stone',
  'violet',
  'yellow',
  'zinc',
];

final lightColorScheme = ShadColorScheme.fromName('blue');
final darkColorScheme = ShadColorScheme.fromName('slate', brightness: Brightness.dark);

```

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

### Install Geist Font via NPM

Source: https://vercel.com/font

This command installs the Geist font package using NPM, which is recommended for Next.js projects. It includes the full glyph set and supports 'font-feature-settings'. Ensure you have Node.js and NPM installed.

```bash
npm i geist
```

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

### Typography Styles in Shadcn UI (Dart)

Source: https://context7_llms

Provides examples of how to apply various text styles provided by Shadcn UI's `ShadTextTheme`. This includes styles for headings (h1Large, h1, h2, h3, h4), paragraphs (p), blockquotes, tables, lists, lead text, large, small, and muted text.

```dart
Text(
  'Taxing Laughter: The Joke Tax Chronicles',
  style: ShadTheme.of(context).textTheme.h1Large,
)
```

```dart
Text(
  'Taxing Laughter: The Joke Tax Chronicles',
  style: ShadTheme.of(context).textTheme.h1,
)
```

```dart
Text(
  'The People of the Kingdom',
  style: ShadTheme.of(context).textTheme.h2,
)
```

```dart
Text(
  'The Joke Tax',
  style: ShadTheme.of(context).textTheme.h3,
)
```

```dart
Text(
  'The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.',
  style: ShadTheme.of(context).textTheme.h4,
)
```

```dart
Text(
  'The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.',
  style: ShadTheme.of(context).textTheme.p,
)
```

```dart
Text(
  '"After all," he said, "everyone enjoys a good joke, so it\'s only fair that they should pay for the privilege."',
  style: ShadTheme.of(context).textTheme.blockquote,
)
```

```dart
Text(
  "King's Treasury",
  style: ShadTheme.of(context).textTheme.table,
)
```

```dart
Text(
  '1st level of puns: 5 gold coins',
  style: ShadTheme.of(context).textTheme.list,
)
```

```dart
Text(
  'A modal dialog that interrupts the user with important content and expects a response.',
  style: ShadTheme.of(context).textTheme.lead,
)
```

```dart
Text(
  'Are you absolutely sure?',
  style: ShadTheme.of(context).textTheme.large,
)
```

```dart
Text(
  'Email address',
  style: ShadTheme.of(context).textTheme.small,
)
```

```dart
Text(
  'Enter your email address.',
  style: ShadTheme.of(context).textTheme.muted,
)
```

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

### ShadButton in Loading State

Source: https://context7_llms

Illustrates how to display a ShadButton in a loading state using a `CircularProgressIndicator`. This provides visual feedback to the user that an action is in progress, preventing multiple submissions.

```dart
ShadButton(
  onPressed: () {},
  leading: SizedBox.square(
    dimension: 16,
    child: CircularProgressIndicator(
      strokeWidth: 2,
      color: ShadTheme.of(context).colorScheme.primaryForeground,
    ),
  ),
  child: const Text('Please wait'),
)
```

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

### Implement Determinate Progress Indicator in Flutter with Shadcn UI

Source: https://context7_llms

Displays a progress bar indicating task completion. This example uses ShadProgress with a specific value to show the progress. It's constrained to a maximum width relative to the screen size.

```dart
ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: MediaQuery.sizeOf(context).width * 0.6,
  ),
  child: const ShadProgress(value: 0.5),
),

```

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

### Toast Component in Flutter

Source: https://context7_llms

A succinct message that is displayed temporarily. Toasts can include titles, descriptions, actions, and can be destructive.

```dart
ShadButton.outline(
  child: const Text('Add to calendar'),
  onPressed: () {
    ShadToaster.of(context).show(
      ShadToast(
        title: const Text('Scheduled: Catch up'),
        description:
            const Text('Friday, February 10, 2023 at 5:57 PM'),
        action: ShadButton.outline(
          child: const Text('Undo'),
          onPressed: () => ShadToaster.of(context).hide(),
        ),
      ),
    );
  },
),

```

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      const ShadToast(
        description: Text('Your message has been sent.'),
      ),
    );
  },
),

```

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      const ShadToast(
        title: Text('Uh oh! Something went wrong'),
        description:
            Text('There was a problem with your request'),
      ),
    );
  },
),

```

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      ShadToast(
        title: const Text('Uh oh! Something went wrong'),
        description:
            const Text('There was a problem with your request'),
        action: ShadButton.outline(
          child: const Text('Try again'),
          onPressed: () => ShadToaster.of(context).hide(),
        ),
      ),
    );
  },
),

```

```dart
final theme = ShadTheme.of(context);

ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      ShadToast.destructive(
        title: const Text('Uh oh! Something went wrong'),
        description:
            const Text('There was a problem with your request'),
        action: ShadButton.destructive(
          child: const Text('Try again'),
          decoration: ShadDecoration(
            border: ShadBorder.all(
              color: theme.colorScheme.destructiveForeground,
              width: 1,
            ),
          ),
          onPressed: () => ShadToaster.of(context).hide(),
        ),
      ),
    );
  },
),

```

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

### Select Form Field Component in Flutter

Source: https://context7_llms

Illustrates integrating the ShadSelect component into a form using ShadSelectFormField. This example shows how to define an ID, initial value, options, a custom selected option builder, placeholder text, and a validator function for form submission.

```dart
final verifiedEmails = [
  'm@example.com',
  'm@google.com',
  'm@support.com',
];

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

  @override
  Widget build(BuildContext context) {
    return ShadSelectFormField<String>(
      id: 'email',
      minWidth: 350,
      initialValue: null,
      options: verifiedEmails
          .map((email) => ShadOption(value: email, child: Text(email)))
          .toList(),
      selectedOptionBuilder: (context, value) => value == 'none'
          ? const Text('Select a verified email to display')
          : Text(value),
      placeholder: const Text('Select a verified email to display'),
      validator: (v) {
        if (v == null) {
          return 'Please select an email to display';
        }
        return null;
      },
    );
  }
}
```

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

### Implement Indeterminate Progress Indicator in Flutter with Shadcn UI

Source: https://context7_llms

Displays an indeterminate progress indicator, useful when the task duration is unknown. This example uses ShadProgress without a specific value, showing an ongoing activity. It's constrained to a maximum width relative to the screen size.

```dart
ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: MediaQuery.sizeOf(context).width * 0.6,
  ),
  child: const ShadProgress(),
),

```

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

### Shadcn Input Field

Source: https://context7_llms

Displays a basic Shadcn UI input field with a placeholder. Useful for form elements. Requires the `shadcn_flutter` package.

```dart
ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 320),
  child: const ShadInput(
    placeholder: Text('Email'),
    keyboardType: TextInputType.emailAddress,
  ),
),
```

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

### Build Shadcn Form with Validation

Source: https://context7_llms

Creates a Flutter form using Shadcn UI components with input fields, validation, and submit functionality. Requires the `shadcn_flutter` package and `lucide_flutter` for icons if used.

```dart
class FormPage extends StatefulWidget {
  const FormPage({
    super.key,
  });

  @override
  State<FormPage> createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  final formKey = GlobalKey<ShadFormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ShadForm(
          key: formKey,
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 350),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                ShadInputFormField(
                  id: 'username',
                  label: const Text('Username'),
                  placeholder: const Text('Enter your username'),
                  description: const Text('This is your public display name.'),
                  validator: (v) {
                    if (v.length < 2) {
                      return 'Username must be at least 2 characters.';
                    }
                    return null;
                  },
                ),
                const SizedBox(height: 16),
                ShadButton(
                  child: const Text('Submit'),
                  onPressed: () {
                    if (formKey.currentState!.saveAndValidate()) {
                      print(
                          'validation succeeded with ${formKey.currentState!.value}');
                    } else {
                      print('validation failed');
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```

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

### ShadButton Link Variant

Source: https://context7_llms

Demonstrates the link ShadButton, styled to resemble a hyperlink. This is commonly used for navigation or actions within text flows.

```dart
ShadButton.link(
  child: const Text('Link'),
  onPressed: () {},
)
```

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

### Configure Shadcn UI Dark Theme and Color Scheme

Source: https://context7_llms

This example shows how to set up a dark theme for your Flutter application using Shadcn UI. It specifically configures `ShadApp` with a `ShadThemeData` object, defining the `brightness` as dark and applying a predefined color scheme, `ShadSlateColorScheme.dark()`. This provides a base for consistent dark mode styling.

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

@override
Widget build(BuildContext context) {
  return ShadApp(
    darkTheme: ShadThemeData(
      brightness: Brightness.dark,
      colorScheme: const ShadSlateColorScheme.dark(),
    ),
    child: ...
  );
}

```

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

### ShadButton Primary Variant

Source: https://context7_llms

Demonstrates the primary ShadButton, which is the main call to action for a user. It typically uses the application's main color scheme and is visually prominent.

```dart
ShadButton(
  child: const Text('Primary'),
  onPressed: () {},
)
```

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

### ShadButton with Text and Leading Icon

Source: https://context7_llms

Shows how to create a ShadButton that includes both text and a leading icon. This combination is often used for actions like 'Login with Email' or 'Add to Cart'.

```dart
ShadButton(
  onPressed: () {},
  leading: const Icon(LucideIcons.mail),
  child: const Text('Login with Email'),
)
```

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

### Flutter Shadcn UI Notifications Card

Source: https://context7_llms

Displays a card with notification settings and a list of recent notifications. It utilizes shadcn_ui for styling and includes a toggle for push notifications. Dependencies include 'awesome_flutter_extensions' and 'shadcn_ui'.

```dart
import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

const notifications = [
  (
    title: "Your call has been confirmed.",
    description: "1 hour ago",
  ),
  (
    title: "You have a new message!",
    description: "1 hour ago",
  ),
  (
    title: "Your subscription is expiring soon!",
    description: "2 hours ago",
  ),
];

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

  @override
  State<CardNotifications> createState() => _CardNotificationsState();
}

class _CardNotificationsState extends State<CardNotifications> {
  final pushNotifications = ValueNotifier(false);

  @override
  void dispose() {
    pushNotifications.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return ShadCard(
      width: 380,
      title: const Text('Notifications'),
      description: const Text('You have 3 unread messages.'),
      footer: ShadButton(
        width: double.infinity,
        leading: const Padding(
          padding: EdgeInsets.only(right: 8),
          child: Icon(LucideIcons.check),
        ),
        onPressed: () {},
        child: const Text('Mark all as read'),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(height: 16),
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              borderRadius: theme.radius,
              border: Border.all(color: theme.colorScheme.border),
            ),
            child: Row(
              children: [
                Icon(
                  LucideIcons.bellRing,
                  size: 24,
                  color: theme.colorScheme.foreground,
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Push Notifications',
                          style: theme.textTheme.small,
                        ),
                        const SizedBox(height: 4),
                        Text(
                          'Send notifications to device.',
                          style: theme.textTheme.muted,
                        )
                      ],
                    ),
                  ),
                ),
                ValueListenableBuilder(
                  valueListenable: pushNotifications,
                  builder: (context, value, child) {
                    return ShadSwitch(
                      value: value,
                      onChanged: (v) => pushNotifications.value = v,
                    );
                  },
                ),
              ],
            ),
          ),
          const SizedBox(height: 16),
          ...notifications
              .map(
                (n) => Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: 8,
                      height: 8,
                      margin: const EdgeInsets.only(top: 4),
                      decoration: const BoxDecoration(
                        color: Color(0xFF0CA5E9),
                        shape: BoxShape.circle,
                      ),
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('Your call has been confirmed.',
                                style: theme.textTheme.small), 
                            const SizedBox(height: 4),
                            Text(n.description, style: theme.textTheme.muted),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              )
              .separatedBy(const SizedBox(height: 16)),
          const SizedBox(height: 16),
        ],
      ),
    );
  }
}
```

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

### Context Menu Component in Dart

Source: https://context7_llms

Illustrates the implementation of the ShadContextMenuRegion widget in Flutter, which displays a menu triggered by a right-click. It supports nested menus, dividers, leading/trailing icons, and custom styling.

```dart
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

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

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: ShadContextMenuRegion(
          constraints: const BoxConstraints(minWidth: 300),
          items: [
            const ShadContextMenuItem.inset(
              child: Text('Back'),
            ),
            const ShadContextMenuItem.inset(
              enabled: false,
              child: Text('Forward'),
            ),
            const ShadContextMenuItem.inset(
              child: Text('Reload'),
            ),
            const ShadContextMenuItem.inset(
              trailing: Icon(LucideIcons.chevronRight),
              items: [
                ShadContextMenuItem(
                  child: Text('Save Page As...'),
                ),
                ShadContextMenuItem(
                  child: Text('Create Shortcut...'),
                ),
                ShadContextMenuItem(
                  child: Text('Name Window...'),
                ),
                Divider(height: 8),
                ShadContextMenuItem(
                  child: Text('Developer Tools'),
                ),
              ],
              child: Text('More Tools'),
            ),
            const Divider(height: 8),
            const ShadContextMenuItem(
              leading: Icon(LucideIcons.check),
              child: Text('Show Bookmarks Bar'),
            ),
            const ShadContextMenuItem.inset(child: Text('Show Full URLs significant')),            const Divider(height: 8),
            Padding(
              padding: const EdgeInsets.fromLTRB(36, 8, 8, 8),
              child: Text('People', style: theme.textTheme.small),
            ),
            const Divider(height: 8),
            ShadContextMenuItem(
              leading: SizedBox.square(
                dimension: 16,
                child: Center(
                  child: Container(
                    width: 8,
                    height: 8,
                    decoration: BoxDecoration(
                      color: theme.colorScheme.foreground,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ),
              child: const Text('Pedro Duarte'),
            ),
            const ShadContextMenuItem.inset(child: Text('Colm Tuite')),
          ],
          child: Container(
            width: 300,
            height: 200,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border.all(color: theme.colorScheme.border),
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Text('Right click here'),
          ),
        ),
      ),
    );
  }
}

```

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

### Default ShadDecoration Configuration

Source: https://context7_llms

Configures the default visual appearance of ShadDecoration, including borders, focus states, and text styles for labels, errors, and descriptions. This is useful for establishing a consistent UI theme.

```dart
ShadDecoration(
  secondaryBorder: ShadBorder.all(
    padding: const EdgeInsets.all(4),
    width: 0,
  ),
  secondaryFocusedBorder: ShadBorder.all(
    width: 2,
    color: colorScheme.ring,
    radius: radius.add(radius / 2),
    padding: const EdgeInsets.all(2),
  ),
  labelStyle: textTheme.muted.copyWith(
    fontWeight: FontWeight.w500,
    color: colorScheme.foreground,
  ),
  errorStyle: textTheme.muted.copyWith(
    fontWeight: FontWeight.w500,
    color: colorScheme.destructive,
  ),
  labelPadding: const EdgeInsets.only(bottom: 8),
  descriptionStyle: textTheme.muted,
  descriptionPadding: const EdgeInsets.only(top: 8),
  errorPadding: const EdgeInsets.only(top: 8),
  errorLabelStyle: textTheme.muted.copyWith(
    fontWeight: FontWeight.w500,
    color: colorScheme.destructive,
  ),
);
```

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

### ShadAccordion Component Usage

Source: https://context7_llms

Implements a ShadAccordion component to display vertically stacked content. Each item can be expanded or collapsed to reveal its associated content. This example shows the basic setup with custom data.

```dart
final details = [
  (
    title: 'Is it acceptable?',
    content: 'Yes. It adheres to the WAI-ARIA design pattern.',
  ),
  (
    title: 'Is it styled?',
    content:
        "Yes. It comes with default styles that matches the other components' aesthetic.",
  ),
  (
    title: 'Is it animated?',
    content:
        "Yes. It's animated by default, but you can disable it if you prefer.",
  ),
];

@override
Widget build(BuildContext context) {
  return ShadAccordion<({String content, String title})>(
    children: details.map(
      (detail) => ShadAccordionItem(
        value: detail,
        title: Text(detail.title),
        child: Text(detail.content),
      ),
    ),
  );
}
```

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

### UniversalImage Widget Examples for Flutter

Source: https://pub.dev/packages/universal_image

Demonstrates how to use the UniversalImage widget to display different types of image sources including assets, local files, network URLs, icons, and Base64 data. It highlights the unified approach to image handling and various customizable properties.

```dart
var image = UniversalImage(
  'assets/image.png', // path must start with 'assets'
  color: Colors.black,
  matchTextDirection: false,
  scale: 1.0,
  width: 100,
  height: 100,
  frameBuilder: null,
  errorBuilder: null,
  semanticLabel: null,
  excludeFromSemantics: false,
  colorBlendMode: BlendMode.clear,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  repeat: ImageRepeat.noRepeat,
  centerSlice: Rect.fromLTWH(0, 0, 100, 100),
  gaplessPlayback: false,
  isAntiAlias: false,
  filterQuality: FilterQuality.low,
  cacheWidth: 100,
  cacheHeight: 100,
  allowDrawingOutsideViewBox: false,
  placeholder: Container(),
  svgSkiaMode: true, // using flutter_svg on web, make sure building with FLUTTER_WEB_USE_SKIA=true
);
```

```dart
var image = UniversalImage(
  '/com.package.app/files/image.png', // image storage file path
  color: Colors.black,
  matchTextDirection: false,
  scale: 1.0,
  width: 100,
  height: 100,
  frameBuilder: null,
  errorBuilder: null,
  semanticLabel: null,
  excludeFromSemantics: false,
  colorBlendMode: BlendMode.clear,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  repeat: ImageRepeat.noRepeat,
  centerSlice: Rect.fromLTWH(0, 0, 100, 100),
  gaplessPlayback: false,
  isAntiAlias: false,
  filterQuality: FilterQuality.low,
  cacheWidth: 100,
  cacheHeight: 100,
  allowDrawingOutsideViewBox: false,
  svgSkiaMode: false,
  placeholder: Container(),
);
```

```dart
var image = UniversalImage(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
  color: Colors.black,
  matchTextDirection: false,
  scale: 1.0,
  width: 100,
  height: 100,
  frameBuilder: null,
  errorBuilder: null,
  semanticLabel: null,
  excludeFromSemantics: false,
  colorBlendMode: BlendMode.clear,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  repeat: ImageRepeat.noRepeat,
  centerSlice: Rect.fromLTWH(0, 0, 100, 100),
  gaplessPlayback: false,
  isAntiAlias: false,
  filterQuality: FilterQuality.low,
  cacheWidth: 100,
  cacheHeight: 100,
  allowDrawingOutsideViewBox: false,
  svgSkiaMode: false,
  placeholder: Container(),
);
```

```dart
var image = UniversalImage(
  Icons.add,
  color: Colors.black,
  size: 30,
  textDirection: TextDirection.ltr
);
```

```dart
Uint8List data = await loadImage();
var base64String = data.base64Image; // or replace any base64 image string
var image = UniversalImage(
  base64String,
  color: Colors.black,
  matchTextDirection: false,
  scale: 1.0,
  width: 100,
  height: 100,
  frameBuilder: null,
  errorBuilder: null,
  semanticLabel: null,
  excludeFromSemantics: false,
  colorBlendMode: BlendMode.clear,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  repeat: ImageRepeat.noRepeat,
  centerSlice: Rect.f
```

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

### Flutter: Basic Animation Syntax with flutter_animate

Source: https://pub.dev/packages/flutter_animate

Demonstrates the fundamental syntax for applying animation effects using the flutter_animate package. It shows how to wrap a widget in `Animate` and specify effects, as well as the shorthand `.animate()` extension method.

```dart
Text("Hello World!").animate(
  effects: [
    FadeEffect(),
    ScaleEffect(),
  ],
  child: Text("Hello World!"),
)
```

```dart
Text("Hello World!").animate().fade().scale()
```

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

### OTP Input with Digit Filtering (Dart)

Source: https://context7_llms

This example shows how to use `InputFormatters` with `ShadInputOTP` to restrict input to digits only. It configures the component for a 4-digit OTP and utilizes `FilteringTextInputFormatter.digitsOnly`.

```dart
ShadInputOTP(
  onChanged: (v) => print('OTP: $v'),
  maxLength: 4,
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
  ],
  children: const [
    ShadInputOTPGroup(
      children: [
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
      ],
    ),
  ],
)
```

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

### Flutter Table Component with Shadcn UI

Source: https://context7_llms

Creates a responsive table from a 2D array of children, suitable for displaying tabular data. This example demonstrates a list-based table with headers, footers, and custom column sizing.

```dart
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

const invoices = [
  (
    invoice: "INV001",
    paymentStatus: "Paid",
    totalAmount: r"$250.00",
    paymentMethod: "Credit Card",
  ),
  (
    invoice: "INV002",
    paymentStatus: "Pending",
    totalAmount: r"$150.00",
    paymentMethod: "PayPal",
  ),
  (
    invoice: "INV003",
    paymentStatus: "Unpaid",
    totalAmount: r"$350.00",
    paymentMethod: "Bank Transfer",
  ),
  (
    invoice: "INV004",
    paymentStatus: "Paid",
    totalAmount: r"$450.00",
    paymentMethod: "Credit Card",
  ),
  (
    invoice: "INV005",
    paymentStatus: "Paid",
    totalAmount: r"$550.00",
    paymentMethod: "PayPal",
  ),
  (
    invoice: "INV006",
    paymentStatus: "Pending",
    totalAmount: r"$200.00",
    paymentMethod: "Bank Transfer",
  ),
  (
    invoice: "INV007",
    paymentStatus: "Unpaid",
    totalAmount: r"$300.00",
    paymentMethod: "Credit Card",
  ),
];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(
            maxWidth: 600,
            // added just to center the table vertically
            maxHeight: 450,
          ),
          child: ShadTable.list(
            header: const [
              ShadTableCell.header(child: Text('Invoice')),
              ShadTableCell.header(child: Text('Status')),
              ShadTableCell.header(child: Text('Method')),
              ShadTableCell.header(
                alignment: Alignment.centerRight,
                child: Text('Amount'),
              ),
            ],
            footer: const [
              ShadTableCell.footer(child: Text('Total')),
              ShadTableCell.footer(child: Text('')),
              ShadTableCell.footer(child: Text('')),
              ShadTableCell.footer(
                alignment: Alignment.centerRight,
                child: Text(r'$2500.00'),
              ),
            ],
            columnSpanExtent: (index) {
              if (index == 2) return const FixedTableSpanExtent(130);
              if (index == 3) {
                return const MaxTableSpanExtent(
                  FixedTableSpanExtent(120),
                  RemainingTableSpanExtent(),
                );
              }
              // uses the default value
              return null;
            },
            children: invoices
                .map(
                  (invoice) => [
                    ShadTableCell(
                      child: Text(
                        invoice.invoice,
                        style: const TextStyle(
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                    ShadTableCell(child: Text(invoice.paymentStatus)),
                    ShadTableCell(child: Text(invoice.paymentMethod)),
                    ShadTableCell(
                      alignment: Alignment.centerRight,
                      child: Text(
                        invoice.totalAmount,
                      ),
                    ),
                  ],
                ),
          ),
        ),
      ),
    );
  }
}
```

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

### ShadAccordion Multiple Selection

Source: https://context7_llms

Demonstrates the 'multiple' variant of the ShadAccordion component, allowing users to open multiple items simultaneously. This is useful for displaying related information that users might want to compare. The setup is similar to the default Accordion.

```dart
final details = [
  (
    title: 'Is it acceptable?',
    content: 'Yes. It adheres to the WAI-ARIA design pattern.',
  ),
  (
    title: 'Is it styled?',
    content:
        "Yes. It comes with default styles that matches the other components' aesthetic.",
  ),
  (
    title: 'Is it animated?',
    content:
        "Yes. It's animated by default, but you can disable it if you prefer.",
  ),
];

@override
Widget build(BuildContext context) {
  return ShadAccordion<({String content, String title})>.multiple(
    children: details.map(
      (detail) => ShadAccordionItem(
        value: detail,
        title: Text(detail.title),
        child: Text(detail.content),
      ),
    ),
  );
}
```

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

### Switching UI based on Breakpoint using ShadResponsiveBuilder

Source: https://context7_llms

Demonstrates how to use ShadResponsiveBuilder with a switch statement to render different UI elements based on the current breakpoint. This provides a clear and exhaustive way to handle various screen sizes.

```dart
ShadResponsiveBuilder(
  builder: (context, breakpoint) {
    return switch (breakpoint) {
      ShadBreakpointTN() => const Text('Tiny'),
      ShadBreakpointSM() => const Text('Small'),
      ShadBreakpointMD() => const Text('Medium'),
      ShadBreakpointLG() => const Text('Large'),
      ShadBreakpointXL() => const Text('Extra Large'),
      ShadBreakpointXXL() => const Text('Extra Extra Large'),
    };
  },
),
```

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

### Multiple Date Picker Calendar (Dart)

Source: https://context7_llms

Configures a ShadCalendar to allow the selection of multiple dates within a specified range. This example shows how to set the number of months displayed, the overall date range, and the minimum/maximum number of selectable dates.

```dart
class MultipleCalendar extends StatefulWidget {
 const MultipleCalendar({super.key});

 @override
 State<MultipleCalendar> createState() => _MultipleCalendarState();
}

class _MultipleCalendarState extends State<MultipleCalendar> {
 final today = DateTime.now();

 @override
 Widget build(BuildContext context) {
   return ShadCalendar.multiple(
     numberOfMonths: 2,
     fromMonth: DateTime(today.year),
     toMonth: DateTime(today.year + 1, 12),
     min: 5,
     max: 10,
   );
 }
}
```

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

### Implement Radio Group with Shadcn UI in Flutter

Source: https://context7_llms

Creates a group of radio buttons allowing only one selection at a time. This example demonstrates a basic ShadRadioGroup with text labels and string values. It also includes a ShadRadioGroupFormField for integration into forms, with validation.

```dart
ShadRadioGroup<String>(
  items: [
    ShadRadio(
      label: Text('Default'),
      value: 'default',
    ),
    ShadRadio(
      label: Text('Comfortable'),
      value: 'comfortable',
    ),
    ShadRadio(
      label: Text('Nothing'),
      value: 'nothing',
    ),
  ],
),

```

```dart
enum NotifyAbout {
  all,
  mentions,
  nothing;

  String get message {
    return switch (this) {
      all => 'All new messages',
      mentions => 'Direct messages and mentions',
      nothing => 'Nothing',
    };
  }
}

ShadRadioGroupFormField<NotifyAbout>(
  label: const Text('Notify me about'),
  items: NotifyAbout.values.map(
    (e) => ShadRadio(
      value: e,
      label: Text(e.message),
    ),
  ),
  validator: (v) {
    if (v == null) {
      return 'You need to select a notification type.';
    }
    return null;
  },
),

```

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

### Use Geist Font with Next.js (Google Fonts)

Source: https://vercel.com/font

Integrate Geist Sans and Geist Mono into your Next.js project using the 'next/font/google' package. This method offers quick setup for web projects but may not include the full glyph set or 'font-feature-settings' support.

```javascript
import { Geist, Geist_Mono } from 'next/font/google';

// Add this code to your app/layout.js file
```