principle | Description | Example |
---|---|---|
Utility-First | Use Tailwind's utility classes instead of custom CSS |
|
Component Composition | Design for composition with className overrides |
|
Theme Consistency | Use DaisyUI's semantic color system |
|
Responsive Design | Mobile-first layouts with breakpoint prefixes |
|
Accessibility | Ensure proper contrast and focus states |
|
Use Tailwind's utility classes instead of custom CSS
1className='p-4 bg-base-100'
Design for composition with className overrides
1Accept className prop in components
Use DaisyUI's semantic color system
1bg-primary text-primary-content
Mobile-first layouts with breakpoint prefixes
1flex flex-col md:flex-row
Ensure proper contrast and focus states
1focus:ring-2 focus:ring-primary
1import { clsx } from "@akanjs/client";
2
3// Basic usage
4<div className={clsx(
5 "base-classes",
6 condition && "conditional-classes",
7 className
8)}>
9 {/* Content */}
10</div>
11
12// Object syntax
13<div className={clsx(
14 "base-styles",
15 {
16 "bg-primary": isPrimary,
17 "bg-secondary": isSecondary,
18 "bg-error": isError,
19 },
20 className
21)}>
22 {/* Content */}
23</div>
1interface CardProps {
2 className?: string;
3}
4
5export const Card = ({ className }: CardProps) => (
6 <div className={clsx("card bg-base-100 shadow-md", className)}>
7 {/* Content */}
8 </div>
9);
Option | Type | Default | Description | Example |
---|---|---|---|---|
primary | color | theme-defined | Primary brand color |
|
secondary | color | theme-defined | Secondary brand color |
|
base-100 | color | theme-defined | Base background color |
|
Primary brand color
1bg-primary text-primary-content
Secondary brand color
1bg-secondary text-secondary-content
Base background color
1bg-base-100 text-base-content
1<div className="flex flex-col gap-4 md:flex-row">
2 <div className="w-full md:w-1/3">Sidebar</div>
3 <div className="w-full md:w-2/3">Main Content</div>
4</div>
1<button className="
2 bg-primary
3 hover:bg-primary-focus
4 focus:ring-2 focus:ring-primary
5 active:scale-95
6 disabled:opacity-50
7">
8 Interactive Button
9</button>
1<div className="space-y-4 p-4">
2 <div>Section 1</div>
3 <div>Section 2</div>
4 <div>Section 3</div>
5</div>
1export const Card = ({ className, project }: CardProps) => (
2 <Link
3 href={href}
4 className={clsx(
5 "border-base-300 bg-base-100 flex flex-col gap-3 rounded-lg border-2 p-4",
6 "hover:border-primary transition-all hover:shadow-md",
7 className
8 )}
9 >
10 <h3 className="text-base-content text-lg font-semibold">
11 {project.name}
12 </h3>
13 </Link>
14);
1export const Detail = ({ className, project }: ViewProps) => (
2 <div className={clsx("bg-base-100 rounded-lg p-6 shadow-lg", className)}>
3 <div className="border-base-content mb-6 border-l-4 pl-4 py-2">
4 <h1 className=" text-2xl font-bold">{project.name}</h1>
5 </div>
6 <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
7 {/* Content */}
8 </div>
9 </div>
10);
1export const Form = ({ className }: { className?: string }) => (
2 <div className={clsx("card bg-base-100 p-6 shadow-lg", className)}>
3 <h2 className="card-title mb-4">Project Details</h2>
4 <div className="form-control w-full">
5 <label className="label">
6 <span className="label-text">Project Name</span>
7 </label>
8 <input
9 type="text"
10 className="input input-bordered w-full"
11 value={project.name}
12 />
13 </div>
14 </div>
15);
1export const StatusBadge = ({ status }: { status: string }) => (
2 <span className={clsx(
3 "badge font-medium",
4 status === "active" && "badge-success",
5 status === "pending" && "badge-warning",
6 status === "error" && "badge-error"
7 )}>
8 {status}
9 </span>
10);
1export const Dashboard = ({ className }: { className?: string }) => (
2 <div className={clsx("grid grid-cols-1 gap-6 lg:grid-cols-3", className)}>
3 <div className="lg:col-span-2"><ProjectSummary /></div>
4 <div><ProjectStats /></div>
5 <div className="lg:col-span-3"><ProjectTimeline /></div>
6 </div>
7);
1<div className="card bg-base-100 shadow-md transition-shadow hover:shadow-lg">
2 <figure className="px-4 pt-4">
3 <img src={image} className="rounded-lg object-cover h-48 w-full" />
4 </figure>
5 <div className="card-body">
6 <h2 className="card-title">{title}</h2>
7 <p className="text-base-content/70">{description}</p>
8 <div className="card-actions mt-4 justify-end">
9 <button className="btn btn-primary btn-sm">View Details</button>
10 </div>
11 </div>
12</div>
1<div className="form-control w-full max-w-md">
2 <label className="label">
3 <span className="label-text">Email</span>
4 </label>
5 <input type="email" className="input input-bordered w-full" />
6 <label className="label">
7 <span className="label-text-alt text-error">Error message</span>
8 </label>
9</div>
best-practice | Description | Example |
---|---|---|
Component Composition | Create small, focused components combined to build complex UIs |
|
Color Usage | Use DaisyUI theme colors with proper contrast ratios |
|
Dark Mode | Leverage automatic dark mode adaptation |
|
Create small, focused components combined to build complex UIs
1Compose <Card> + <Header> + <Body>
Use DaisyUI theme colors with proper contrast ratios
1text-primary bg-base-100
Leverage automatic dark mode adaptation
1bg-base-100 text-base-content
mistake | Description | Example |
---|---|---|
Hardcoded Colors | Using hex codes instead of theme variables |
|
Missing className | Not forwarding className prop for composition |
|
Inconsistent Spacing | Mixing arbitrary values instead of Tailwind's scale |
|
Using hex codes instead of theme variables
1bg-[#3b82f6] instead of bg-primary
Not forwarding className prop for composition
1Component without className prop
Mixing arbitrary values instead of Tailwind's scale
1m-2 vs m-[8px]
Option | Type | Default | Description | Example |
---|---|---|---|---|
styles-not-applying | issue | - | Check class name typos and Tailwind configuration |
|
daisyui-components | issue | - | Verify DaisyUI installation and theme config |
|
responsive-issues | issue | - | Test breakpoints and use mobile-first approach |
|
Check class name typos and Tailwind configuration
1Verify tailwind.config.js
Verify DaisyUI installation and theme config
1npx daisyui@latest init
Test breakpoints and use mobile-first approach
1Use md: lg: xl: prefixes