shadcn_jaspr 0.2.0 copy "shadcn_jaspr: ^0.2.0" to clipboard
shadcn_jaspr: ^0.2.0 copied to clipboard

Published 23 days ago • Latest: 0.4.3
[unknown platforms]
→

Metadata

A Dart port of shadcn/ui for the Jaspr web framework. Beautiful, accessible, and customizable UI components built with Tailwind CSS.

More...

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

Screenshots #

Light Mode #

Buttons, Badge, Card

Form Components

Tabs & Navigation

Overlay Components

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.1.0

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,
);

Requirements #

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

Contributing #

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

License #

MIT License. See LICENSE for details.

Acknowledgments #

← Metadata

2
likes
0
points
334
downloads

Publisher

unverified uploader

Weekly Downloads

Metadata

A Dart port of shadcn/ui for the Jaspr web framework. Beautiful, accessible, and customizable UI components built with Tailwind CSS.

Repository (GitHub)
View/report issues

Topics

#ui #components #web #jaspr #tailwind

License

unknown (license)

Dependencies

jaspr

More

Packages that depend on shadcn_jaspr

Back