shadcn_theme 0.1.10 copy "shadcn_theme: ^0.1.10" to clipboard
shadcn_theme: ^0.1.10 copied to clipboard

Theme-only Flutter package for shadcn color themes and style presets.

shadcn_theme #

A theme-only Flutter package for shadcn color themes and style presets.

This package does not ship or wrap any components. It provides token registries, ThemeData factories, and a ThemeExtension so your own Flutter widgets can use shadcn-inspired colors, typography, spacing, radius, density, borders, shadows, and state layers.

Features #

  • 24 official shadcn color themes.
  • 7 official shadcn style presets: Vega, Nova, Maia, Lyra, Mira, Luma, and Sera.
  • Light and dark ThemeData factories.
  • Complete token access for chart and sidebar colors.
  • ThemeData and BuildContext token accessors.
  • Stable string lookup helpers for theme ids, style ids, and color token names.
  • Example Flutter app under example/.
  • No runtime network requests and no npm dependency.

Color values are generated from the official shadcn apps/v4/registry/themes.ts source. Accent-style themes such as blue and amber are pre-merged with the official default neutral base color.

shadcn/ui is MIT licensed; this package keeps its generated token data static so apps do not need the JavaScript registry at runtime.

Usage #

import 'package:flutter/material.dart';
import 'package:shadcn_theme/shadcn_theme.dart';

MaterialApp(
  theme: ShadcnThemeData.light(
    theme: ShadcnThemeName.zinc,
    style: ShadcnStyleName.nova,
  ),
  darkTheme: ShadcnThemeData.dark(
    theme: ShadcnThemeName.zinc,
    style: ShadcnStyleName.nova,
  ),
  home: const MyApp(),
);

Override the base radius while keeping the selected style's shape ratios:

final theme = ShadcnThemeData.light(
  theme: ShadcnThemeName.emerald,
  style: ShadcnStyleName.luma,
  radius: 14,
);

Read tokens from the active theme:

final shadcn = context.shadcnTheme;
final optional = Theme.of(context).maybeShadcnTheme;
final chartColors = shadcn.colors.charts;
final sidebarBackground = shadcn.colors.get('sidebar');
final cardPadding = shadcn.style.cardPaddingInsets;
final brightness = shadcn.brightness;

Read tokens without a BuildContext:

final themeName = ShadcnThemeNames.parse('blue');
final styleName = ShadcnStyleNames.parse('mira');
final tokens = themeName.tokens.light;
final styles = styleName.tokens;

Example #

Run the bundled example app:

cd example
flutter run

Run the example smoke test:

cd example
flutter test

The example switches color themes, style presets, and brightness while using the same package API that applications consume.

Token Updates #

Generated token maintenance rules are documented in doc/token_generation.md.

The 0.1.x public API contract is documented in doc/api_contract.md.

Release validation is documented in doc/release_checklist.md.

Scope #

This package intentionally does not implement shadcn widgets. Use Flutter, Material, or your own components and let this package supply the design system tokens and Flutter theme mapping.

0
likes
160
points
309
downloads

Documentation

Documentation
API reference

Publisher

unverified uploader

Weekly Downloads

Theme-only Flutter package for shadcn color themes and style presets.

Repository (GitHub)
View/report issues

Topics

#flutter #theme #shadcn #material #design-system

License

MIT (license)

Dependencies

flutter

More

Packages that depend on shadcn_theme