# 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)

## 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.darkZync(),
        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
```