Deepyr

A type-safe Dart implementation of DaisyUI components for Jaspr.

Deepyr package
verified

Type Safety

Catch styling errors at compile time, not runtime. Say goodbye to typo-prone CSS class strings.

auto_fix_high

Fluent API

Chain modifiers intuitively for responsive and state-based designs with methods like .at(Breakpoint.md).

devices

Responsive

Built-in breakpoint support makes it easy to create adaptive layouts for any screen size.

palette

DaisyUI Faithful

Provides a near 1:1 mapping of DaisyUI components, giving you full creative control.

Write UI with confidence.

From brittle, error-prone strings to a fully type-safe and expressive API.

Jaspr with manual DaisyUI classes.

Prone to typos, hard to read, and no autocomplete. 
// Jaspr with manual DaisyUI classes.
div([
    figure([img(src: '/images/sneaker.png', alt: 'Shoes')]),
    div(classes: 'card-body', [
      h2(classes: 'card-title', [
        text('Shoes!'),
        div(classes: 'badge badge-secondary', [text('NEW')]),
      ]),
      p([text('If a dog chews shoes whose shoes does he choose?')]),
      div(classes: 'card-actions justify-end', [
        button(
          [text('Buy Now')],
          classes: 'btn btn-primary',
        ),
      ]),
    ]),
  ],
  classes: 'card w-full sm:w-96 bg-base-100 shadow-xl transition-shadow hover:shadow-2xl',
)

The Deepyr Way. Fully type-safe, composable, and fluent.

Full IDE support, compile-time checks, and clean code. 
// The Deepyr Way: Fully type-safe, composable, and fluent.
Card([
    Figure([img(src: '/images/sneaker.png', alt: 'Shoes')]),
    CardBody([
      CardTitle([
        text('Shoes!'),
        Badge([text('NEW')], style: [Badge.secondary]),
      ]),
      p([text('If a dog chews shoes whose shoes does he choose?')]),
      CardActions(
        [Button([text('Buy Now')], style: [Button.primary])],
        style: [Alignment.justifyEnd],
      ),
    ]),
  ],
  style: [Size.wFull, Size.w96.at(Breakpoint.sm), BgUtil.base100, Effects.shadowXl, Effects.shadow2xl.on([Is.hover])],
)

Getting Started

A quick guide to get the example project up and running.

1 Install Dependencies

Install the Node.js and Dart dependencies.

npm install
dart pub get

2 Run Development Servers

You'll need two separate terminals.

Terminal 1: Tailwind CSS

npx tailwindcss -i ./web/styles.tw.css -o ./web/styles.css --watch

Terminal 2: Jaspr Server

jaspr build
jaspr serve -v