Release Notes

A changelog of new features, improvements, and fixes to UX Components.

Social sharing

  • Each section now has its own og:image (Components, Universal Icons, Design Systems, About, Glossary, W3C, MCP, and more), and every component page has a unique share image showing its name and description.
  • The front controller picks the most specific image per URL — component image, then section image, then the default — for both Open Graph and Twitter cards.

Sitemap

  • The styled sitemap page now uses the same dark scrollbar as the rest of the site.

Discoverability

  • Added robots.txt pointing to the sitemap.
  • sitemap.xml now lists every language version as its own URL (English, Español, Deutsch, Français, 中文, 日本語) with lastmod dates, and renders as a styled, readable table via an XSL stylesheet.
  • Added JSON-LD structured data: WebSite and Organization on the home page, and BreadcrumbList plus DefinedTerm on component and icon pages.

Canonicalization

  • Non-www requests now 301-redirect to the www host, and raw .html URLs redirect to their clean paths.
  • Unknown URLs now return a branded 404 page instead of home-page content.

Social sharing

  • Added an og:image share graphic and Twitter card metadata, so links shared to social apps show a branded preview.

SEO

  • Removed the per-URL hreflang alternates from sitemap.xml now that every page carries them on-page — shrinking the file from 818 KB to 130 KB, so it renders as a proper XML tree in the browser. Language alternates are unchanged for search engines.

Home page

  • Moved Design systems directory to the top of the Icons and Systems column.

SEO and internationalization

  • Each localized URL now serves its own <html lang>, a self-referential canonical, and reciprocal hreflang alternates (including sub-paths), so search engines index the right page per language.
  • Localized meta descriptions on the non-English home pages; aligned the Chinese hreflang to zh-Hans across pages and the sitemap.

Home page

  • Moved the logo inline to the left of the title, tightened the top spacing, and shortened the tagline to a single line.
  • Renamed the first Components link to Default categories.

Interface

  • Scrollbars now use a consistent dark grey across all themes.
  • Centered the Default / Atomic toggle in the sidebar.

Navigation

  • Increased the top navigation and the home banner to 60px tall (from 56px), kept in sync through a shared height token.

Home page

  • Removed the small baseline gap below the hero logo so it sits flush with the title.

Home page

  • Capped the hero title at 55px (from 64px) using rem-based fluid sizing, so it stays balanced with the rest of the hero on large screens.

Home page

  • The top banner now stays pinned to the top while scrolling, sized to match the navigation height.
  • Navigation column headers are now title case: Icons and Systems and Standards and Tools.

Navigation

  • Added a soft drop shadow to the top navigation and the home banner, matching the elevation used on ux-guidelines.com.

Home page

  • Removed the gap below the hero logo so it sits closer to the "UX Components" title.

Home page

  • Increased the three navigation column headers (Components, Icons and systems, Standards and tools) from 20px to 24px, with their icons scaled to match.

Theming

  • Scrollbars now follow the active theme instead of the browser default — a light gray thumb on light themes and a dark one on the dark theme. Previously a dark-mode operating system could paint the scrollbar dark even on the light page.
  • Declared color-scheme per theme so browser-rendered controls and scrollbars match the page in Chrome, Firefox, and Safari.

Home page

  • The word Components in the hero title and the header logo now matches the weight and color of UX beside it, so the wordmark reads as one.
  • Navigation links under each column now underline only on hover instead of always.
  • Renamed the first two Components links to Default and Atomic (from "Browse — default" and "Browse — atomic").

Developer

  • Consolidated all inline CSS into css/styles.css — the ten page-level <style> blocks and dozens of inline style attributes are now in the shared stylesheet, leaving only dynamically generated values inline.
  • Removed dead CSS — 19 unused classes (the old visual-tree site map and legacy home-card layout) and 2 unused custom properties.
  • Added design tokens — --font-sans, --font-mono, --shadow-card-hover, and --status-error / --status-success replace repeated literal values.

Theming

  • Toggle switches, checkboxes, and primary buttons now follow the active theme accent instead of a hardcoded blue.

Performance

  • Improved asset caching — CSS and JavaScript now serve instantly from cache and revalidate in the background, and images and fonts cache for a year.

Home page

  • Added category icons beside the three navigation headers — Components, Icons and systems, and Standards and tools.

Footer

  • Added a Slack icon linking to the AI for UX community.
  • Added AI for UX to the Sister Sites list.
  • Alphabetized the Sister Sites: AI for UX, Extend Chrome, GPT Prompt Guides, UX Guidelines.

Layout

  • Fixed the scrollbar on inner pages so it ends below the top navigation instead of running behind it — the content region now scrolls within a fixed header.

Home page

  • New footer — a three-column band with brand and social links, a Site column, and a Sister Sites column (UX Guidelines, GPT Prompt Guides, Extend Chrome). It's a dark band on the light theme and adopts each theme's surface on Beige, Dark, and Blue.
  • Removed the "View demo" link and tightened the space between the link index and the footer.
  • Softened the browse-link colors in the Blue theme so they sit closer to the palette.

Site map

  • Rebuilt /site-map as a traditional directory — a flat, grouped list of every page (Main Pages, Component Views, all 66 components, Icon Views, all 210 design systems, Standards and Tools, Reference, API) instead of the tabbed visual-tree view.

SEO

  • Regenerated sitemap.xml — now 868 URLs (was 646). Added all 210 design-system detail pages (previously missing), updated the component set to 66, and kept per-locale hreflang alternates on every entry.

