# Shadcn Ui Getting Started

> Install and set up Flutter Shadcn UI (shadcn_ui), configure ShadApp with Material or Cupertino, and use bundled packages. Use when starting a Flutter project with shadcn_ui, adding shadcn_ui dependency, or integrating Shadcn with MaterialApp/CupertinoApp.

- **Type:** Skill
- **Install:** `agentstack add skill-serverpod-skills-registry-shadcn-ui-getting-started`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [serverpod](https://agentstack.voostack.com/s/serverpod)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** BSD-3-Clause
- **Upstream author:** [serverpod](https://github.com/serverpod)
- **Source:** https://github.com/serverpod/skills-registry/tree/main/skills/shadcn_ui/shadcn_ui-getting-started

## Install

```sh
agentstack add skill-serverpod-skills-registry-shadcn-ui-getting-started
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Shadcn UI for Flutter — Getting Started

## Instructions

### Installation

From the project root:

```bash
flutter pub add shadcn_ui
```

Or add to `pubspec.yaml`:

```yaml
dependencies:
  shadcn_ui: ^0.2.4  # use latest version
```

### Shadcn only (pure)

Use `ShadApp` for apps that use only Shadcn UI components (no Material/Cupertino):

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

For declarative routing use `ShadApp.router`.

### Shadcn + Material

Use `ShadApp.custom` with `appBuilder` to wrap `MaterialApp` and use shadcn and Material together. Wrap the app with `ShadAppBuilder` in the builder:

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

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

Use `MaterialApp.router` when using the Router API.

ShadApp builds a default Material `ThemeData` from `ShadThemeData` (fontFamily, extensions, colorScheme mapping, dividerTheme, textSelectionTheme, iconTheme, scrollbarTheme). Override with `Theme.of(context).copyWith(...)` without losing shadcn defaults.

### Shadcn + Cupertino

Use `CupertinoApp` inside `appBuilder` for Cupertino + shadcn:

```dart
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

return ShadApp.custom(
  themeMode: ThemeMode.dark,
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(),
  ),
  appBuilder: (context) {
    return CupertinoApp(
      theme: CupertinoTheme.of(context),
      localizationsDelegates: const [
        DefaultMaterialLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
        DefaultWidgetsLocalizations.delegate,
      ],
      builder: (context, child) {
        return ShadAppBuilder(child: child!);
      },
    );
  },
);
```

Use `CupertinoApp.router` for Router-based navigation. Override Cupertino theme with `CupertinoTheme.of(context).copyWith(...)`.

### Bundled packages

Shadcn UI re-exports these packages; no extra imports needed:

- **flutter_animate** — Animations; components accept `List` for customization.
- **lucide_icons_flutter** — Icons via `LucideIcons` (e.g. `LucideIcons.activity`). Browse at https://lucide.dev/icons/
- **two_dimensional_scrollables** — Used by `ShadTable`.
- **intl** — i18n and message translation.
- **universal_image** — Multiple image formats; used by `ShadAvatar`.

### Submit your app

To add your app to the showcase: [open the GitHub template](https://github.com/nank1ro/flutter-shadcn-ui/issues/new?template=docs-add-app.yaml) and fill the form.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [serverpod](https://github.com/serverpod)
- **Source:** [serverpod/skills-registry](https://github.com/serverpod/skills-registry)
- **License:** BSD-3-Clause

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-serverpod-skills-registry-shadcn-ui-getting-started
- Seller: https://agentstack.voostack.com/s/serverpod
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.