saadeghi/daisyui
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 29, 2026
More findings
Verdict
A polished glow effect undercut by motion that never checks whether anyone's watching or whether they want it slowed at all. The reduced-motion guard slows rather than stops rotation, the real risk, but the underlying token and layering work is genuinely solid.
Files Rams reviewed
packages/docs/src/routes/(routes)/store/pages/+layout.svelte
packages/docs/src/routes/(routes)/store/pages/privacy/+page.svelte
packages/docs/src/routes/(routes)/store/pages/terms/+page.svelte
packages/playground/src/pages/index.html
packages/playground/src/pages/prefix/index.html
packages/daisyui/src/components/alert.css
packages/daisyui/src/components/aura.css
packages/daisyui/src/components/avatar.css
packages/daisyui/src/components/badge.css
packages/daisyui/src/components/button.css
packages/daisyui/src/components/card.css
packages/daisyui/src/components/chat.css
packages/daisyui/src/components/checkbox.css
packages/daisyui/src/components/collapse.css
packages/daisyui/src/components/countdown.css
packages/daisyui/src/components/diff.css
packages/daisyui/src/components/divider.css
packages/daisyui/src/components/dock.css
packages/daisyui/src/components/drawer.css
packages/daisyui/src/components/dropdown.css
packages/daisyui/src/components/fab.css
packages/daisyui/src/components/fileinput.css
packages/daisyui/src/components/filter.css
packages/daisyui/src/components/hover3d.css
packages/daisyui/src/components/hovergallery.css
packages/daisyui/src/components/indicator.css
packages/daisyui/src/components/input.css
packages/daisyui/src/components/kbd.css
packages/daisyui/src/components/label.css
packages/daisyui/src/components/link.css
Motion
packages/daisyui/src/components/aura.css:8
Reduced-motion users still get full 360° rotation, just slower
The .aura element's prefers-reduced-motion query only multiplies the animation-duration by 4 (animation-duration: calc(var(--tw-duration, 6s) * 4)). The conic-gradient rotation defined by @keyframes aura still runs its complete 360° cycle forever, just over 24 seconds instead of 6.
Why it matters
prefers-reduced-motion is a signal that continuous motion causes vestibular discomfort for some users. Slowing a spinning gradient does not remove the spin, so the guard doesn't address the actual harm the media query exists to prevent.
Fix
For prefers-reduced-motion, stop the rotation rather than slowing it: disable the animation or replace it with a static state.
animation: aura var(--tw-duration, 6s) linear infinite;
@media (prefers-reduced-motion: reduce) {
animation-duration: calc(var(--tw-duration, 6s) * 4);
}animation: aura var(--tw-duration, 6s) linear infinite;
@media (prefers-reduced-motion: reduce) {
animation: none;
}packages/daisyui/src/components/aura.css:7
Aura rotation runs forever even when scrolled off-screen
The .aura element's animation: aura var(--tw-duration, 6s) linear infinite; has no pause condition tied to visibility. Any element using this class keeps rotating its conic-gradient and re-triggering :before/:after blur animations even after it leaves the viewport.
Why it matters
An infinite animation with no offscreen pause burns CPU/GPU cycles for content the user can't see, which adds up on pages with multiple aura elements or long scroll depth.
Fix
Let the browser skip rendering work for offscreen elements by opting the component into content-visibility.
border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box)));
animation: aura var(--tw-duration, 6s) linear infinite;border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box)));
content-visibility: auto;
animation: aura var(--tw-duration, 6s) linear infinite;packages/daisyui/src/components/aura.css:187
Glow blur hits 24px per frame, straining GPU compositing
The aura-glow-after keyframe blurs its 50% state at filter: blur(1.5rem) (24px), stacked on top of the base .aura element and its :before pseudo-element, which is also animating. Every frame of this infinite loop forces the browser to recompute a large blur filter, which is one of the most expensive operations for compositors, especially in Safari.
Why it matters
Large blur radii on infinite animations spike GPU/CPU usage continuously, draining battery on laptops and mobile devices for as long as the aura element is mounted, not just during an interaction.
Fix
Cap animated blur radius at 20px (1.25rem) or lower to keep compositing cost bounded.
50% {
opacity: 0.6;
filter: blur(1.5rem);
}50% {
opacity: 0.6;
filter: blur(1.25rem);
}Accessibility
Typography
Color
Spacing
Components
UX
Craft
Working well
- Layering `@layer daisyui.l1.l2.l3` on .aura gives predictable cascade precedence across the base component and its modifiers, avoiding the specificity wars that plague hand-rolled component CSS.
- The `.avatar-group` border trick (4px solid border matching --color-base-100) creates a clean separation effect between overlapping avatars without extra markup, a simple and reusable technique.
Scored July 29, 2026 with Rams Engine v0.0.3 · Engine changelog
This page is an automated design review of saadeghi/daisyui’s UI code: 30 files read against 258 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; any confirmed critical issue caps it at 59.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