Home page

  • Redesigned the browse section — the card and banner grid is replaced with a compact three-column link index: Components, Icons and systems, and Standards and tools, each with four direct links.
  • Top-anchored hero — the landing content sits near the top of the page instead of being vertically centered, removing the large gap above the fold.
  • All home-page type is now Helvetica Neue, matching the rest of the refreshed UI.

Themes

  • The Beige theme is beige again. The white refresh is now the default (first-visit) theme, and Beige is a real opt-in theme carrying the original warm-limestone palette. Dark and Blue are unchanged.
  • Cards stay white on hover in the light themes — hovering a component, design-system, or home card now lifts it with a soft drop shadow instead of darkening its border or shifting to grey.

Localization

  • The new home-page link index is fully translated across English, Español, Deutsch, Français, 中文, and 日本語.

Design

  • New default theme — the site moves from the warm beige palette to a crisp editorial look: white canvas, near-black ink, light-gray borders, and Helvetica Neue in place of Archivo. Archivo web-font loading was removed from every page.
  • Bordered cards — component cards, design-system cards, home-page cards, "Also known as" cells, and component States now render as flat white cards with a 1px border and sharp corners. Elevation comes from the surface ladder, not shadow.
  • Hover lift — home-page cards raise on hover with a soft drop shadow instead of a fill change.
  • Bigger hero — the landing title scales up to 64px, and the hero is top-anchored rather than vertically centered.
  • Cleaner home cards — descriptions removed from the four primary cards, leaving icon, title, and links.

Developer

  • The four alternate themes (light, dark, blue) are unchanged; only the default palette was reworked. All colors remain token-driven in :root.
  • Updated the Design System Reference page to document Helvetica Neue as the primary typeface.

Components

  • A2UI protocol badges — components that map to a primitive in the A2UI (Agent-to-UI) spec now show an A2UI chip in the component sidebar. 16 components map to A2UI's 16 primitives: Button, Input, Textarea, Checkbox, Radio Group, Select, Slider, Date Picker, Time Picker, Card, Dialog, Tabs, List, Image, Icon, and Separator.

W3C ARIA Patterns

  • Reordered the page so the "Site components without an APG pattern" list comes first and the full pattern-mapping table second.
  • Added A2UI chips to the unmapped-components list for the 9 A2UI primitives that lack a dedicated ARIA pattern.
  • Loosened the spacing between alias chips in the "Other systems call it" column for easier scanning.

Developer

  • Added a project-root DESIGN.md — a machine-readable token spec (colors, typography, rounding, spacing, and 22 component styles) plus prose covering the site's warm-neutral palette, surface-ladder elevation, and shape system. Follows the standard DESIGN.md format so any AI design agent can reconstruct the site's look.
  • Normalized all pill-shaped border-radius values to a single canonical 9999px.

AI

  • Bumped to claude-sonnet-5 as the default model for the on-site Ask AI chat, the MCP server, and the local dev chat server. All three previously ran on the retired claude-sonnet-4-20250514. The CLAUDE_MODEL environment variable still overrides the default per server, so operators can swap in claude-opus-4-8, claude-haiku-4-5-20251001, or claude-fable-5 without a code change.

W3C ARIA Patterns

  • New /w3c page mapping every W3C ARIA Authoring Practices Guide pattern to its catalog component page, with cross-system aliases (e.g. Accordion → Collapse ×3, Disclosure ×1) so you can name the same widget consistently across design systems.
  • 30 ARIA patterns, all mapped — each pattern links straight to its component page (e.g. /w3c/accordion redirects to /components/accordion). Legacy /w3c/{slug} URLs also redirect.
  • Added ARIA Authoring Practices as a directory entry — 210 total design systems.

Components

  • 4 new components added to round out W3C ARIA coverage — 62 → 66 total: Treegrid (hierarchical table with expandable rows), Window Splitter (draggable resize bar between panels), Feed (infinite-scroll article stream with ARIA semantics), Landmark Regions (semantic HTML5 page structure).
  • Each ships with full anatomy, use/avoid lists, states, AI prompt with ARIA guidance, and cross-system aliases.

Home page

  • Restructured to a 4-card top row: Browse Components · Compare Components · Browse Directories · W3C ARIA Patterns. Browse Universal Icons moves down to the bottom banner row.
  • Grid widened (1040px → 1300px) with responsive breakpoints at 1100px (2-up) and 640px (1-up).

Localization

  • W3C ARIA Patterns page fully translated in en, es, de, fr, zh, ja — headings, subtitle, stats, table columns, and the "Site components without an APG pattern" section.
  • DESIGN.md Reference page chrome translated across all 6 locales (27 strings each) — headings, intros, CLI usage prose, Copy button, footer note.
  • Footer "Take the tour" link now localized (was English-only).
  • Fixed an &nbsp; rendering bug in data-i18n strings — replaced with real U+00A0 non-breaking-space characters.

