shadcn_flutter 0.0.40
shadcn_flutter: ^0.0.40 copied to clipboard
Beautifully designed components from Shadcn/UI is now available for Flutter
๐จ shadcn_flutter #
Beautifully designed components from shadcn/ui, now available for Flutter
๐ A comprehensive Flutter UI library inspired by shadcn/ui, providing elegant and customizable components for modern app development.
โจ Features #
- ๐จ 70+ Beautiful Components - From basic buttons to complex data tables
- ๐ Dark/Light Mode - Built-in theme switching with multiple color schemes
- ๐ฑ Responsive Design - Components that work seamlessly across all screen sizes
- ๐ฏ Type Safe - Full TypeScript-like experience with Dart's strong typing
- ๐ Performance First - Optimized components for smooth animations and interactions
- ๐จ Customizable - Easy theming and styling to match your brand
- ๐ฆ Tree Shakable - Import only what you need
๐งฉ Components Library #
๐ฌ Animation Components
| Component | Description | Preview |
|---|---|---|
| AnimatedValueBuilder | Smooth value transitions with custom curves | ![]() |
| Number Ticker | Animated number counting effects | ![]() |
| RepeatedAnimationBuilder | Looping animations made simple | ![]() |
๐ Disclosure Components
| Component | Description | Preview |
|---|---|---|
| Accordion | Collapsible content sections | ![]() |
| Collapsible | Hide and show content with smooth transitions | ![]() |
๐ข Feedback Components
| Component | Description | Preview |
|---|---|---|
| Alert | Display important messages and notifications | ![]() |
| Alert Dialog | Modal dialogs for confirmations and alerts | ![]() |
| Circular Progress | Loading indicators with smooth animations | ![]() |
| Progress Bar | Linear progress indicators | ![]() |
| Skeleton | Loading placeholders for content | ![]() |
| Toast | Non-intrusive notifications | ![]() |
๐ Form Components
| Component | Description | Preview |
|---|---|---|
| Button | Customizable buttons with multiple variants | ![]() |
| Checkbox | Interactive checkboxes with custom styling | ![]() |
| Chip Input | Input field with removable tags | ![]() |
| Color Picker | Advanced color selection interface | ![]() |
| Date Picker | Elegant date selection component | ![]() |
| Form | Complete form management system | ![]() |
| Input | Versatile text input fields | ![]() |
| Input OTP | One-time password input component | ![]() |
| Phone Input | International phone number input | ![]() |
| Radio Group | Single selection from multiple options | ![]() |
| Select | Dropdown selection component | ![]() |
| Slider | Range and value selection sliders | ![]() |
| Star Rating | Interactive rating component | ![]() |
| Switch | Toggle switches with smooth animations | ![]() |
| Text Area | Multi-line text input component | ![]() |
| Time Picker | Intuitive time selection interface | ![]() |
| Toggle | Button-style toggle component | ![]() |
๐ Layout Components
| Component | Description | Preview |
|---|---|---|
| Card | Flexible content containers | ![]() |
| Carousel | Image and content carousels | ![]() |
| Divider | Visual separation between content | ![]() |
| Resizable | User-resizable panels and layouts | ![]() |
| Stepper | Step-by-step process indicators | ![]() |
| Steps | Progress tracking for multi-step flows | ![]() |
| Timeline | Chronological content display | ![]() |
๐งญ Navigation Components
| Component | Description | Preview |
|---|---|---|
| Breadcrumb | Hierarchical navigation paths | ![]() |
| Menubar | Application menu bars | ![]() |
| Navigation Menu | Responsive navigation menus | ![]() |
| Pagination | Navigate through pages of content | ![]() |
| Tabs | Tabbed content organization | ![]() |
| Tab List | Horizontal tab navigation | ![]() |
| Tree | Hierarchical tree navigation | ![]() |
๐ช Surface Components
| Component | Description | Preview |
|---|---|---|
| Dialog | Modal dialogs and overlays | ![]() |
| Drawer | Slide-out navigation panels | ![]() |
| Hover Card | Content previews on hover | ![]() |
| Popover | Contextual popup content | ![]() |
| Sheet | Bottom sheets and side panels | ![]() |
| Tooltip | Helpful context information | ![]() |
๐ Data Display Components
| Component | Description | Preview |
|---|---|---|
| Avatar | User profile pictures and initials | |
| Avatar Group | Multiple user avatars in groups | |
| Code Snippet | Syntax-highlighted code blocks | ![]() |
| Tracker | Data visualization and tracking |
๐ง Utility Components
| Component | Description | Preview |
|---|---|---|
| Badge | Status indicators and labels | ![]() |
| Calendar | Full-featured calendar widget | ![]() |
| Command | Command palette interface | ![]() |
| Context Menu | Right-click context menus | ![]() |
| Dropdown Menu | Action menus and dropdowns | ![]() |
๐ค Contributing & Support #
We welcome contributions from the community! Here's how you can help make shadcn_flutter even better:
๐ Ways to Contribute #
๐ฐ Financial Support
- ๐ GitHub Sponsors - Support ongoing development
- ๐ฐ PayPal - Support ongoing development
- โญ Star the repository - Help us reach more developers
- ๐ข Share the project - Spread the word in your community
๐ ๏ธ Code Contributions
- ๐ Bug fixes - Help us squash those pesky bugs
- โจ New features - Add components or enhance existing ones
- ๐ Documentation - Improve guides, examples, and API docs
- ๐งช Testing - Write tests to improve reliability
๐จ๏ธ Community Support
- ๐ฌ Join our Discord - Get help and connect with other developers
- ๐ค Help others - Answer questions and share your knowledge
- ๐ Write tutorials - Create blog posts or video tutorials
๐ Recognition #
This project is funded and maintained by the community. Every contribution, no matter how small, makes a difference and helps ensure the continued development of shadcn_flutter.
Thank you to all our contributors and supporters! ๐
Built with โค๏ธ by Thito Yalasatria Sunarya and the community
Made in Indonesia ๐ฎ๐ฉ





















































