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