shadcn_flutter 0.0.14 copy "shadcn_flutter: ^0.0.14" to clipboard
shadcn_flutter: ^0.0.14 copied to clipboard

Beautifully designed components from Shadcn/UI is now available for Flutter

shadcn_flutter #

A set of widgets and utilities for building applications in flutter. Optimized for web applications. This is a port of the shadcn UI package to flutter.

Visit Documentation

Widgets #

Animation #

AnimatedValueBuilder RepeatedAnimationBuilder

Disclosure #

Accordion Collapsible

Feedback #

Alert Alert Dialog Circular Progress Progress Bar Skeleton

Forms #

Button Checkbox Color Picker Date Picker Form Input Input OTP Radio Group Select Slider Switch Text Area Toggle

Layout #

Card Carousel Divider Resizable Steps

Breadcrumb Menubar Pagination Tabs Tab List

Surfaces #

Dialog Drawer Popover Sheet Tooltip

Data Display #

Avatar Code Snippet

Utilities #

Badge Calendar Command Context Menu Dropdown Menu

Installation #

Using CLI #

1. Activate the package

flutter pub global activate shadcn_flutter_cli

2. Run the command

flutter pub global run shadcn_flutter_cli:setup

Manual Installation #

1. Create a new Flutter project

flutter create my_app
cd my_app

2. Add the dependency

flutter pub add shadcn_flutter

3. Import the package

import 'package:shadcn_flutter/shadcn_flutter.dart';

4. Use the widgets

void main() {
  runApp(
    ShadcnApp(
      title: 'My App',
      home: MyHomePage(),
      theme: ThemeData(
        brightness: Brightness.dark,
        colorScheme: ColorSchemes.darkZync(),
        radius: 0.5,
      ),
    ),
  );
}

5. Add the fonts

Add the following fonts to your pubspec.yaml file.

  fonts:
    - family: RadixIcons
      fonts:
        - asset: "packages/shadcn_flutter/icons/RadixIcons.otf"
    - family: "GeistSans"
      fonts:
        - asset: "packages/shadcn_flutter/fonts/Geist-Black.otf"
          weight: 800
        - asset: "packages/shadcn_flutter/fonts/Geist-Bold.otf"
          weight: 700
        - asset: "packages/shadcn_flutter/fonts/Geist-Light.otf"
          weight: 300
        - asset: "packages/shadcn_flutter/fonts/Geist-Medium.otf"
          weight: 500
        - asset: "packages/shadcn_flutter/fonts/Geist-SemiBold.otf"
          weight: 600
        - asset: "packages/shadcn_flutter/fonts/Geist-Thin.otf"
          weight: 100
        - asset: "packages/shadcn_flutter/fonts/Geist-UltraBlack.otf"
          weight: 900
        - asset: "packages/shadcn_flutter/fonts/Geist-UltraLight.otf"
          weight: 200
        - asset: "packages/shadcn_flutter/fonts/Geist-Regular.otf"
          weight: 400
    - family: "GeistMono"
      fonts:
        - asset: "packages/shadcn_flutter/fonts/GeistMono-Black.otf"
          weight: 800
        - asset: "packages/shadcn_flutter/fonts/GeistMono-Bold.otf"
          weight: 700
        - asset: "packages/shadcn_flutter/fonts/GeistMono-Light.otf"
          weight: 300
        - asset: "packages/shadcn_flutter/fonts/GeistMono-Medium.otf"
          weight: 500
        - asset: "packages/shadcn_flutter/fonts/GeistMono-Regular.otf"
          weight: 400
        - asset: "packages/shadcn_flutter/fonts/GeistMono-SemiBold.otf"
          weight: 600
        - asset: "packages/shadcn_flutter/fonts/GeistMono-Thin.otf"
          weight: 100
        - asset: "packages/shadcn_flutter/fonts/GeistMono-UltraBlack.otf"
          weight: 900
        - asset: "packages/shadcn_flutter/fonts/GeistMono-UltraLight.otf"
          weight: 200

6. Run the app

flutter run