Design Systems

  • 49 new design systems added, sourced from aidesign.guide. Directory grows from 160 to 209 systems.
  • Major React/Vue libraries: MUI, Mantine, daisyUI, Quasar Framework, Element Plus, Naive UI, Shoelace, PrimeReact, Nuxt UI, Tremor, Park UI, and Reshaped.
  • ByteDance and Tencent: Arco Design (ByteDance), Semi Design (Douyin), TDesign (Tencent).
  • Government & public sector: DSFR (France), NL Design System (Netherlands), SGDS (Singapore), Designsystemet (Norway), Denmark, Ontario, NSW, NY State, UAE, W3C, and INPS (Italy).
  • Notable corporate systems: Gestalt (Pinterest), Pajamas (GitLab), Source (The Guardian), BBC GEL, Porsche, Decathlon, Telekom Scale, Headless UI (Tailwind Labs), Razorpay Blade, ServiceNow Horizon, Samsung One UI, LINE, Microsoft Power Platform, Cash App, Lemon Squeezy, Audi, Škoda, Michelin, Wikimedia Codex, Sainsbury's, SubZero (Axis Bank), SEB, and Aalto University.

Developer

  • Figma plugin and ds-directory.js typeahead data resynced with the canonical directory (209 entries).

DESIGN.md

  • New DESIGN.md reference page at /design-md — explains the format Anthropic's Claude Design (and other AI design agents) consume, plus a recommended template with all 62 catalog components pre-populated under the components: block, ready to copy and customize.
  • DESIGN.md banner on the home page — sits next to Browse Directories and MCP Server in a 3-up bottom row.
  • DESIGN.md chip on design-system cards — every design-system card that has a DESIGN.md file links straight to it. Renders in the grid card, the table row, and the detail header.

Design Systems

  • 68 new brand-identity references added, sourced from VoltAgent's awesome-claude-design via getdesign.md — Apple, Airbnb, Anthropic (Claude), BMW, Cursor, ElevenLabs, Figma, Linear, Mastercard, Notion, Stripe, Supabase, Tesla, Vercel, and more. Each card links to its brand site, with a DESIGN.md chip for the raw markdown spec. The directory grows from 92 to 160 systems.
  • MCP chip on design-system cards — every system with a published MCP server now shows an MCP badge alongside the Storybook badge. Added URLs for Ant Design, Atlassian, Carbon, Chakra UI, Cloudscape, Fiori, Flowbite, Fluent, HeroUI, Lightning, Material Design, Polaris, Radix UI, React Aria, Seeds, Shadcn/UI, Spectrum, Vibe, Visa Product Design, and VTEX.
  • Cleaner card link domains — stripped www. prefix from 37 directory entries.

Onboarding

  • Product tour — 10-step auto-playing spotlight that walks first-time visitors through the welcome, themes, search, Ask AI button, suggested prompts, components, comparison, icons, directories, and MCP server. Auto-runs once per browser (via localStorage), with Esc to skip and a View demo link under the home title for replay.
  • Tour strings localized in all six languages: English, Español, Deutsch, Français, 中文, 日本語. The "View demo" link is also translated per locale (Ver demostración, Demo ansehen, Voir la démo, 查看演示, デモを見る).

Components

  • "Empty State" renamed to "Empty" across the catalog to match shadcn naming.

Polish

  • Settings sheet improvements — full-width on mobile, left-aligned footer buttons, with Save before Cancel (matching native iOS conventions).
  • Search typeahead — closes on input blur, and recently-viewed items render correctly on first focus after the lazy-load.
  • Accessibility — added aria-hidden="true" to decorative SVGs across the site, and proper aria-labels to sidebar navigation.

Developer

  • MCP registry manifest — published server.json so the UX Components MCP server can be auto-discovered by AI tooling that scans the MCP registry.

Performance

  • Server-side gzip and brotli compression enabled in .htaccess for every text MIME type (HTML, CSS, JS, JSON, XML, SVG). Wire size drops 70–95% across the site — e.g. components-data.js 261 KB → ~30 KB, links.html 1 MB → ~80 KB, sitemap.xml 621 KB → 19 KB.
  • Chat widget idle-loaded — js/chat.js no longer loads with defer; a small inline loader injects it via requestIdleCallback after first paint, pushing ~38 KB off the critical path on every page.
  • Search typeahead lazy-loaded — js/typeahead.js (~12 KB) only downloads when the user first focuses or types in the search field. A tiny initTypeahead stub in each page's <head> captures the per-page init args and replays them once the script arrives.

Mobile

  • The Design Systems directory falls back to its card grid on phone-width screens — the table-view toggle is hidden on mobile, where the table's columns ran off-screen.
  • The Design System Reference token tables stack each token as a card on mobile — swatch, name, variable, value, usage, and count — instead of scrolling horizontally.
  • The Design System Links page renders accordion headers on two lines and link rows as stacked cards on mobile, replacing a cramped four-column row.
  • Fixed the Also known as cards clipping long translated terms on narrow screens — the cards now use a single column on mobile so terms like the German "Schaltflächengruppe" display in full.

Internationalization

  • The site is now available in six languages — English, Spanish, German, French, Simplified Chinese, and Japanese — selectable from the settings panel.
  • New i18n layer (js/i18n.js and js/i18n/) localizes UI strings plus component, icon, glossary, and design system content.
  • The MCP page, About page, release notes changelog, and interactive component preview demos are fully translated.
  • The active locale is reflected in the URL path — /es/, /de/, /fr/, /zh/, /ja/.

Components

  • Also known as card headers and compare-table cells now show translated labels on localized pages, while the design system doc links still resolve via the original English term.
  • The icon directory sidebar — categories and sub-categories — and the Universal Icons subheader are now fully localized.
  • The search autosuggest section labels are translated across all languages.

