# UI Hub

> Curated, multilingual directory of 2395 public UI resources (component libraries, component style demos, effects, design systems, design skills for AI agents) plus original blog analysis of AI design techniques. Data updated 2026-10-15 15:17 UTC.

Use the JSON endpoints, not the SPA, when acting as an agent. Every entry links to its original site; licenses belong to the original authors.

## Design encyclopedia (query this first)
- [Encyclopedia](https://ui.incidental.site/kb/): skills (full SKILL.md where licensed), design specs (spacing, typography, colour, motion, accessibility, dark mode, mobile), house style & lessons, blog notes
- [KB JSON](https://ui.incidental.site/api/kb.json): every entry with type, tags, url, raw .md URL and full markdown
- [Search index](https://ui.incidental.site/api/search-index.json): kb entries + all resources/components, fields t,k,u,r,d,g
- Raw entry pattern: https://ui.incidental.site/kb/<type>/<slug>.md  (type = skill | spec | note), e.g. https://ui.incidental.site/kb/spec/motion.md, https://ui.incidental.site/kb/skill/taste-skill.md
- [Context bundle](https://ui.incidental.site/context-bundle.md): AGENTS.md + all specs + house style + skills index in one file

## Machine-readable
- [Resources JSON](https://ui.incidental.site/api/resources.json): all items with type, ct (component kind), vs (visual style), pricing, url
- [Skills JSON](https://ui.incidental.site/api/skills.json): design + engineering agent skills and the recommended workflow
- [Agent guide](https://ui.incidental.site/agents/): how to search, pick, copy and verify
- [AGENTS.md](https://ui.incidental.site/AGENTS.md)
- [Full text for LLMs](https://ui.incidental.site/llms-full.txt)

## Blog
- [Blog RSS feed](https://ui.incidental.site/blog/rss.xml) · [Blog JSON](https://ui.incidental.site/api/blog.json)
- [AI-assisted UI design: a workflow that keeps taste in the loop](https://ui.incidental.site/blog/ai-assisted-ui-design-workflow/): Generators are fast but average. Split the job: humans set direction and constraints, AI explores variants, humans curate and polish.
- [Prompting for UI: write specs, not wishes](https://ui.incidental.site/blog/prompts-for-ui/): "Modern and clean" means nothing to a model. Name layout, tokens, states, content and what to avoid.
- [Design-to-code with AI: map to your components, not to pixels](https://ui.incidental.site/blog/design-to-code-with-ai/): Pixel-perfect export creates throwaway code. Give the agent your component registry and tokens via MCP so output reuses what you already ship.
- [Teaching agents taste: how design skills de-slop AI interfaces](https://ui.incidental.site/blog/taste-and-skills-for-agents/): Skills like frontend-design, taste-skill and impeccable package opinions as files agents load on demand. Here is how to combine them.
- [Component composition: why headless + copy-paste won](https://ui.incidental.site/blog/component-composition/): Radix behaviour, your styles, code you own. Compound components keep APIs small and make AI edits safer.
- [Motion that feels right: purpose, duration, easing, restraint](https://ui.incidental.site/blog/motion-that-feels-right/): Most UI motion should be under 300ms, ease-out, and skipped for frequent actions. Spectacle belongs on marketing pages, not in tools.
- [Dark mode done right: tokens, elevation and contrast](https://ui.incidental.site/blog/dark-mode-done-right/): Dark mode is a second palette, not an inverted one. Use semantic tokens, lighter surfaces for elevation, and desaturated accents.
- [Accessibility in AI-generated UI: the checks models skip](https://ui.incidental.site/blog/accessibility-in-ai-generated-ui/): Generated UIs look fine and fail keyboards and screen readers. Start from accessible primitives, then audit against WCAG 2.2.
- [v0 in practice: from a prompt to shadcn code you can keep](https://ui.incidental.site/blog/v0-prompt-to-shadcn/): v0 is strongest when you treat it as a shadcn/Tailwind code generator, not a design oracle. Brief it like an engineer, then pull the code into your repo.
- [Lovable and Bolt: when prompt-to-UI becomes prompt-to-app](https://ui.incidental.site/blog/lovable-bolt-prompt-to-app/): Both tools build whole apps, so design quality now competes with data, auth and deploys for attention. How to keep the look from being an afterthought.
- [Figma Make and the Figma agent: AI moves onto the canvas](https://ui.incidental.site/blog/figma-make-and-figma-agent/): Figma Make turns prompts into working prototypes; the Figma agent, generally available since 6 Oct 2026, reads team guideline files. Why the guideline file matters most.
- [MagicOS: Magic Patterns bets on an infinite canvas of AI threads](https://ui.incidental.site/blog/magic-patterns-magicos/): Launched 13 Oct 2026: one coordinator chat spawns parallel design threads on a shared canvas. What it fixes (lost context) and when a single design is still better.
- [Prompt-to-UI tools compared: v0, Lovable, Bolt, Figma Make, Magic Patterns](https://ui.incidental.site/blog/prompt-to-ui-tools-compared/): Not a leaderboard: a decision guide by what you are shipping, where the output lives, and how much design control you need.
- [Aceternity UI deep dive: spectacle, used sparingly](https://ui.incidental.site/blog/aceternity-ui-deep-dive/): Copy-paste React + Tailwind + Motion effects that made the "fancy" landing look popular. Which pieces carry a page and which turn it into a demo reel.
- [Magic UI deep dive: animated components that install like shadcn](https://ui.incidental.site/blog/magic-ui-deep-dive/): An open-source (MIT) set of motion components distributed through the shadcn registry. Best picks for SaaS pages and how to keep them accessible.
- [Cult UI deep dive: tactile components with personality](https://ui.incidental.site/blog/cult-ui-deep-dive/): shadcn-compatible components that feel physical: dynamic islands, textured buttons, expandable cards. How to borrow personality without breaking consistency.
- [shadcn blocks and registries: page sections as source code](https://ui.incidental.site/blog/shadcn-blocks-deep-dive/): Blocks (dashboards, sidebars, login pages) install with one CLI command, and any team can publish its own registry. Why this is the best substrate for AI agents.
- [Typography for AI-generated UI: the fastest way to look less generic](https://ui.incidental.site/blog/typography-for-ai-generated-ui/): Generators default to one sans at three sizes. A type scale, a second typeface, tighter tracking on display sizes and real line lengths fix most of it.
- [OKLCH colour systems: palettes that survive dark mode](https://ui.incidental.site/blog/oklch-color-and-dark-mode/): OKLCH keeps perceived lightness consistent across hues, so you can generate scales and dark themes by math instead of eyeballing. Tailwind v4 uses it by default.
- [Landing page teardown: what Linear and Vercel get right](https://ui.incidental.site/blog/landing-page-teardown-linear-vercel/): Two widely copied developer-tool homepages, read as a list of decisions: one message, product as hero image, dark restraint, and proof placed right after the promise.
- [Dashboard patterns that hold up: from KPI strip to drill-down table](https://ui.incidental.site/blog/dashboard-design-patterns/): AI tools love to generate twelve charts. Good dashboards answer three questions in order: is it OK, what changed, why. A layout and a component list for each.
- [Design tokens for agents: the file that makes AI output on-brand](https://ui.incidental.site/blog/design-tokens-for-agents/): A machine-readable token file (the W3C DTCG format) plus a short usage note beats any adjective in a prompt. Structure, naming, and how to hand it to an agent.
- [Design skills for Claude and Cursor: SKILL.md, rules and AGENTS.md](https://ui.incidental.site/blog/claude-cursor-design-skills/): Three file formats, one idea: durable instructions an agent loads when relevant. How to write a design skill that changes output, with a template.
- [Weekly roundup, 14 Oct 2026: guideline files go mainstream](https://ui.incidental.site/blog/weekly-roundup-2026-w42/): Figma agent GA with team guidelines, Lovable drops its pick-a-look step, Magic Patterns launches MagicOS, Chrome iterates on HTML-in-Canvas. What it means for your workflow.
- [Tutorial: have an agent build a landing page using UI Hub as context](https://ui.incidental.site/blog/tutorial-agent-builds-landing-with-ui-hub/): Six steps from an empty folder to a verified page: load AGENTS.md, search the encyclopedia, pick components, load skills, build, verify in a browser.
- [Claude Design everywhere: out of beta, into every chat](https://ui.incidental.site/blog/claude-design-everywhere/): Anthropic took Docs, Slides and Design out of beta on every plan, launched Dashboards and Motion in beta, and will close the standalone Design site on 14 Dec 2026. For UI builders the practical move is to migrate the design system now.
- [Figma code layers and Specs: the canvas becomes the shared context again](https://ui.incidental.site/blog/figma-code-layers-and-specs/): At Config India (15 Oct 2026) Figma moved code layers into open beta, launched Specs as a Markdown home on the canvas, and let libraries carry guidelines and code sources. The lesson for UI builders: agents are short of constraint files, not generators.

## Top component libraries
- [Radix Primitives](https://www.radix-ui.com/primitives): 无样式、可访问的 React 底层组件：对话框、下拉菜单、选择器、Tabs、Tooltip 等，shadcn/ui 的地基
- [Radix Themes](https://www.radix-ui.com/themes): Radix 官方带样式组件主题，开箱即用、配色体系完整
- [Headless UI](https://headlessui.com/): Tailwind 团队出品的无样式组件：弹窗、菜单、列表框、开关、Tabs
- [Ark UI](https://ark-ui.com/): Chakra 团队的无样式组件，45+ 组件，React / Vue / Solid / Svelte 通用
- [Park UI](https://park-ui.com/): 基于 Ark UI 的带样式组件，Panda CSS / Tailwind 两套写法
- [shadcn/ui Blocks](https://ui.shadcn.com/blocks): shadcn 官方区块：登录页、侧边栏、仪表盘、日历，可直接用 CLI 添加
- [shadcn/ui Charts](https://ui.shadcn.com/charts): shadcn 官方图表：面积、柱状、折线、饼图、雷达，基于 Recharts
- [shadcn Registry 目录](https://ui.shadcn.com/docs/directory): shadcn 官方收录的第三方组件注册表目录，一站找到各家兼容 shadcn 的组件
- [daisyUI](https://daisyui.com/): 最流行的 Tailwind 组件类名插件，60+ 组件、30+ 主题
- [Flowbite](https://flowbite.com/): Tailwind 组件库，开源版 50+ 组件；原站另有付费 Pro 区块
- [HyperUI](https://www.hyperui.dev/): 免费 Tailwind 组件片段合集：营销页、电商、后台，复制即用
- [Preline UI](https://preline.co/): Tailwind 组件与区块，开源部分免费；原站另有付费 Pro
- [Meraki UI](https://merakiui.com/): Tailwind 组件，支持 RTL 和暗色模式
- [Tailwind Plus](https://tailwindcss.com/plus): Tailwind 官方付费组件与模板（原 Tailwind UI），500+ 组件；本站只放链接
- [Mantine](https://mantine.dev/): 100+ 组件和 70+ hooks，自带日期、图表、富文本、通知
- [Chakra UI](https://chakra-ui.com/): 老牌 React 组件库，主题系统灵活，v3 基于 Ark UI
- [MUI Material UI](https://mui.com/material-ui/): Material Design 的 React 实现，组件最全之一
- [MUI X](https://mui.com/x/): 数据表格、日期选择、图表、树视图；基础版免费开源，Pro / Premium 付费
- [Base UI](https://base-ui.com/): Radix / MUI / Floating UI 作者合作的无样式组件库
- [React Aria](https://react-aria.adobe.com/): Adobe 出品，无障碍做得最细的无样式组件与 hooks
- [Ant Design](https://ant.design/): 蚂蚁中后台组件库，60+ 组件，表格表单极强
- [Ant Design Mobile](https://mobile.ant.design/): 蚂蚁移动端组件库
- [AntV G2](https://g2.antv.antgroup.com/): 蚂蚁可视化语法，几十种图表
- [TDesign](https://tdesign.tencent.com/): 腾讯企业级设计体系，React / Vue / 小程序 / 移动端全覆盖
- [Arco Design](https://arco.design/): 字节中后台组件库，60+ 组件，带物料市场
- [Semi Design](https://semi.design/): 抖音前端出品，设计到代码一体，组件细节好
- [Naive UI](https://www.naiveui.com/): Vue 3 组件库，90+ 组件，主题可调
- [Element Plus](https://element-plus.org/): 饿了么 Vue 3 组件库，国内后台最常用
- [Vuetify](https://vuetifyjs.com/): Vue 的 Material 组件框架
- [PrimeVue](https://primevue.org/): Vue 组件库，90+ 组件；原站另有付费模板
- [PrimeReact](https://primereact.org/): React 版 Prime 组件库，90+ 组件；原站另有付费模板
- [PrimeNG](https://primeng.org/): Angular 版 Prime 组件库；原站另有付费模板
- [Nuxt UI](https://ui.nuxt.com/): Nuxt 官方组件库，基于 Reka UI + Tailwind
- [Reka UI](https://reka-ui.com/): Vue 版 Radix（原 Radix Vue），无样式可访问组件
- [shadcn-vue](https://www.shadcn-vue.com/): shadcn/ui 的 Vue 移植
- [Quasar](https://quasar.dev/): Vue 全家桶框架，一套代码出网页 / 移动 / 桌面
- [Vant](https://vant-ui.github.io/vant/): 有赞移动端 Vue 组件库
- [shadcn-svelte](https://www.shadcn-svelte.com/): shadcn/ui 的 Svelte 移植
- [Bits UI](https://bits-ui.com/): Svelte 无样式组件
- [Melt UI](https://melt-ui.com/): Svelte 无样式组件构建器
- [Skeleton](https://www.skeleton.dev/): Svelte / React 的 Tailwind 设计系统
- [Kobalte](https://kobalte.dev/): SolidJS 无样式可访问组件
- [Angular Material](https://material.angular.dev/): Angular 官方 Material 组件
- [Spartan](https://www.spartan.ng/): Angular 版 shadcn 风格组件
- [NG-ZORRO](https://ng.ant.design/): Ant Design 的 Angular 实现
- [Fluent UI](https://react.fluentui.dev/): 微软 Fluent 2 设计体系的 React 组件
- [Carbon Design System](https://carbondesignsystem.com/): IBM 设计体系，数据密集型界面优秀
- [Primer](https://primer.style/): GitHub 设计体系的 React 组件
- [Shoelace](https://shoelace.style/): Web Components 组件库，任何框架都能用
- [Material Web](https://material-web.dev/): Google 官方 Material 3 Web Components
- [Bootstrap](https://getbootstrap.com/): 经典 CSS 组件框架
- [Bulma](https://bulma.io/): 纯 CSS 组件框架，无 JS
- [Pico CSS](https://picocss.com/): 极简语义化 CSS，HTML 写完就好看
- [Open Props](https://open-props.style/): CSS 变量设计令牌：颜色、阴影、渐变、缓动
- [Tremor](https://tremor.so/): 仪表盘组件和图表，Tailwind + Recharts
- [Recharts](https://recharts.org/): React 最常用的图表库
- [Apache ECharts](https://echarts.apache.org/): 功能最全的开源图表库之一，示例画廊很大
- [Chart.js](https://www.chartjs.org/): 轻量 Canvas 图表
- [Nivo](https://nivo.rocks/): 好看的 React 数据可视化组件
- [visx](https://airbnb.io/visx/): Airbnb 的底层可视化组件

## FAQ
- **What is UI Hub?** A free, curated directory of 2395 public UI resources: 133 component libraries, 1929 component style demos with light/dark screenshots, 68 design skills for AI agents, plus effects, templates, specs and tutorials. It links to original sites and never hosts paid source code.
- **How do I find a component in a given style?** Load https://ui.incidental.site/api/resources.json and filter by ct (component kind, e.g. "dialog") and vs (visual style, e.g. "minimal" or "motion"). type="style" entries are concrete component demos with a libName and page URL; type="library" entries are whole libraries with install info on the site.
- **Which skills should an agent use for good UI?** One direction skill (frontend-design or taste-skill), emil-design-eng for motion and interaction polish, then impeccable, baseline-ui, web-design-guidelines and accessibility as an audit pass. See https://ui.incidental.site/api/skills.json.
- **Can I copy the code?** Open-source libraries can be used under their own licenses (MIT, Apache-2.0 etc.); the card shows the original link. Paid tiers (marked paid/freemium) must be bought from the original vendor.
- **How often is it updated?** Daily via a GitHub Actions job that adds new UI repositories and tools from GitHub, awesome-shadcn-ui and Hacker News. Nothing is deleted. Last update: 2026-10-15 15:17 UTC.