Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/sunarya-thito/shadcn_flutter

Shadcn/UI ported to Flutter (Unofficial)
https://github.com/sunarya-thito/shadcn_flutter
flutter flutter-package shadcn-ui ui ui-components
Last synced: about 6 hours ago
JSON representation
Shadcn/UI ported to Flutter (Unofficial)
Host: GitHub
URL: https://github.com/sunarya-thito/shadcn_flutter
Owner: sunarya-thito
License: bsd-3-clause
Created: 2024-02-12T05:24:42.000Z (12 months ago)
Default Branch: master
Last Pushed: 2025-01-29T19:30:01.000Z (5 days ago)
Last Synced: 2025-01-29T20:07:10.589Z (5 days ago)
Topics: flutter, flutter-package, shadcn-ui, ui, ui-components
Language: Dart
Homepage: https://sunarya-thito.github.io/shadcn_flutter/
Size: 20.9 MB
Stars: 185
Watchers: 6
Forks: 33
Open Issues: 64
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project

README

        # shadcn_flutter

![Pub Likes](https://img.shields.io/pub/likes/shadcn_flutter)

![Pub Points](https://img.shields.io/pub/points/shadcn_flutter)

![Pub Version](https://img.shields.io/pub/v/shadcn_flutter)

![GitHub Repo stars](https://img.shields.io/github/stars/sunarya-thito/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.

[Documentation](https://sunarya-thito.github.io/shadcn_flutter/) - [Pub.dev](https://pub.dev/packages/shadcn_flutter) - [Discord](https://discord.gg/ZzfBPQG4sV)

## Widgets

### Animation

[![AnimatedValueBuilder](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/animatedvaluebuilder.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/animated_value_builder)

[![Number Ticker](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/number_ticker.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/number_ticker)

[![RepeatedAnimationBuilder](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/repeatedanimationbuilder.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/repeated_animation_builder)

### Disclosure

[![Accordion](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/accordion.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/accordion)

[![Collapsible](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/collapsible.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/collapsible)

### Feedback

[![Alert](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/alert.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/alert)

[![Alert Dialog](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/alert_dialog.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/alert-dialog)

[![Circular Progress](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/circular_progress.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/circular-progress)

[![Progress Bar](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/progress.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/progress)

[![Skeleton](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/skeleton.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/skeleton)

[![Toast](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/toast.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/toast)

### Forms

[![Button](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/button.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/button)

[![Checkbox](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/checkbox.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/checkbox)

[![Chip Input](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/chip_input.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/chip_input)

[![Color Picker](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/colorpicker.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/color-picker)

[![Date Picker](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/datepicker.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/date_picker)

[![Form](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/form.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/form)

[![Input](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/input.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/input)

[![Input OTP](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/inputotp.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/input_otp)

[![Phone Input](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/phone_input.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/phone_input)

[![Radio Group](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/radiogroup.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/radio_group)

[![Select](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/select.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/select)

[![Slider](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/slider.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/slider)

[![Star Rating](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/star_rating.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/star_rating)

[![Switch](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/switch.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/switch)

[![Text Area](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/textarea.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/text_area)

[![Time Picker](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/time_picker.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/time_picker)

[![Toggle](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/toggle.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/toggle)

### Layout

[![Card](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/card.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/card)

[![Carousel](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/carousel.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/carousel)

[![Divider](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/divider.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/divider)

[![Resizable](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/resizable.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/resizable)

[![Stepper](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/stepper.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/stepper)

[![Steps](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/steps.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/steps)

[![Timeline](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/timeline.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/timeline)

### Navigation

[![Breadcrumb](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/breadcrumb.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/breadcrumb)

[![Menubar](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/menubar.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/menubar)

[![Navigation Menu](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/navigation_menu.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/navigation_menu)

[![Pagination](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/pagination.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/pagination)

[![Tabs](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/tabs.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/tabs)

[![Tab List](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/tablist.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/tab_list)

[![Tree](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/tree.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/tree)

### Surfaces

[![Dialog](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/dialog.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/dialog)

[![Drawer](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/drawer.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/drawer)

[![Hover Card](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/hover_card.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/hover_card)

[![Popover](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/popover.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/popover)

[![Sheet](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/sheet.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/sheet)

[![Tooltip](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/tooltip.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/tooltip)

### Data Display

[![Avatar](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/avatar.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/avatar)

[![Avatar Group](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/avatar_group.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/avatar_group)

[![Code Snippet](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/codesnippet.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/code-snippet)

[![Tracker](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/tracker.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/tracker)

### Utilities

[![Badge](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/badge.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/badge)

[![Calendar](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/calendar.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/calendar)

[![Command](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/command.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/command)

[![Context Menu](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/context_menu.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/context_menu)

[![Dropdown Menu](https://raw.githubusercontent.com/sunarya-thito/shadcn_flutter/master/docs_images/dropdown_menu.png)](https://sunarya-thito.github.io/shadcn_flutter/#/components/dropdown_menu)

## Installation

### Using CLI

#### 1. Activate the package

```bash

flutter pub global activate shadcn_flutter_cli

```

#### 2. Run the command

```bash

flutter pub global run shadcn_flutter_cli:setup

```

### Manual Installation

#### 1. Create a new Flutter project

```bash

flutter create my_app

cd my_app

```

#### 2. Add the dependency

```bash

flutter pub add shadcn_flutter

```

#### 3. Import the package

```dart

import 'package:shadcn_flutter/shadcn_flutter.dart';

```

#### 4. Use the widgets

```dart

void main() {

  runApp(

    ShadcnApp(

      title: 'My App',

      home: MyHomePage(),

      theme: ThemeData(

        colorScheme: ColorSchemes.darkZinc(),

        radius: 0.5,

      ),

    ),

  );

}

```

#### 5. Add the fonts

Add the following fonts to your `pubspec.yaml` file.

```yaml

  fonts:

    - family: RadixIcons

      fonts:

        - asset: "packages/shadcn_flutter/icons/RadixIcons.otf"

    - family: BootstrapIcons

      fonts:

        - asset: "packages/shadcn_flutter/icons/BootstrapIcons.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

```bash

flutter run

```