feat: design tokens, UI redesign, install bundle and text animation components#91
Merged
Conversation
Served registry JSON leaked unresolvable @repo/*, @smoothui/data, and deep-relative import specifiers into user projects. Rewrite them to the paths where the shadcn CLI installs the files, emit registry:block for blocks, registry:lib for data and animation constants, human-readable titles, and deduplicated registry dependencies detected from rewritten content. Ship lib/animation.ts as a new installable lib item.
Add six registry:theme items (candy, indigo, blue, red, orange, green) exposing the SmoothUI neutral scale and brand accents as standard shadcn cssVars with light and dark modes, plus the Inter font token. Add a registry:item skill that installs SKILL.md with SmoothUI usage and animation conventions for AI assistants. The docs color picker now offers a copy-to-clipboard install command for the selected theme. A CI verification script renders every registry item, validates it against the shadcn registry-item schema, and fails on workspace import leaks.
Wire a typecheck task through Turbo and GitHub Actions with tsc scripts in every TS workspace, fixing the broken tsconfig resolution in the smoothui package along the way. Pin radix-ui to a single exact version via pnpm override so mixed resolutions can't duplicate Radix context providers (regenerated "latest" from bump-ui stays harmless). Bump the shadcn dependency to ^4.10.0 (4.11.0 is still inside the supply-chain release cooldown) and run the registry verification script in CI.
The v3 to v4 migration kept numeric size props, but v4 interprets bare
numbers as pixels: maxSize={100} became a 100px ceiling that conflicted
with the other panel's constraints and locked the preview resizer
(separator rendered with aria-valuemin equal to aria-valuemax). Use
percent strings for panel constraints and the imperative resize call,
and drop the data-panel-size handle class that no longer exists in v4.
Every animated block (headers, pricing, stats, testimonials, footers, faqs, team, logo clouds, shared helpers) now gates its motion props behind useReducedMotion, per WCAG 2.1 SC 2.3.3: entrance and in-view animations render in their final state instantly, gesture animations are disabled, and transitions drop to zero duration. The non-reduced animation design is unchanged. Also removes two dead constants in footer-2.
Add render smoke tests for the 12 previously untested components and render + axe accessibility tests for all 34 blocks (previously zero block coverage). Fix the three real accessibility violations the new tests caught: unlabeled logo links in logo-cloud-2, unlabeled nav buttons in testimonials-2, and an invalid dl structure in faq-1. Test infra: include blocks in the vitest run, alias @smoothui/data, inline react-tweet so its CSS-module imports load (its suite previously failed silently at load time), and drop dangerouslyIgnoreUnhandledErrors since the teardown errors it suppressed no longer reproduce. Add v8 coverage with regression thresholds (lines 55, statements 55, functions 48, branches 38) enforced by pnpm test, and stop caching the root lint task in Turbo.
The component claimed full viewport height wherever it was embedded — including in user projects installing it from the registry.
Add /themes, a shadcn/create-style studio in its own full-bleed route group (the (home) layout caps content at max-w-7xl). The left inspector panel follows the Grid Loader customizer language: palette swatch strip, light/dark segment, a live radius scrubber that drives the preview and the copied CSS, the shadcn preset code (b3gmgq), and install/copy-CSS actions. The preview is a draggable board (pan in any direction, starting centered) showing every component demo in the registry — 70 cards in flex-column masonry over a frame-box dotted field. Demos are code-split and mounted/unmounted with an IntersectionObserver that remembers card heights, so only the visible ~10 run at any time. Interactive controls inside demos keep pointer ownership; the pan only engages elsewhere. Flex columns replace CSS multicol, which broke Motion layout animations. Theming is scoped to the board by overriding the underlying SmoothUI tokens (the docs Tailwind theme is declared with @theme inline). Navigation: Themes entry in the desktop and mobile navbars, and a link from the floating color picker.
Browsers start a ghost image drag on any <img> press-and-move, which
fights drag/select interactions (interactive-image-selector, phototab)
and feels broken anywhere else. Set draggable={false} on every image
rendered by components and blocks so installed copies behave too.
Two stacked causes broke demo interactions on the theme studio board: The frame-box ::before dots layer is absolutely positioned, so it painted above the board's static children and intercepted every pointer event — clicks never reached the demos at all. Decorative layers must not hit-test: add pointer-events-none to the pseudo element in the shared class. The pan also captured the pointer on pointerdown, which retargets the eventual click to the canvas and silently kills onClick handlers on non-button elements (expandable cards). The pan now only captures after the pointer travels a 5px threshold, and ignores non-primary buttons so right-click reaches context menus. Verified in-browser: dropdown menu opens, context menu opens on right-click, expandable cards expand, and panning still works.
Each board card now has a terminal icon next to the docs link that copies the shadcn CLI install command for that component, with the full command shown as the tooltip.
The design system's @theme inline block mapped --color-destructive and --color-sidebar-accent to source variables that were never declared, so the 76 destructive-token usages across the library resolved to nothing — the smooth-button destructive gradient visibly faded to white. Declare --destructive (light and dark, matching the registry themes) and --sidebar-accent in the docs theme, and have the studio preview override --destructive per palette mode from the theme cssVars.
The Grid Loader customize panel now floats detached from the screen edges (margin on top, right and bottom, fully rounded) instead of hugging the viewport, and its rows pick up the larger 16px radius. The theme studio sidebar adopts the same visual language: wider panel, 56px rounded-2xl rows with 17px labels, larger palette swatches, and roomier preset rows so nothing wraps.
… panels Measured the original dialkit inspector (joshpuckett.me/dialkit): 36px rows with 8px radius, 13px/500 labels, 13px mono values, 15px/600 title, 13px/600 section headers at 65% opacity, ~254px panel. The previous pass overshot every metric because the reference screenshots were 2x retina. Both the Grid Loader customize drawer and the theme studio sidebar now use the real scale.
Track 36px with 8px radius (was 52/12), 13px/500 label and 13px mono value (was 17/15), with thumb, ticks and insets scaled to match. Keeps the component visually consistent with the design-tool panels it is meant for.
The shadcn/create link and --preset row previously used the pink preset for every palette; each palette now carries its own verified preset code (generated on ui.shadcn.com/create and round-tripped through shadcn preset decode): candy b3gmgq, indigo b2pzIe, blue b1PzeK, red b4Fywy, orange b3PBYm, green b2YOAa. New customization rows in the dialkit language: a Sans/Serif/Mono font segment that drives the preview typography and the copied CSS font-sans token, and an Accent lightness scrubber (±15) that shifts the oklch lightness of the brand accent across the preview and every accent-bearing variable in the copied CSS (accent, ring, charts, sidebar).
shadcn/create presets can only carry their catalog enums, so opening a SmoothUI theme there loses the exact oklch palette, continuous radius, accent shift, font and neutral tint. The studio now has its own preset format (s1.<palette>.<radius>.<accent>.<font>.<tint>) that round-trips the full state: - Shareable links: /themes?preset=<code> restores every control. - Full distribution without shadcn's limits: the registry route serves theme-custom-<code>.json built on the fly from the code, so any custom combination installs with the standard shadcn CLI. - New Tint control (neutral/warm/cool) that re-tints the smooth neutral scale across preview, copied CSS and installable item. The preset row shows the SmoothUI code, with a copy-link action; the shadcn/create link remains as an explicitly labeled approximation. The preset/encoding logic lives in lib/studio-preset.ts, shared by the studio client and the registry route.
The supply-chain release cooldown has passed. Its published schema still lacks the registry:skill type, so the skill item stays as registry:item.
Next flagged it as the LCP on the studio's initial centered view.
A search row in the sidebar filters the board's demo cards by component name, and a crosshair action next to shuffle re-centers the pan field — useful after wandering across 70 cards.
Document the installable themes, the Theme Studio controls, the SmoothUI preset format (share, install, copy CSS) and the shadcn/create approximation caveat. Add the 3.5.0 highlight entry covering the studio, themes and presets, reduced-motion compliance, and the registry and testing infrastructure work.
feat: registry hardening, installable themes, Theme Studio, a11y & tests
The neutral ramp was non-uniform: stops bunched in the bright zone with a cliff at 700->800 and almost no usable mid-tones. As a result the contrast-critical semantic tokens failed WCAG on a smooth-50 background (input 1.35:1, muted-foreground 3.14:1). - Rebuild --color-smooth-* (light and dark) with perceptually even oklch-L spacing so mid-tones exist for legible controls and secondary text. - Remap input to smooth-700 (3.02:1 light / 3.73:1 dark, >=3:1 control boundary) and unify it to a single definition; muted-foreground now passes at 4.52:1 / 5.82:1 via the ramp. - Keep dividers subtle: --color-border maps to smooth-300 (oklch 0.91), matching the previous border luminance; decorative borders are WCAG-exempt. - Remove the dead --border token, collapsing border sources. - Mirror the ramp in registry-themes.ts so installed themes inherit the same WCAG-passing tokens.
Durable design artifacts under .ui-craft/ to anchor the UI unification redesign: - brief.md: product purpose, primary user (devs + AI agents), five ranked principles, success metric, out-of-scope, and the locked visual direction (Soft Modern refined, brand pink kept, dotted-frame signature). - tokens.md: audit of the existing Tailwind v4 / OKLCH spine plus decisions for the gaps — a shared type scale (display→eyebrow roles), radius varied by element, a new motion token category, and the accent budget.
- Add a motion token category (--duration-fast/normal/slow, --ease-out, --ease-in-out) matching the animations.mdc convention; previously components hardcoded durations and curves. - Fix the prose heading cliff: h2 jumped from h1 (30px) straight to 18px. h2 -> 24px, h3 -> 19px, h4 -> 16px for a legible hierarchy in docs.
Replace the uniform four-column grid of identical icon-cards (the classic
AI-generated tell) with an asymmetric bento:
- Lead cell shows a real SmoothUI component in motion (GridLoader cycling
patterns in the brand color) inside the dotted-frame signature — proving
"smooth animations" instead of describing it (brief P1).
- Supporting cells vary in span; copy rewritten to sentence case and made
specific ("built for React 19", "one command").
- Remove box shadows — frame-box surfaces don't use shadow — and drop the
off-brand blue shadow.
Title Case reads as template. Lowercase the section headings and the showcase CTA: "Components showcase", "Built for AI-assisted development", "What they say about us", "View all components".
ComponentsSlideshow was the only section using a bare centered <h2> with no eyebrow or description, breaking the one-signature consistency. Switch it to the shared SectionHeader (eyebrow + title + description) so every section reads the same.
Every section used py-24, producing a flat, templated cadence. Give the narrative sections more room — AI section to py-40, Skills to py-32 — so the page breathes in the 96/128/160px band instead of one uniform step.
The footer already ends the page with its own CTA card; a second centered CTA band stacked right above it read as duplicated. Remove the standalone ClosingCta and the now-trailing divider under the blog section so the footer's gradient bridge handles the final seam.
Open up the hero with clearer hierarchy, remove the announcement badge, and reposition the UI Craft section as a design system with a multi-method install picker matching skills.smoothui.dev. Co-authored-by: Cursor <cursoragent@cursor.com>
… registry gaps - Rename akella-image-transition and its 8 variant wrappers to shader-reveal-* (dirs, symbols, tests, examples, docs, package names) - Export ScaleDownFade from the components barrel - Add base shader-reveal-transition example and MDX doc - Rebuild the Transitions section in meta.json with all 17 entries and add scale-down-fade to the Text section
- Bundle drawer: focus trap, initial focus, focus restore, aria-live announcements for add/remove/clear, guarded persist-before-hydrate - Remove the duplicate theme toggle from the docs top nav (FloatNav owns it) - Changelog bell: unread dot backed by localStorage, visible focus ring - FloatNav: 44px touch targets, labels hidden on small screens, drop the overflow that clipped the color picker and PM popovers - Color picker actions use the DS button instead of the raw shadcn one - Hero copy button and bundle actions announce to screen readers - Coverage section gets a real h2; pl-[14px] -> pl-3.5 - Rename legacy shimmer tokens to --shimmer-base/--shimmer-highlight
…le previews - Drop the TOC on the gallery page (full: true) and collapse the reserved toc grid column on full pages so content reaches the right edge - Home-showcase card style: uniform 280px dotted preview + slim footer with title link, bundle add and install copy actions - Bento spans: measured wide demos take 2 columns, Transitions category takes 2, expandable-cards takes 3; grid-flow-dense fills the holes - Fit-scale previews: demos lay out on a 133% stage and scale down until they fit the cell (0.45 floor), fixing squashed transition demos - 4 columns on 2xl; add accordion example shim so its preview loads
- Shared WebGL mock + steppable rAF clock (test-utils/webgl-mock.ts) so the 5 shader transitions execute their GL setup, render loop, variants, onRest and reduced-motion/no-WebGL fallbacks (22-25% -> 92-94% lines) - Interaction tests for select, searchable-dropdown, basic-dropdown, gooey-popover, scrubber and app-download-stack (open/close, keyboard nav, outside click, pointer drag, controlled mode) - New tests for short-slide-down and kinetic-center-build (0% -> 100%) and deeper tests for agent-avatar, scrollable-card-stack, animated-file-upload, switchboard-card, ai-branch, github-stars-animation, tweet-card, interactive-image-selector and the pricing blocks Package totals: lines 48->76%, functions 44->67%, statements 48->76%, branches 37->53% (thresholds: 55/48/55/38). 398 tests passing.
The lib/animation constants (SPRING_DEFAULT, SPRING_SNAPPY, EASE_OUT, EASE_IN_OUT, DURATION_INSTANT, DURATION) had no docs. Add a section to the utilities guide covering what they are, how they reach a project via the registry install flow (auto-pulled as a lib.json dependency, or added directly with @smoothui/lib), and usage with Motion including the reduced-motion path. The registry-exposure half was already fixed in b73ac1d.
The controlled test typed the empty selection as AppData[], but the prop takes an array of app ids (number[]).
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
|
Important Review skippedToo many files! This PR contains 508 files, which is 358 over the limit of 150. To get a review, narrow the scope: Upgrade to a paid plan to raise the limit. ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (8)
📒 Files selected for processing (508)
You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
# Conflicts: # apps/docs/content/blog/ai-design-slop.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Large UX/UI branch (51 commits, ~515 files) unifying the design system and shipping several features:
shadcnmulti-add command. Theme + package-manager selectors in float nav, drawer for remove/copy/share.Test plan
pnpm buildgreen locally (tests + both apps)