shadcn_flutter Documentation

shadcn_flutter is a cohesive UI ecosystem for Flutter applications (mobile, web, and desktop) based on the shadcn/ui design system. It is designed to provide a consistent, production-ready experience that can replace Material or Cupertino design systems.

Key features include:

• Over 84 components.
• A standalone ecosystem that does not require Material or Cupertino, though it supports interop.
• Implementation of shadcn/ui design tokens and the 'New York' theme.
• Cross-platform support for Android, iOS, Web, macOS, Windows, and Linux.
• Typography extensions for various widget purposes.

The GenUI Chat Example is a full chat application that integrates OpenRouter models with shadcn_flutter widgets. It uses the genui package and the shadcn_flutter_genui catalog to transform model responses into interactive UI.

Key features:

• Plain Text Replies: Rendered as standard chat bubbles using shadcn_flutter's ChatBubble.
• Live UI Generation: When the model emits A2UI messages, they are parsed and rendered inline as real shadcn_flutter widgets (e.g., forms, cards, buttons, sliders, tabs).
• Interactive Loops: User interactions with the generated widgets are fed back to the model to maintain conversational context.

The shadcn_flutter monorepo contains several specialized packages for using shadcn-inspired components in Flutter:

• shadcn_flutter: The core published library. This is the primary package you will install to use the components in your applications.
• shadcn_flutter_genui: A GenUI catalog designed to render AI-generated interfaces using shadcn_flutter widgets.
• shadcn_flutter/example: A minimal consumer application demonstrating how to integrate and use the library.
• docs: A Flutter Web-based component gallery and documentation site.
• gen: Developer tooling for generating icons, styles, colors, and documentation/LLM references.

The Carousel component provides a flexible way to display a sequence of items with support for sliding or fading transitions, autoplay, and manual navigation.

Key Features

• Transitions: Supports sliding and fading with customizable timing.
• Autoplay: Configurable automatic progression with autoplaySpeed and autoplayReverse options.
• Navigation: Programmatic control via CarouselController and support for touch gestures/dragging.
• Layout: Supports both horizontal and vertical orientations (Axis), multiple alignment options, and responsive sizing via CarouselSizeConstraint.

The CodeSnippet component includes the following built-in features:

• Syntax Highlighting: Supports automatic language detection and coloring.
• Copy to Clipboard: Includes a built-in copy button that provides toast confirmation.
• Custom Actions: Allows adding extra buttons via the actions property.
• Responsive Design: Supports both horizontal and vertical scrolling for long code blocks.
• Theme Integration: Automatically adapts to light and dark themes.
• Loading States: Provides smooth loading indicators during initialization.

The Select component includes the following built-in features:

• Responsive design: Adapts to different screen sizes and layouts.
• Customizable styling: Highly configurable via properties like borderRadius, padding, and constraints.
• Accessibility support: Built with accessibility standards in mind for inclusive user interaction.