shadcn_jaspr

A Dart port of shadcn/ui for the Jaspr web framework.

Beautiful, accessible, and customizable UI components built with Tailwind CSS — now available for Dart web apps.

pub package License: MIT

Live Demo

Screenshots

Light Mode

Inputs

Display

Navigation

Overlays

Layout

Feedback

Charts

Blocks

Dark Mode

Dark Mode

Components

Base

  • Button — 6 variants (default, destructive, outline, secondary, ghost, link) and 8 sizes
  • Badge — 4 variants (default, secondary, destructive, outline)
  • Card — With Header, Title, Description, Content, and Footer sub-components
  • Input — Text input with placeholder, disabled state, and file input support
  • Label — Accessible label with htmlFor binding
  • Separator — Horizontal and vertical dividers

Form

  • Checkbox — Controlled checkbox with checked/disabled states
  • Switch — Toggle switch with default and small sizes
  • Textarea — Auto-resizing text area
  • Select — Custom dropdown select with items and separators
  • RadioGroup — Radio button group with scoped state
  • Tabs — Tab panels with default and line variants
  • Breadcrumb — Navigation breadcrumbs with separators
  • Pagination — Page navigation with previous/next and ellipsis

Overlay

  • Dialog — Modal dialog with header, footer, and close button
  • Sheet — Slide-in panel from any side (top, right, bottom, left)
  • DropdownMenu — Context menu with items, labels, and separators
  • Tooltip — Hover/focus tooltip with configurable side and delay
  • Popover — Click-triggered popover with content

Getting Started

1. Add the dependency

dependencies:
  shadcn_jaspr: ^0.4.2

2. Set up Tailwind CSS

Copy the theme CSS file from package:shadcn_jaspr/web/styles/globals.tw.css to your project's web/styles/ directory. This file defines CSS custom properties for the color theme (light and dark mode).

Your globals.tw.css:

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* ... color tokens, border-radius tokens ... */
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

3. Import and use components

import 'package:jaspr/jaspr.dart';
import 'package:shadcn_jaspr/shadcn_jaspr.dart';

class MyPage extends StatelessComponent {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield ShadButton(
      [text('Click me')],
      variant: ButtonVariant.destructive,
      onPressed: () => print('Clicked!'),
    );
  }
}

Usage Examples

Button

ShadButton([text('Default')])
ShadButton([text('Destructive')], variant: ButtonVariant.destructive)
ShadButton([text('Outline')], variant: ButtonVariant.outline)
ShadButton([text('Small')], size: ButtonSize.sm)
ShadButton([text('Disabled')], isDisabled: true)

Card

ShadCard([
  ShadCardHeader([
    ShadCardTitle([text('Card Title')]),
    ShadCardDescription([text('Card description.')]),
  ]),
  ShadCardContent([
    p([text('Card content area.')]),
  ]),
  ShadCardFooter([
    ShadButton([text('Cancel')], variant: ButtonVariant.outline),
    ShadButton([text('Save')]),
  ]),
])

Dialog

ShadDialog(children: [
  ShadDialogTrigger([
    ShadButton([text('Open Dialog')], variant: ButtonVariant.outline),
  ]),
  ShadDialogContent([
    ShadDialogHeader([
      ShadDialogTitle([text('Are you sure?')]),
      ShadDialogDescription([text('This action cannot be undone.')]),
    ]),
    ShadDialogFooter([
      ShadButton([text('Cancel')], variant: ButtonVariant.outline),
      ShadButton([text('Continue')]),
    ]),
  ]),
])

Tabs

ShadTabs(
  defaultValue: 'account',
  children: [
    ShadTabsList([
      ShadTabsTrigger(value: 'account', children: [text('Account')]),
      ShadTabsTrigger(value: 'password', children: [text('Password')]),
    ]),
    ShadTabsContent(value: 'account', children: [text('Account tab')]),
    ShadTabsContent(value: 'password', children: [text('Password tab')]),
  ],
)

Dark Mode

Toggle dark mode by adding/removing the dark class on the <html> element:

document.documentElement?.classList.toggle('dark');

Utilities

cn() — Class Name Merging

cn(['flex', 'items-center', null, '', 'gap-2'])
// => 'flex items-center gap-2'

CVA — Class Variance Authority

Manage component variant styles with type-safe enums:

final buttonCva = CVA<ButtonVariant, ButtonSize>(
  base: 'inline-flex items-center justify-center rounded-md',
  variants: { ButtonVariant.destructive: 'bg-destructive text-white' },
  sizes: { ButtonSize.sm: 'h-8 px-3 text-xs' },
);

final classes = buttonCva.resolve(
  variant: ButtonVariant.destructive,
  size: ButtonSize.sm,
);

Layout & Structure

  • Typography — H1-H4, P, Blockquote, List, Code, Lead, Large, Small, Muted
  • Direction — RTL/LTR direction provider with InheritedComponent scope
  • Empty — Empty state with header, media, title, description, and content
  • Item — Composable item with media, content, title, description, actions
  • Field — Field set, legend, label, description, error list for structured forms

Groups & Composition

  • Button Group — Horizontal/vertical button grouping with border clipping
  • Input Group — Composite inputs with addons, buttons, and text
  • Native Select — Styled <select> with chevron icon overlay

Feedback

  • Spinner — Animated SVG loading spinner with accessibility attributes
  • Kbd — Keyboard shortcut display with group support
  • Sonner — Alternative toast API with CSS variable styling

Data Visualization

  • Chart — SVG-based charts with config, tooltip, legend, bar, and line renderers

Requirements

  • Dart SDK ^3.6.0
  • Jaspr ^0.22.0
  • Tailwind CSS (for styling)

AI / LLM Integration

This project ships with configuration files for AI-powered code editors and LLM agents:

File Purpose
llms.txt Short index for LLM agent discovery (llms.txt standard)
llms-full.txt Complete API reference — all 60 components, props, enums, usage examples
CLAUDE.md Claude Code project instructions for contributors
.cursorrules Cursor IDE rules with component creation templates
.github/copilot-instructions.md GitHub Copilot instructions for library consumers

For AI agents: point your LLM at llms-full.txt for the complete reference needed to generate correct code with this library.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License. See LICENSE for details.

Acknowledgments

Libraries

shadcn_jaspr
shadcn/ui components for Jaspr.