shadcn_jaspr 0.4.3

A Dart port of shadcn/ui for the Jaspr web framework. Beautiful, accessible, and customizable UI components built with Tailwind CSS. Live demo: https://aurelvu.github.io/shadcn_jaspr/

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.

Live Demo

Screenshots

Light 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

Navigation

• 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

• shadcn/ui — The original React component library
• Jaspr — Dart web framework
• Tailwind CSS — Utility-first CSS framework