Performance

  • Removed the Figma capture.js script and its mcp.figma.com preconnect from all 12 content pages — eliminating ~127 KB of uncompressed third-party JavaScript and one third-party connection per page load.
  • Removed an orphaned preconnect hint from the analytics reference page and dead .lang-select CSS rules.

SEO

  • sitemap.xml rebuilt with hreflang alternate annotations for all six languages across all 643 URLs, so search engines can discover and correctly serve each localized page.

Developer

  • Moved the Python maintainer scripts (ftp_upload.py, validate-data.py, build-skills-data.py, chat-server.py) into a py/ directory, kept out of the FTP upload and git.

Design Systems

  • React Aria: fixed URL resolution. getAkaUrl() had no pascal branch and was lowercasing every term, so links like /TextField, /DatePicker, /DisclosureGroup all 404'd. PascalCase is now preserved. Same fix also restores Braid links.
  • React Aria: suppressed URLs for components that aren't in React Aria's scope (Alert, Avatar, Icon, Label) — the library is hooks-only and has no static-UI pages for these.
  • GOLD (Design System AU): fixed two non-obvious slugs — "Search Box" now points to /components/searchbox/ (no hyphen) and "Call to Action" points to /components/cta-link/ (not /cta).
  • GOLD: blocked the /components/page-alerts/ URL — that route has been hijacked by Indonesian online-gambling SEO spam. The "Page Alerts" alias now returns no link instead of sending users to malicious content.

Site

  • Skills reference page is now publicly reachable at /skills (still unlisted — not in the sitemap, not in the footer).
  • Removed /site-map from the sitemap (page still works but no longer crawled).
  • Figma plugin synced — removed a stale Momentum entry that didn't exist in the main site.

UI and Interactions

  • Added a sliding-thumb indicator to every toggle group on the site — theme picker, sidebar view toggle, Default/Atomic/Compare/States home view, landing theme chooser, DS view toggle, compare-sort buttons, and component preview tabs. The active "pill" now slides between items with a soft cubic-bezier spring instead of fading in and out at each position.
  • Animated the search typeahead dropdown — slides down on open, up on close (180ms cubic-bezier).
  • Registered --tg-x, --tg-y, --tg-w, --tg-h via @property so CSS custom-property values interpolate during transitions.
  • Added a prefers-reduced-motion media query that disables non-essential transforms across the site.

Design Systems

  • Canvas (Workday): moved from canvas.workdaydesign.com to canvas.workday.com — 49 component links restored.
  • Cauldron (Deque): recognized as a JS-only SPA with no deep-linkable component pages. All 33 entries now suppressed via urlFn → null instead of pointing to 404s.
  • Marvel: added plural slug mappings (avatar→avatars, button→buttons, modal→modals, etc.) so deep links resolve correctly to the live styleguide.
  • Protocol (Mozilla): updated URL config to use canonical --default slugs (e.g. button--primary, card--overview).

Link validation

  • Fixed a long-standing false-positive bug in validate_links.py: the body regex was matching phrases like "404 page" or "page not found" inside navigation links, marking real component pages as broken. The validator now strips <a>, <nav>, <footer>, <script>, and <style> blocks before searching. Recovered ~80 false-positive invalid links — USWDS, GOV.UK Design System, and ServiceNow Horizon all returned to fully-valid status.
  • 403/429/503 HTTP responses are now classified as error (transient/bot-blocked) instead of no (broken).

Performance

  • Reorganized 17 JavaScript files into js/ and the stylesheet into css/ for cleaner directory structure. All <script src>, <link href>, PHP file_get_contents, and FTP-exclude paths updated.
  • Removed 6 dead CSS rules (chat-disclaimer, popover-title, sep-text, sort-arrow, toast-title, tooltip-box) — saves ~5 KB raw per page.
  • Removed redundant <link rel="dns-prefetch"> for googletagmanager on 13 pages — the adjacent <link rel="preconnect"> already covers DNS + TCP + TLS.
  • Added <link rel="preload" as="script"> hints for the largest deferred bundles on the heaviest pages — components-data.js on /components and /design-systems, and icons-data.js on /universal-icons, /icon-libraries, and the landing page.

Developer

  • Added a maintainer-only /skills page (not deployed to production) that documents every site-* Claude Code skill — each card has a clickable /command chip that copies the slash command to the clipboard for one-keystroke pasting into Claude Code.
  • New orchestration skill /site-publish chains 8 sub-skills (verify → validate-links → figma-sync → audit → sitemap → release-notes → push → upload) with fail-fast behavior and a dry-run mode.
  • New /site-push skill stages and pushes site changes to GitHub with auto-generated commit messages from the diff.
  • Sitemap now includes the /links page.

Design Systems — ServiceNow Horizon

  • Removed 11 invalid links that had no matching page in the live component sitemap: now-chip, now-label, now-link, now-list, now-pagination, now-switch, now-tree, now-empty-state, now-form, now-pivot-table, now-search-input, now-action-bar
  • Fixed Breadcrumb slug from now-breadcrumb to now-breadcrumbs
  • Fixed Empty State slug from now-empty-state to empty-state
  • Fixed Navigation Menu slug from now-canvas-menu to sn-canvas-menu
  • Fixed Radio Group slug from now-radio-button to now-radio-buttons
  • Fixed Rating slug from now-star-rating to sn-star-rating
  • Fixed Textarea slug from now-text-area to now-textarea
  • Fixed Timeline slug from now-timeline to sn-component-timeline
  • All 43 remaining Horizon component links verified as valid against the live sitemap

