saadeghi/daisyui
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
Low
Design risk in this codebase.
More findings
Verdict
A restrained aura effect is undercut by unmetered motion: up to three infinite animation layers keep running with no off-screen pause. Legal boilerplate runs edge-to-edge with no reading-width limit, and status is still conveyed by color alone on avatars.
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
Accessibility
packages/daisyui/src/components/avatar.css:40
Online/offline avatar status conveyed only through a color dot
`.avatar-online:before` renders a small dot with `@apply bg-success` and `.avatar-offline:before` renders the same shape with `@apply bg-base-300`. Both are identical in size, position, and shape, differing only in background color, with no icon, border pattern, or text label distinguishing the two states.
Why it matters
A colorblind user or anyone in a low-contrast viewing environment sees two visually near-identical gray dots and cannot tell whether a contact is online or offline, so status information is effectively lost for that group.
Fix
Pair the color-coded dot with a non-color signal, such as a different dot size, a ring pattern, or an aria-label on the parent avatar stating the status text, so status is legible without relying on hue alone.
.avatar-online {
@layer daisyui.l1.l2 {
&:before {
content: "";
@apply bg-success absolute z-1 block rounded-full;
outline: 2px solid var(--color-base-100);
width: 15%;
height: 15%;
top: 7%;
right: 7%;
}
}
}.avatar-online {
@layer daisyui.l1.l2 {
&:before {
content: "";
@apply bg-success absolute z-1 block rounded-full;
outline: 2px solid var(--color-base-100);
width: 15%;
height: 15%;
top: 7%;
right: 7%;
}
}
}
/* pair with: <span class="avatar-online" role="img" aria-label="Online"> on the consuming component */Typography
packages/docs/src/routes/(routes)/store/pages/terms/+page.svelte:11
Terms page body text has no max-width, running unreadably wide on desktop
The 14 sections of body copy on the Terms page, starting with "Last update: April 2026" and the paragraph beginning "These Terms and Conditions apply only to purchases made through," render with no wrapping container or max-width constraint. On a wide viewport these paragraphs stretch to the full window width instead of stopping at a comfortable reading measure.
Why it matters
Lines running past ~75 characters force the eye to travel further per line and re-find the start of the next line, so comprehension of legal terms drops exactly where users need to read carefully.
Fix
Wrap the page body in a container with a max-width around 65-75ch so paragraph lines stay within a comfortable reading measure regardless of viewport width.
<h1>Terms and Conditions for the daisyUI Store</h1>
<p>Last update: April 2026</p>
<p>
These Terms and Conditions apply only to purchases made through
<a href="/store/">daisyui.com/store</a> and <a href="/blueprint/">daisyui.com/blueprint</a>. They
do not apply to the rest of the daisyUI website, open source package, docs, or any other service
unless a page says so directly.
</p><div class="max-w-[70ch]">
<h1>Terms and Conditions for the daisyUI Store</h1>
<p>Last update: April 2026</p>
<p>
These Terms and Conditions apply only to purchases made through
<a href="/store/">daisyui.com/store</a> and <a href="/blueprint/">daisyui.com/blueprint</a>. They
do not apply to the rest of the daisyUI website, open source package, docs, or any other service
unless a page says so directly.
</p>
</div>Get this score on every PR.
Rams reviews each pull request on your repo and posts inline one-click fixes — about a minute per review.
Install Rams freeMotion
packages/daisyui/src/components/aura.css:7
Aura effect runs up to three infinite animation layers with no off-screen pause
The base .aura rule (line 7) applies `animation: aura var(--tw-duration, 6s) linear infinite` to the element itself, and its `:before`/`:after` pseudo layers inherit that same animation. The .aura-glow variant (line 91) adds a second infinite animation, `animation: aura-glow var(--tw-duration, 6s) ease-out infinite`, on top of that, so a single glowing element can be running two or three concurrent infinite CSS animations. None of them pause when the element scrolls off-screen.
Why it matters
Every .aura instance keeps repainting on the compositor thread indefinitely, and stacking aura-glow on top multiplies that cost per element, which drains battery and adds jank on pages with several badges, buttons, or cards wearing the effect at once.
Fix
Pause the animation with `animation-play-state: paused` when the element leaves the viewport (via an IntersectionObserver toggling a class or the `content-visibility: auto` property) so off-screen auras stop repainting.
animation: aura var(--tw-duration, 6s) linear infinite;animation: aura var(--tw-duration, 6s) linear infinite;
content-visibility: auto; /* pairs with an IntersectionObserver toggling .is-offscreen { animation-play-state: paused; } */Color
Spacing
Components
UX
Craft
Working well
- Every aura variant quadruples its animation-duration under prefers-reduced-motion instead of killing the animation outright, which keeps the glow legible for vestibular-sensitive users while still respecting their preference.
- The Terms page uses a single h1 ("Terms and Conditions for the daisyUI Store") followed by sequential h2s for each numbered section, giving screen reader users a clean, predictable document outline with zero extra ARIA work.
- External Creem links correctly pair target="_blank" with rel="nofollow noopener noreferrer", which blocks reverse tabnabbing and keeps SEO link equity from leaking to a third-party payment processor.
Scored August 1, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 29, 2026: 94/100. This rescore on v0.0.3: 94/100.
This page is an automated design review of saadeghi/daisyui’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
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.
