daisyUI

daisyUI is a component library for Tailwind CSS that provides semantic class names for common UI components like buttons, cards, and modals. It makes building beautiful interfaces faster while maintaining full Tailwind CSS compatibility.

Installation#

To get started with daisyUI, make sure you have Tailwind CSS enabled in your Fresh project, then install daisyUI and update your configuration.

1. Run deno i -D npm:daisyui@latest to install daisyUI

2. Add daisyUI configuration in ./static/styles.css:

   static/styles.css

     @import "tailwindcss";
   + @plugin "daisyui";

Now you’re ready to use daisyUI.

Using daisyUI Components#

Create a button component in the components directory, using daisyUI’s style classes for reference.

components/Button.tsx

import type { ComponentChildren } from "preact";

export interface ButtonProps {
  id?: string;
  onClick?: () => void;
  children?: ComponentChildren;
  disabled?: boolean;
}

export function Button(props: ButtonProps) {
  return (
    <button
      className="btn btn-dash btn-primary"
      {...props}
    />
  );
}

Display Effect#

daisyUI Class Name Reference#

For more components and usage, please refer to the daisyUI official documentation