Stats

  • Links page updated to 2,580 validated / 13 unverified out of 3,084 total links

Design System Links

  • 91 invalid links fixed — re-validated all previously-broken URLs; Design System Links now shows 2,519 validated / 94 unverified out of 2,613 total
  • Polaris — all 38 component URLs updated to category-prefixed paths (e.g. actions/button, feedback-indicators/badge, selection-and-input/checkbox) matching Shopify's current URL structure
  • Stacks — removed trailing slash from all 21 URLs; trailing slash caused infinite 308 redirect loops (buttons/ → buttons → buttons/)
  • Flowbite — switched from single-base config to multi-path routing: form components go to /docs/forms/, typography to /docs/typography/, and UI components to /docs/components/
  • Elastic UI — complete URL map replaced with category-based paths (e.g. containers/accordion/, navigation/buttons/button/, forms/date-and-time/date-picker/)
  • Sage — fixed slug generation from raw lowercase to snake_case (e.g. FormSelect → form_select)
  • HeroUI — added textarea → text-area and datepicker → calendar mappings
  • Fluent 2 — fixed null set to correctly suppress URLs for datepicker, colorpicker, pagination, timepicker, and timeline (components not in Fluent 2)
  • Helsinki — added textarea → text-area mapping
  • Paste — added number-input → input and tree-view → summary-detail mappings
  • Pega UX — added link mapping; set tooltip to null (component does not exist)
  • Material Design — fixed button slug (all-buttons → buttons); added list → lists, icon → null, pagination → null
  • PatternFly — corrected form-select path from menus/ to forms/
  • Subtitle line wrapping fixed — the links page subtitle now renders on a single full-width line instead of wrapping at 640px

Figma Plugin

  • Browse-first home page — component list grouped by category with collapsible accordion sections, count chips, and expand/collapse all controls
  • AKA labels — when a default design system is selected, components show their alternate name (e.g. "Alert" shows "Banner" for Canvas) in lighter grey after the standard name
  • Smart "View in" button — shows View in [DS Name] (blue) when the component exists in the selected design system and links to the correct page; falls back to View on site (plain) when no DS-specific URL exists
  • Green dot indicators — moved to the right of each component row; bookmark icon moved to the left
  • Suggested prompts — reworded as natural-language questions ("What is a button?", "How do I confirm a deletion?") with correct smart query routing
  • Fixed states query doubling — "toast states" no longer sends "toast states states" to the API
  • Removed toolbar buttons — search now uses automatic intent detection instead of manual tool selection; cleaned up all leftover .tool-btn and toolConfig references
  • DS-scoped API responses — when a default design system is set, component lookups return focused results without listing all other systems' names
  • Chevron moved to left on category accordion headers; count chip pushed to far right

Design System Coverage

  • Full 93-system audit — every design system's component list was verified against its actual website; 538 missing component mappings added across all systems
  • Biggest gains: Elastic UI +22, DRUIDS +21, Instructure UI +18, Horizon +17, VTEX +17, Marvel +15, Bolt +14, Mística +14, Morningstar +13, Uniform +13
  • Canvas verified — all 29 component URLs checked against canvas.workdaydesign.com; 3 broken URLs fixed (toast, badge, color-picker)
  • Bitfield accuracy — regenerated all DS_COMP_BITS from actual aka data; fixed Canvas showing 48 components instead of correct 29 (now 35 after adding missing mappings)

URL Resolution

  • Pre-computed URL table — replaced fragile regex-based PHP URL construction with a static api/ds-urls.json lookup (2,645 URLs); api/ds-url.php reduced from 160 lines to 35
  • Fixed urlFn suffix parsing — Fluent (/usage), Blueberry/Lucid/Gamut/Orbit (--docs), and Finastra (--default) suffixes were being dropped
  • Fixed storybook: true — systems with storybook: true after their urlFn weren't matching the config regex
  • Fixed slugFn: 'raw' — Momentum, Ariakit, and Yoga now correctly skip kebab-casing when slugFn is set
  • First-match-wins for duplicate aka entries — Vibe's button was resolving to "ButtonGroup" instead of "Button"

New Pages

  • Site Map (/site-map) — directory of all pages, component views, icon detail pages, and API endpoints
  • Glossary (/glossary) — 32 design system terms with anchor links; auto-linked in component descriptions via linkGlossary()
  • Design System Reference (/design-system-reference) — living style guide with color tokens, type styles, spacing scale, and component previews

New Pages

  • Added Design System Reference page — living documentation of all design tokens (colors, typography, spacing, radius, shadows) and UI components (buttons, badges, inputs, cards, tags, avatars, tabs, tooltips) with live previews, class names, usage counts, and theme switching.
  • Added Site Map page — complete directory of all 9 pages, 4 component views, 62 component detail pages, 61 icon detail pages, and 3 API endpoints.
  • Added Glossary page — 32 design system terms and concepts with anchor links. Component descriptions now link to glossary terms automatically.

