tsai_ui library
Enterprise Flutter components backed by the Tsai design system.
Classes
- Avatar
- A 32-pixel circular user avatar with an initials fallback.
- A centered glass bottom-navigation bar with one to five destinations.
- Immutable content for one BottomNavBar destination.
- CircleIcon
- A 20-pixel icon centered on the token-backed 40-pixel circular surface.
- HitIcon
- A 32-pixel interaction target with a centered, configurable-size icon.
- HomeTopBar
- A 76-pixel home-page top bar with composable edge slots.
- HomeTopBarAction
- A circular icon action for HomeTopBar.
- PageTopBar
- A 56-pixel glass secondary-page top bar with a centered title.
- PageTopBarAction
- A compact icon action for PageTopBar.
- PageWithSearchTopBar
- A scroll-owning page with a pinned glass app bar and search field.
- PageWithTopBar
- A page composition with a pinned PageTopBar and one owned scroll view.
- TsaiBadge
- A compact status pill with an optional leading dot.
- TsaiBadgeCounter
-
A compact notification count pill. Values above 99 are shown as
99+. - TsaiBadgeDot
- An 8 pixel status indicator.
- TsaiBorderTokens
- Border-width values sourced from Penpot.
- TsaiBottomSheet
- A composable Tsai bottom-sheet surface.
- TsaiButton
- A themed action button with loading, disabled, pointer, and keyboard states.
- TsaiButtonTheme
- Optional global style overrides for TsaiButton variants.
- TsaiCard
- A token-backed card surface with an optional title row and arbitrary body.
- TsaiCheckbox
- A controlled checkbox matching the Penpot Checkbox component.
- TsaiChip
- A selectable filter chip with optional leading and removable glyphs.
- TsaiColorTokens
- Semantic color roles shared by all components.
- TsaiCryptoIcon
- A scalable, full-color cryptocurrency icon from the Penpot asset pack.
- TsaiEffectTokens
- Semantic visual effects sourced from Penpot number tokens.
- TsaiEmptyState
- A centered empty state with an icon, explanatory copy, and optional button.
- TsaiGlow
- A decorative, theme-aware blurred accent glow for page backgrounds.
- TsaiGradientTokens
- Theme-aware reusable gradients sourced from Penpot color assets.
- TsaiIcon
- A stable square adapter for icon glyphs, emoji, and custom icon widgets.
- TsaiIconButton
- A 40 pixel icon button with optional badge overlay.
- TsaiIconButtonBadge
- Overlay shown on an icon button.
- TsaiIconButtonBadgeCount
- A notification count overlay.
- TsaiIconButtonBadgeDot
- An 8 pixel notification dot.
- TsaiIconButtonBadgeNone
- No notification overlay.
- TsaiInlineAlert
- A dismissible inline status message.
- TsaiInput
- A text input matching the Penpot Input component.
- TsaiLink
- A compact inline action matching the Penpot Link component.
- TsaiList
- A section header, list items, and an optional bottom button.
- TsaiListItem
- A composable list row with optional leading, trailing, and chevron slots.
- TsaiModalDialog
- A focused Tsai modal dialog surface.
- TsaiMotionTokens
- Semantic motion shared by interactive components.
- TsaiOtpInput
- A one-time-password input rendered as Penpot OTP cells.
- TsaiPhoneInput
- A phone input matching the Penpot Input Phone component.
- TsaiPhoneInputFormatter
- Formats a national phone number with a digit mask.
- TsaiPinInput
- A PIN input rendered as Penpot PIN dots.
- TsaiProgressBar
- A determinate four-pixel progress indicator.
-
TsaiRadio<
T> - A controlled radio button matching the Penpot Radio component.
- TsaiRadiusTokens
- Corner-radius values sourced from Penpot.
- TsaiSearchInput
- A compact single-line search field matching the Penpot Input Search states.
- TsaiSectionHeader
- A compact section label with an optional trailing icon slot.
-
TsaiSelect<
T> - A controlled generic select matching the Penpot Select component.
-
TsaiSelectOption<
T> - A selectable value shown by TsaiSelect.
- TsaiShadowTokens
- Theme-aware shadows sourced from Penpot.
- TsaiSkeletonAvatar
- A circular avatar placeholder.
- TsaiSkeletonCard
- A flexible-width card placeholder.
- TsaiSkeletonText
- A single-line text placeholder with a pill radius.
- TsaiSliverTabBar
- A sliver-hosted TsaiTabBar that can remain pinned while content scrolls.
- TsaiSpacingTokens
- Direction-neutral layout spacing values.
- TsaiSpinner
- An animated accent spinner matching the Penpot loader arc.
- TsaiSwitch
- A controlled switch matching the Penpot Switch component.
- TsaiTabBar
- The token-backed Tsai tab selector.
- TsaiTabContent
- Animated content coordinated by a TabController.
- TsaiTabs
- A convenient tab bar and content composition.
- TsaiTabSection
- A tab label and its corresponding content section.
- TsaiText
- Base class for text widgets backed by a valid Tsai typography role.
- TsaiTextBody
- Four-role Inter body text from the Tsai typography system.
- TsaiTextButton
- Two-size Inter button label from the Tsai typography system.
- TsaiTextCaption
- Four-role Inter caption from the Tsai typography system.
- TsaiTextHeading
- Four-size Inter heading from the Tsai typography system.
- TsaiTextMonoBody
- Two-size JetBrains Mono body text from the Tsai typography system.
- TsaiTextMonoCaption
- Two-weight JetBrains Mono caption from the Tsai typography system.
- TsaiTextMonoHeading
- Two-size JetBrains Mono heading from the Tsai typography system.
- TsaiTheme
- Installs canonical Tsai token sets into consumer-owned ThemeData.
- TsaiThemeTokens
- The complete semantic token schema consumed by Tsai components.
- TsaiTitle
- A page title with optional supporting text.
- TsaiToast
- A compact glass notification matching the Penpot Toast component.
- TsaiTypographyTokens
- Semantic typography roles sourced from the Penpot typography set.
- UserPill
- A compact user summary composed from an Avatar and a name.
Enums
- TsaiBadgeTone
- Semantic tone used by Tsai status indicators.
- TsaiBodySize
- Sizes available to Inter and monospaced body text.
- TsaiBottomSheetSize
- Bottom-sheet sizing policies.
- TsaiButtonSize
- Visual sizes defined by the Penpot button component.
- TsaiButtonTextSize
- Sizes available to TsaiTextButton.
- TsaiButtonTone
- Semantic color treatments supported by every button variant.
- TsaiButtonVariant
- Visual variants defined by the Penpot button component.
- TsaiCaptionSize
- Sizes available to TsaiTextCaption.
- TsaiControlLabelPosition
- Position of the label relative to a Tsai selection control.
- TsaiCryptoAsset
- Cryptocurrency assets included in the Penpot icon pack.
- TsaiHeadingSize
- Sizes available to TsaiTextHeading.
- TsaiInlineAlertTone
- Semantic tones supported by the Penpot Inline Alert component.
- TsaiModalDialogActionsLayout
- Penpot-supported arrangements for modal dialog actions.
- TsaiMonoHeadingSize
- Sizes available to TsaiTextMonoHeading.
- TsaiProgressBarLabelPosition
- Penpot-supported label arrangements for TsaiProgressBar.
- TsaiProgressBarState
- Semantic visual states for TsaiProgressBar.
- TsaiSelectPresentation
- Presentation used when a TsaiSelect opens.
- TsaiSkeletonSize
- Sizes shared by Tsai Skeleton placeholders.
- TsaiSpinnerSize
- Penpot-supported spinner sizes.
- TsaiTabBarFit
- How a TsaiTabBar distributes its tabs horizontally.
- TsaiTabContentLayout
- How TsaiTabContent participates in vertical layout.
- TsaiTextWeight
- Semantic text weights exposed by body and caption roles.
- TsaiToastVariant
- Penpot-supported Toast compositions.
Functions
-
showTsaiBottomSheet<
T> ({required BuildContext context, required String title, required Widget child, TsaiBottomSheetSize size = TsaiBottomSheetSize.content, List< Widget> leading = const [], List<Widget> trailing = const [], Widget? secondaryAction, Widget? primaryAction, bool? showCloseButton, bool isDismissible = true, bool enableDrag = true, String? barrierLabel}) → Future<T?> - Shows a modal TsaiBottomSheet and returns the value passed to Navigator.
-
showTsaiModalDialog<
T> ({required BuildContext context, required String title, required String message, required Widget icon, Widget? primaryAction, Widget? secondaryAction, TsaiModalDialogActionsLayout actionsLayout = TsaiModalDialogActionsLayout.row, bool barrierDismissible = true, String? barrierLabel, }) → Future< T?> - Shows a modal TsaiModalDialog and returns its Navigator result.