Duxt UI

Pre-built, styled UI components for Jaspr - buttons, inputs, badges, alerts, spinners, switches, and more. Drop them into any Duxt app with zero configuration.

What is Duxt UI?

Duxt UI provides ready-to-use components that handle styling, variants, and accessibility out of the box. Instead of building form controls and feedback elements from scratch with raw HTML, use typed Dart components with variant props like color, variant, and size.

Why Duxt UI?

Zero Configuration

Components come pre-styled with a consistent dark/light theme. No CSS to write, no design tokens to configure.

Type-Safe Variants

Every option is an enum. DButtonColor.primary, DButtonVariant.outline - your IDE catches mistakes before the browser does.

Works with Duxt HTML

Duxt UI components return standard Jaspr Components. Mix them freely with duxt_html elements, Tailwind classes, or raw Jaspr.

Fully Customizable

Every component supports className for Tailwind overrides, id, attributes, and events for full HTML control. Smart class merging replaces conflicting Tailwind utilities automatically.

Installation

dependencies:
  duxt_ui: ^0.2.3

Usage

import 'package:duxt_ui/duxt_ui.dart';

DButton(
  label: 'Click me',
  onPressed: () => print('clicked'),
)