Design Systems

  • Added 10 new design systems: Lucid (Xandr), Gamut (Codecademy), Orbit (Sharegate), Horizon (ServiceNow), Blueberry (IQ Tech), React Aria (Adobe), Helsinki (City of Helsinki), Mews, Sage (Kajabi), and Visa Product Design.
  • Added Storybook links for 13 design systems including Carbon, Chakra UI, Fluent, Grommet, Paste, Primer, and Vibe.
  • Added table view to the Design Systems directory with sortable columns (Name, Company, Components).
  • Sort toggle group now includes Components sort with ascending/descending chevron indicators across all views.
  • Shortened all design system descriptions by ~50% for scannability.
  • Design system list view now shows company name inline after the system name.
  • Fixed Elastic UI component count — abbreviation mismatch prevented components from appearing.
  • Fixed Visa duplicate abbreviation collision with Vibe — added 32 component mappings.
  • Expanded component mappings for Cauldron (4→30), Auro (10→24), Morningstar (10→23), and Bolt (5→16).

Figma Plugin

  • Restructured to Browse-first layout — component list is the default view; search is accessible via header icon.
  • Added component detail view with collapsible accordion sections, fixed title bar, and back navigation.
  • Added bookmarks panel accessible from the header with remove-on-hover X buttons.
  • Added settings panel with searchable design system selector and Save/Cancel buttons.
  • Added "View in" / "View on web" buttons linking to external design system pages via api/ds-url.php endpoint.
  • Added component linking in AI responses — component names are clickable to navigate to their detail.
  • Added category icons and expand/collapse all to the browse list.
  • Increased all font sizes by 2px across the plugin for better readability.
  • Header now shows selected design system name instead of "UX Components".

Components

  • Added Toolbar summary to components-what.js — the only component missing its overview text.
  • Added installation code snippets (npm, HTML, CSS) to all 12 icon library detail pages.
  • Added positioning copy to home page cards and hero section.

Performance

  • Consolidated 5 CSS patterns: option buttons, interactive rows, tab variants, badge outlines, and label variants — saving ~96 lines.
  • Unified toggle group styling across Grid/List/Table and Name/Company/Components to match theme toggle pattern.
  • Removed 7 unused CSS rules and the sidebar border.
  • All site cookies are now cleared on page load — the site uses localStorage exclusively.

Developer

  • Added api/ds-url.php endpoint — resolves the correct external URL for any component in any design system, parsing DESIGN_SYSTEM_URLS config including urlFn patterns.
  • Added Material Design component mappings for button, card, checkbox, chip, dialog, input, progress, search, select, and tabs.

Icons

  • Fixed Radix Icons detail page crash caused by icons with null names calling CDN URL functions.
  • Fixed Radix Icons and Carbon Icons SVG URLs — PascalCase names like HamburgerMenu are now correctly converted to kebab-case (hamburger-menu) for the Iconify API.
  • Fixed icon names with trailing numbers (e.g. Cross1, LockOpen1) — a dash is now inserted before the digit (cross-1, lock-open-1).
  • Cards with null icon names now display a dash instead of the literal text "null".

Performance

  • Deferred components-data.js (232 KB) on the components page — no longer blocks DOM parsing.
  • Deferred icons-data.js (104 KB) on the icons page — no longer blocks DOM parsing.
  • Removed duplicate <link rel="preconnect"> for unpkg CDN on the icons page.
  • Removed ~750 bytes of dead CSS: unused .alert variant block, .landing-subtitle, .landing-card-arrow, and .acc-title selectors.

SEO

  • Added /icon-libraries to sitemap.xml.

Universal Icons

  • Added Universal Icons section — 61 icons across 12 libraries (Lucide, Material Symbols, Font Awesome 6, Heroicons 2, Phosphor, Tabler, Bootstrap Icons, Remix Icon, Ionicons, Feather, Radix Icons, Carbon Icons).
  • Each icon detail page shows Also known as (grouped by name with library icons), a Summary, Preview at 5 sizes, Usage (when to use / when not to use), States, and Related icons.
  • "Also known as" groups aliases by name — e.g., 7 libraries all calling the same icon "home" share a single card with library-specific icon previews.
  • Added Thumbs Down icon to the Sentiment category.

Icon Library Directory

  • Added Icon Libraries directory page listing all 12 supported icon libraries with icon count, style, and license info.
  • Directories section on the home page now links to both Design Systems and Icon Libraries.

Search

  • Typeahead now searches both components and icons — results are split into labeled sections.

Components

  • Fixed Also known as card layout — component name now appears as the card header above the list of design systems.

SEO

  • Page titles and social sharing tags now update dynamically when navigating to any component or icon detail page.
  • Added all 61 icon detail pages to the sitemap — now indexed by search engines.

Performance

  • Faster load times on components and icons pages — reduced stylesheet size and improved CDN caching.

Performance

  • Added defer to search-data.js and typeahead.js across all pages — 33KB unblocked per page load (search only activates on user interaction).
  • Added defer to chat.js, components.js, and components-what.js on the components page — 144KB unblocked on the heaviest page.
  • Deferred components-data.js (231KB) on homepage and design systems page by extracting inline scripts to index.js and design-systems.js.
  • Switched Google Fonts from render-blocking <link rel="stylesheet"> to non-blocking preload + onload swap across all 7 pages.
  • Extracted 298-line inline script from mcp.html to mcp.js so it's browser-cached between visits.
  • Added <link rel="preconnect"> for unpkg CDN on components page to reduce Lucide icon library DNS latency.

Design Systems

  • Added 9 new design systems — Marvel, Pega UX, Seeds (Sprout Social), Skyline (Benevity), Stacks (Stack Overflow), Uniform (Hudl), Vanilla (Canonical), VTEX Styleguide, and Yoga (Gympass) — bringing the total to 82.

