# fluttertpc_shadcn_flutter

**Repository Path**: depth0/fluttertpc_shadcn_flutter

## Basic Information

- **Project Name**: fluttertpc_shadcn_flutter
- **Description**: shadcn ui for ohos flutter 3.22
- **Primary Language**: Dart
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-04-18
- **Last Updated**: 2025-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

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

A set of widgets and utilities for building applications in flutter.
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. Run the app
```bash
flutter run
```

## Contributing
The project is funded by the community. If you find this project helpful, consider supporting its development by:

- Starring the [GitHub repository](https://github.com/sunarya-thito/shadcn_flutter).
- Contributing code, documentation, or bug reports.
- Sponsoring the project via [GitHub Sponsors](https://github.com/sponsors/sunarya-thito).
- Sharing the project with others who might find it useful.

Your support helps ensure the continued development and maintenance of this project. Thank you!