Settings

  • Font size slider now available in the settings dropdown on all pages, not just the components page.

Developer

  • Fixed launch.json server config pointing to old project directory — localhost:3000 now works again after the project was renamed.
  • Added site-audit Claude Code skill for auditing file size and loading performance issues.

MCP Server

  • Consolidated MCP tools into 3 intent-based tools — lookup, recommend, and compare — replacing 8 separate data-query tools with natural language interfaces.
  • Added interactive test console with live API calls, example query chips, and autosuggest for component names, categories, and design systems.
  • Responses now available in 3 formats — Markdown (default), structured JSON, and XML — selectable via toggle group or format parameter.
  • JSON responses return fully structured data with separate fields for overview, when_to_use, when_to_avoid, states, also_known_as, and more.
  • "Load live examples" button fetches real responses from the server for all 3 formats.

Local Development

  • Switched local dev server from Python to PHP, enabling full MCP API testing locally.
  • Added router.php for clean URL routing on PHP's built-in server (replicates .htaccess behavior).

Chat

  • AI chat responses now show related component pages as clickable chips below each answer.

New Components

  • Added Form, Toolbar, and Icon components, bringing the total to 62.

Design Systems

  • Added 22 new design systems, bringing the total to 68 — including Primer (GitHub), LeafyGreen (MongoDB), Vibe (monday.com), Braid (SEEK), Cloudscape (AWS), Backbase, Anvil (ServiceTitan), Semantic UI, Pharos (JSTOR), NHS, Nord (Nordhealth), ONS, Morningstar, Protocol (Mozilla), GOLD (Australian Government), Grommet (HPE), and more.
  • Total of 1,939 component mappings across all design systems.

MCP Server

  • Launched MCP Server with 8 tools for AI assistants — list components, get details, search, compare design systems, check states, and get smart suggestions.
  • New suggest_component tool — describe a UI need in plain language and get recommended components.
  • New get_design_system tool — see all components mapped to a specific design system.
  • New get_component_states tool — get interactive states for any component.
  • MCP documentation page with collapsible example requests and responses for every tool.

Accessibility

  • Fixed 8 WCAG AA contrast failures across all four themes — borders and subtle text now meet 3:1 minimum ratio.
  • Improved border visibility in dark and blue themes for better UI component contrast.

Performance

  • Compacted component data from 253 KB to 213 KB (16% smaller) with optimized aka format.
  • Added data validation script to prevent syntax errors in component data.

Theme and Styling

  • Home page community banner now adapts to all four themes instead of using hardcoded colors.

New Components

  • Added 10 new components, bringing the total to 59 — Date Picker, Time Picker, Number Input, Color Picker, Data Table, Tree View, List, Chip, Image, and Timeline.
  • Each new component includes preview, anatomy, states, icons, usage guidance, AI prompt, and design system mappings.

Design Systems

  • Added 14 new design systems, bringing the total to 46 — including Auro (Alaska Airlines), Backpack (Skyscanner), Bulma, Cauldron (Deque), Geist (Vercel), GOLD (Australian Government), Grommet (HPE), Helios (HashiCorp), and Mística (Telefónica).
  • "Also known as" now merges terms case-insensitively — variants like "button" and "Button" appear as a single entry with the title-case name.

Bookmarks

  • Save components for later with bookmarks — click the bookmark icon next to any component title to save it.
  • Access all your bookmarks from the bookmark icon in the header, with one-click navigation and easy removal.

Interactive Previews

  • Carousel preview is now fully interactive — click the arrows or dot indicators to cycle through slides.
  • Color Picker redesigned with full spectrum saturation/brightness panel, hue slider, alpha transparency slider, and preset swatches.
  • Previews now adapt to the selected theme instead of using fixed colors.

Pages

  • New About page with project background, acknowledgment of Brad Frost's Atomic Design, and creator bio.
  • Added category descriptions to the Default and Atomic views explaining what each category covers.
  • Top navigation now consistent across all pages — search, Ask AI, bookmarks, and settings appear on every page.
  • Component URLs now reflect the active tab (e.g., /components/button/usage).

Accessibility

  • Added skip navigation link to all pages for keyboard users.
  • Added proper landmark regions (main, nav) across all pages.
  • All decorative SVGs now have aria-hidden; all interactive elements have accessible labels.
  • Added visible focus indicators for keyboard navigation.
  • Improved footer contrast for better readability.
  • Fixed heading hierarchy on the Release Notes page.

Performance

  • Component data reduced from 390 KB to 206 KB (47% smaller) by extracting previews and descriptions.
  • Component previews now lazy-load on first view, saving 137 KB on initial page load.
  • Added cache control headers — HTML always fresh, JS/CSS revalidate hourly, images cached for a week.

Bug Fixes

  • Fixed chat history causing "Bad Request" errors by migrating from cookies to localStorage.
  • Fixed browser autocomplete suggestions appearing over search and chat inputs.
  • Fixed top navigation not spanning full page width on some pages.

New Design Systems

  • Added 22 new design systems, bringing the total to 32: Atlassian, Dell, USWDS, Momentum (Cisco), Clarity (Broadcom), Evergreen (Segment), Paste (Twilio), GOV.UK, Lightning (Salesforce), Spectrum (Adobe), Polaris (Shopify), PatternFly (Red Hat), Elastic UI, Ariakit, HeroUI, Visa, eBay, Flowbite, Cedar (REI), Forma 36 (Contentful), Aurora (Government of Canada), and Instructure UI.
  • Home page design system count is now dynamic, automatically derived from the component data.
  • Design system cards now display a component count badge in the top-right corner.
  • Grid/List and Name/Company sort controls styled as toggle groups.

New Components

  • Added 8 new components, bringing the total to 49: Tag, Empty State, File Upload, Search, Link, Stepper, Banner, and Meter.
  • Collapsible previews redesigned with Settings, Read More, and Filters examples.

States Comparison View

  • Added States tab to the component view, showing all component states in a full-width two-column table with tags.
  • States view supports expand/collapse all and CSV download.

Compare Table

  • First column (Component) is now sticky, staying visible while scrolling horizontally.
  • Category accordion labels are sticky and remain visible when scrolling.
  • Added Sort by Name/Company toggle to reorder columns.
  • Also known as cards with more than 5 systems now show a "+N more" toggle.
  • Custom scrollbar styling and minimum column width of 120px.

Clean URLs

  • Switched from hash-based routing to clean URLs — /components/button instead of components.html#/button.
  • View modes have their own URLs: /components/atomic, /components/compare, /components/states.
  • Generated sitemap.xml with 56 URLs for SEO.
  • Apache .htaccess rewrite rules for LAMP server support.
  • Legacy hash URLs still work as a fallback.

Themes

  • Added Blue and Beige themes (4 total). Beige is now the default.
  • Theme chooser added to the home page with active state indicator. Home page icon color adapts to theme.
  • Chat panel now uses theme CSS variables — fully adapts to all themes.
  • Headers are white in dark and blue themes for better contrast.

Search & Recently Viewed

  • Focusing the search field shows recently viewed components with descriptions.
  • If no history exists, shows 10 random suggested components instead.
  • Recently viewed list disappears when the user starts typing.

Preview Examples

  • Updated to brighter primary colors — buttons, checkboxes, switches, and progress bars use vibrant blue (#2563eb).
  • Badge colors changed to lighter pastel backgrounds with colored text (green, amber, red, blue).
  • Alert variants use light semantic backgrounds instead of dark.
  • Preview font sizes normalized to 14px base with intentional size variants preserved.
  • Preview boxes use scoped CSS variables to ensure color accessibility across all themes.

Chat & AI

  • Migrated chat history from cookies to localStorage, fixing "Bad Request" errors.
  • Chat header title changed to "UX Components AI".
  • Chat input limited to 240 characters. Search icon removed from input.
  • Expanded chat now covers the full page.
  • Chat panel margins removed on all pages.

Mobile

  • On mobile, tapping the chat input animates content away and centers the input vertically with a gradient overlay (solid at top, transparent at bottom).
  • Chat input no longer auto-focuses after AI response on mobile.
  • Chat panel fully locks background scrolling with position: fixed and overscroll-behavior: contain.
  • Chat panel keyboard awareness using visualViewport API.
  • Chat input scrollbar hidden for cleaner appearance.
  • Compare table with horizontal scrolling, sticky first column, and compact sort dropdown.
  • Tab group spans full width. Suggested prompts truncated with ellipsis.

Code Refactoring

  • Created shared.js — single source for theme, settings, footer, and utilities across all pages.
  • Moved design system constants to components-data.js as single source of truth.
  • Extracted groupByCategory() and wireTableToggle() utilities.
  • Design Systems Directory expanded to 1200px with 3-column grid and sort toggle.

New Design System

  • Carbon Design System (IBM) added as the 10th design system, with full component mappings across the compare table and AKA entries.

AKA Section Redesign

  • Refactored "Also known as" layout to group by term first, with a vertical list of design systems that use that term.
  • AKA cards now use CSS Grid for uniform widths.
  • Design system names link directly to each system's component page.
  • Audited and corrected AKA entries for Separator, Pagination, and other components.

UI Consistency

  • Unified all toggle groups (theme, view, preview tabs, sidebar) to consistent pill style with 13px font size.
  • Preview toggle tabs restyled from segmented border to pill style matching the rest of the site.
  • Preview toggle now correctly appears below the "Preview" header instead of beside it.
  • Icon suggestion cards made uniform width (100px) with centered, truncated labels.

Performance

  • Extracted components data into external components-data.js, reducing components.html from 381 KB to 57 KB.
  • Moved inline preview styles into CSS classes for better caching and separation of concerns.

Compare View

  • Compare table now sorts alphabetically by component name.
  • Expand/collapse controls moved above the table for better accessibility.

Bug Fixes

  • Fixed undefined CSS variables (var(--hover) and var(--card)) across multiple selectors.
  • Removed empty rulesets and redundant CSS declarations.
  • Removed duplicate preview fields from component data.

Launch

  • Initial release of UX Components with 70+ components across 12 categories.
  • Component detail pages with descriptions, use/avoid guidance, AI prompts, accessibility notes, and interactive previews.
  • Design systems directory featuring Material Design, Fluent, Ant Design, Chakra UI, Bootstrap, Radix UI, Shadcn/UI, and Base Web.
  • Component comparison table showing naming across design systems.
  • Atomic design view organizing components as Atoms, Molecules, and Organisms.
  • Full-text search with typeahead across all components.
  • Dark and light theme support.
  • Tile and list view toggle on design systems page.