Interface Lab

LibraryAssets232 items

Assets connect real visual material to the project workflow.

Assets collect images, links, docs, and visual references so generation can work from real material and clear region roles.

Skills119

Website Systems93

PPT Styles55

Assets232

Assets

Material input layer: turn images, links, docs, and visual references into usable generation context.

Open Asset Workspace

Asset · 8.8KPro

Aura Asset Images

Search Aura assets like Unsplash, curate 5 strong direct image URLs, and prefer higher-res variants when available.

Search Aura assets like Unsplash, curate 5 strong direct image URLs, and prefer higher-res variants when available.Pro Asset · 0Pro

Asset Attribution Credit Surface

Design visible credits, source links, modification notes, and export persistence for CC BY, custom-licensed photos, patterns, illustrations, Lottie, maps, and similar assets.

Inputs must include asset list, page/export context, license name, author/title/source/license links, modification status, commercial context, and whether a no-endorsement notice is needed.

Pro Asset · 0Pro

Photo and 3D Asset Citation Intake

Create citation, license, optimization, and frontend-integration records for open images, photos, NASA/Wikimedia/Openverse media, HDRIs, PBR textures, glTF/GLB, and 3D models.

Inputs must include asset role (hero/detail/background/evidence/3D scene/test model), page context, commercial-use status, target output format, target size/frame rate/device range, candidate source links, and whether people, brands, or places are involved.

Pro FontOpen resource

Google Fonts

Use as the primary source for UI body fonts, display fonts, monospace fonts, and multilingual fallbacks.

LicensePer-family open font licenseCommercialCheck per setRiskNeeds reviewCreditCheck per asset

Resource: Google Fonts
License: Per-family open font license
Commercial: Check per set
Risk: Needs review
Credit: Check per asset
Get: Download from the exact font-family page or use next/font/google; record family, license, weights, subsets, and fallback.
Formats: TTF, WOFF2
Caution: Check each family license instead of assuming one license for all fonts.

google-fontsGoogle FontsFontFont-specific open licenses, commonly SIL OFL or Apache 2.0Open resource FontOpen resource

Fontsource

Use Fontsource when a project needs self-hosted fonts, version locking, offline builds, or no runtime external font requests.

LicensePer-package font licenseCommercialCheck per setRiskNeeds reviewCreditCheck per asset

Resource: Fontsource
License: Per-package font license
Commercial: Check per set
Risk: Needs review
Credit: Check per asset
Get: Install the exact font package such as @fontsource/inter; record package name, version, font license, and imported weights/subsets.
Formats: WOFF2
Caution: License still belongs to each font package; do not treat the Fontsource project license as the font license.

fontsourceFontsourceFontFont package licenses vary; check each package README/licenseOpen resource FontOpen resource

Bunny Fonts

Use as an external font CDN candidate when a product needs Google Fonts-compatible CSS with stronger privacy, GDPR, and no-tracking positioning.

LicensePer-font open licenses; check each family pageCommercialCheck per set

Resource: Bunny Fonts
License: Per-font open licenses; check each family page
Commercial: Check per set
Risk: Unmarked
Credit: Unmarked
Get: Use the Bunny Fonts CSS endpoint only when external CDN use is allowed; otherwise self-host selected WOFF2 files.
Caution: Still verify license and attribution requirements per font.

bunny-fontsBunny FontsFontPer-font open licenses; check each family pageOpen resource FontOpen resource

Inter

Use as a modern sans font for SaaS, dashboards, AI tools, and dense UI text.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Inter
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use next/font/google, @fontsource/inter, or self-hosted WOFF2 files.
Caution: Needs Noto, system fonts, or another CJK fallback for Chinese.

inter-fontInterFontSIL Open Font License 1.1Open resource FontOpen resource

Noto Sans / Noto CJK

Use for multilingual products, knowledge bases, docs, and UI that needs stable CJK fallback.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Noto Sans / Noto CJK
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use Google Fonts or self-host subsetted WOFF2 files for required scripts and weights.
Caution: Font files are large; control loading by language, weight, and glyph range.

noto-sans-cjkNoto Sans / Noto CJKFontSIL Open Font License 1.1Open resource FontOpen resource

Geist

Use for developer tools, AI products, docs, code-adjacent products, and Next.js projects.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Geist
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use the geist npm package, next/font/google, or self-hosted font files.
Caution: Carries a Vercel/developer ecosystem association; use carefully for consumer brands.

geist-fontGeistFontSIL Open Font License 1.1Open resource FontOpen resource

Mona Sans

Use for developer tools, AI products, portfolios, modern SaaS, data stories, and branded UI needing weight, width, opsz, and italic axis control.

LicenseSIL Open Font License 1.1CommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Mona Sans
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Download exact WOFF2/TTF files from GitHub releases or Google Fonts; record version, OFL, weight/width/opsz axes, Reserved Font Name boundary, and CJK fallback.
Formats: WOFF2, TTF, variable font, @font-face
Caution: Carries GitHub/developer associations, so check brand tone for non-developer products.

mona-sansMona SansFontSIL Open Font License 1.1Open resource FontOpen resource

Hubot Sans

Use for technical brand headings, AI/automation products, developer marketing pages, feature headlines, and display text needing a geometric technical feel.

LicenseSIL Open Font License 1.1CommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Hubot Sans
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Download Hubot-Sans.woff2 or static instances, recording version, OFL, weight/width axes, Reserved Font Name, and its pairing role with Mona Sans.
Formats: WOFF2, TTF, variable font, @font-face
Caution: Not ideal for long body text or dense table bodies across a whole app.

hubot-sansHubot SansFontSIL Open Font License 1.1Open resource FontOpen resource

Public Sans

Use for public-service, government, compliance, documentation, data portals, and neutral high-readability product UI.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Public Sans
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use @fontsource/public-sans, USWDS assets, Google Fonts when available, or self-host subsetted WOFF2 files.
Caution: Needs Noto CJK or system fallback for Chinese.

public-sansPublic SansFontSIL Open Font License 1.1Open resource FontOpen resource

IBM Plex

Use for enterprise SaaS, data products, developer tools, and brand systems that need a related Sans, Serif, and Mono family.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: IBM Plex
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use @fontsource/ibm-plex-sans, @fontsource/ibm-plex-serif, @fontsource/ibm-plex-mono, Google Fonts, or self-hosted WOFF2 files by required family and script.
Caution: IBM Plex carries an IBM brand association, so check tone for non-enterprise products.

ibm-plexIBM PlexFontSIL Open Font License 1.1Open resource FontOpen resource

Atkinson Hyperlegible

Use for low-vision-friendly interfaces, education products, reading tools, form recovery, and body UI that needs strong character differentiation.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Atkinson Hyperlegible
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use Google Fonts, @fontsource/atkinson-hyperlegible, or self-hosted WOFF2 for accessibility-focused reading surfaces.
Caution: The original family has limited weights, so complex brand hierarchy may need a display pairing.

atkinson-hyperlegibleAtkinson HyperlegibleFontSIL Open Font License 1.1Open resource FontOpen resource

Lexend

Use for education products, reading tools, learning platforms, long-form knowledge bases, and adjustable reading-mode experiences.

LicenseSIL Open Font License 1.1CommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Lexend
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Download from Google Fonts, the Lexend site, or GitHub; record the exact family/axis, OFL, RevReading Lexend reserved name, weights, and CJK fallback.
Formats: TTF, WOFF2, variable font, @font-face
Caution: Do not claim it treats dyslexia; frame it as a readability and reading-preference candidate.

lexend-fontLexendFontSIL Open Font License 1.1Open resource FontOpen resource

Readex Pro

Use for education, public-service, knowledge-base, and multilingual products needing a Latin plus Arabic readability-oriented font.

LicenseSIL Open Font License 1.1CommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Readex Pro
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Download from Google Fonts or GitHub; record Readex Pro version, Latin/Arabic script coverage, OFL, RevReading Lexend reserved name, and fallback.
Formats: TTF, WOFF2, variable font, @font-face
Caution: Do not treat it as full global script coverage; Chinese, Japanese, and Korean still need separate fallback.

readex-proReadex ProFontSIL Open Font License 1.1Open resource FontOpen resource

B612

Use for aviation, transport, industrial monitoring, map coordinates, critical states, dashboards, alert logs, and task UI needing strong small-size differentiation.

LicenseSIL Open Font License 1.1CommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: B612
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Download from Google Fonts or the PolarSys GitHub repository; record the font-file OFL, repository EPL/EDL boundary, version, Sans/Mono role, and Airbus/B612 naming association.
Formats: TTF, WOFF2, @font-face, Google Fonts family
Caution: Its aviation/instrumentation tone is strong, so avoid it for lifestyle long-form body copy.

b612-fontB612FontSIL Open Font License 1.1 for font files; repository also includes EPL 2.0 and EDL 1.0 materialsOpen resource FontOpen resource

JetBrains Mono

Use for code editors, developer tools, AI prompt/code blocks, terminal-like controls, and technical documentation.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: JetBrains Mono
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use @fontsource/jetbrains-mono, Google Fonts, or self-hosted WOFF2; disable ligatures for code education when glyph transparency matters.
Caution: For code education or security review, confirm ligatures do not obscure actual characters.

jetbrains-monoJetBrains MonoFontSIL Open Font License 1.1Open resource FontOpen resource

Commit Mono

Use for code editors, terminals, AI prompt/code blocks, documentation code screenshots, and neutral programming typography that should not dominate the brand.

LicenseSIL Open Font License 1.1 for font filesCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Commit Mono
License: SIL Open Font License 1.1 for font files
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Generate default or custom font packages from the official site; save custom settings, version, OFL font license, and enabled calt/alternates. The website's MIT code license is separate from the font license.
Formats: OTF, TTF, WOFF2, editor font
Caution: Save settings for custom font packages or reproduction becomes hard.

commit-monoCommit MonoFontFont files: SIL Open Font License 1.1; website code: MITOpen resource FontOpen resource

Monaspace

Use for code editors, developer docs, AI coding environments, experimental technical brands, and products needing multiple compatible monospace voices.

LicenseSIL Open Font License 1.1CommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Monaspace
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Download the exact Monaspace family from GitHub releases; record family, weight/width/slant axes, calt texture-healing/ligature settings, version, and OFL/Reserved Font Name.
Formats: OTF, TTF, WOFF2, variable font
Caution: Enable Texture Healing and ligatures carefully for code education, review, or security contexts.

monaspaceMonaspaceFontSIL Open Font License 1.1Open resource FontOpen resource

Source Sans 3

Use for docs, knowledge bases, enterprise information architecture, forms, and neutral Adobe open-source UI typography.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Source Sans 3
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use Google Fonts, @fontsource/source-sans-3, or self-hosted files; pair with Source Serif or Source Code only when those roles are needed.
Caution: Chinese requires Source Han, Noto, or system fallback.

source-sans-3Source Sans 3FontSIL Open Font License 1.1Open resource FontOpen resource

Source Han Sans

Use for Chinese/Japanese/Korean multilingual UI, knowledge bases, formal docs, and products needing consistent Pan-CJK glyphs.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Source Han Sans
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Self-host only selected language/region builds and weights, or use system/Noto fallback when full Pan-CJK delivery would exceed budget.
Caution: Files are large; production must control region, weight, subsets, and preload.

source-han-sansSource Han SansFontSIL Open Font License 1.1Open resource FontOpen resource

LXGW WenKai

Use for Chinese narrative pages, education products, cultural content, friendly explainers, hand-written empty states, and softer Chinese headings.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: LXGW WenKai
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use selected TTF/WOFF2 builds or a trusted webfont package; load only needed weights and pair with a neutral sans fallback for UI controls.
Caution: CJK files are large, so control file choice, subsets, preload, and fallback.

lxgw-wenkaiLXGW WenKaiFontSIL Open Font License 1.1Open resource FontOpen resource

Fraunces

Use for editorial titles, brand pages, portfolios, data-story openings, culture/food/lifestyle pages, and heroes needing a soft-serif signature.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Fraunces
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use Google Fonts, @fontsource-variable/fraunces, or self-hosted variable WOFF2; reserve for display titles and pair with a readable sans/CJK fallback.
Caution: Best for titles and short copy, not as default dense UI body text.

fraunces-fontFrauncesFontSIL Open Font License 1.1Open resource FontOpen resource

Manrope

Use for modern SaaS, AI tools, fintech, dashboards, and dense product UI that needs a geometric but not cold sans voice.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Manrope
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use next/font/google, @fontsource/manrope, or self-hosted WOFF2 files; pair with a CJK fallback such as Noto Sans CJK for Chinese UI.
Caution: Chinese needs a CJK fallback; keep Latin/CJK weight and x-height differences from breaking line rhythm.

manrope-fontManropeFontSIL Open Font License 1.1Open resource FontOpen resource

Space Grotesk

Use for tech brands, experimental portfolios, data stories, Web3/developer pages, poster-like heroes, and display sans typography with a Space Mono echo.

LicenseSIL Open Font License 1.1CommercialCommercial OK

Resource: Space Grotesk
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use Google Fonts, @fontsource/space-grotesk, or self-hosted WOFF2; reserve for headings, numbers, short labels, and tech/editorial hero typography.
Caution: Avoid using it as an all-site body font for long copy or Chinese mixing; it is stronger as display/heading type.

space-groteskSpace GroteskFontSIL Open Font License 1.1Open resource IconOpen resource

When a React/Next/Vite/shadcn project needs a default general UI icon set, consider Lucide first; output exact icon names, import statements, container size, strokeWidth, aria-label/decorative decision, and a brand-logo exclusion note.

LicenseISC LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Lucide Icons
License: ISC License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: For React/Next, prefer direct per-icon imports from lucide-react for tree-shaking; use dynamic icon imports only when icon names come from a CMS/database, and validate iconName with a fallback. When copying SVGs or generating SVG/data URIs with @lucide/icons, keep the ISC notice. Lucide officially does not accept brand logos, so use Simple Icons or official brand assets for logos.
Formats: SVG, TSX, Icon data, React component
Caution: For icon-only buttons, the accessible name usually belongs on the button, not the inner SVG; decorative icons stay aria-hidden.

lucide-iconsLucide IconsIconISCOpen resource IconOpen resource

Heroicons

Use as general product icons for Tailwind/shadcn projects, especially buttons, menus, and empty states.

LicenseMITCommercialCommercial OK

Resource: Heroicons
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install @heroicons/react; choose outline, solid, mini, or micro by density.
Caution: When mixing with Lucide, normalize stroke, cap style, and size.

heroiconsHeroiconsIconMITOpen resource IconOpen resource

Iconify Icon Sets

Use when a project needs a specific icon family, emoji set, or technical icon beyond the local icon package.

LicensePer-icon-set open licenseCommercialCheck per setRiskNeeds reviewCreditCheck per asset

Resource: Iconify Icon Sets
License: Per-icon-set open license
Commercial: Check per set
Risk: Needs review
Credit: Check per asset
Get: Use Iconify as discovery only; before download, open the exact icon-set page and record license, author, license URL, and brand-icon status.
Formats: SVG, JSON, SVG, React component
Caution: License varies by set; Iconify's project license is not the icon license.

iconifyIconify Icon SetsIconVaries by icon setOpen resource IconOpen resource

Simple Icons

Use for real brand logos, technology marks, payment/social/tool brand entry points, with per-brand governance.

LicenseCC0 for project data; per-brand usage guidanceCommercialCheck per setRiskHigh riskCreditCheck per asset

Resource: Simple Icons
License: CC0 for project data; per-brand usage guidance
Commercial: Check per set
Risk: High risk
Credit: Check per asset
Get: Use only for real brand-mark references; record each icon card license, brand guideline, usage context, and no-endorsement boundary.
Formats: SVG, JSON, SVG path, brand metadata
Caution: CC0 does not automatically clear brand trademark, usage-guideline, or third-party logo rights.

simple-iconsSimple IconsIconProject data is CC0, but check each brand icon license and trademark guidelinesOpen resource IconOpen resource

SVG Repo

Use as a search entry for missing icons, lightweight illustrations, and specific SVG assets; intake must resolve to the exact file license.

LicensePer-resource licenseCommercialCheck per setRiskNeeds reviewCreditCheck per asset

Resource: SVG Repo
License: Per-resource license
Commercial: Check per set
Risk: Needs review
Credit: Check per asset
Get: Download only from the exact asset page; record that page's license, author, attribution, Logo License/trademark status, and modification rights.
Formats: SVG, SVG
Caution: License types are mixed; the aggregator license page does not replace the specific asset page.

svg-repoSVG RepoIconVaries by resource, including Creative Commons, MIT, Apache, OFL, Logo License, and othersOpen resource IconOpen resource

Material Symbols

Use for Material-style web/Android products, settings, system states, and standard control icons.

LicenseApache 2.0CommercialCommercial OK

Resource: Material Symbols
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use Google Fonts icon font, Material Symbols npm packages, or exported SVG for selected icons.
Caution: Strongly tied to Material tone; normalize size and stroke when mixing with Lucide or Tabler.

material-symbolsMaterial SymbolsIconApache 2.0Open resource IconOpen resource

Radix Icons

Use for Radix/shadcn-style UI, compact forms, toolbars, menus, and small-control icons on a 15px visual grid.

LicenseMITCommercialCommercial OK

Resource: Radix Icons
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install @radix-ui/react-icons; import individual 15x15 React components for compact controls.
Caution: Do not drop directly into a 24px/2px-stroke system; normalize container size and visual weight.

radix-iconsRadix IconsIconMITOpen resource IconOpen resource

Tabler Icons

Use for SaaS, admin, healthcare, finance, and dashboard interfaces that need many consistent line symbols.

LicenseMITCommercialCommercial OK

Resource: Tabler Icons
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install @tabler/icons-react; import per icon to keep bundles small.
Caution: Large package, so import per icon.

tabler-iconsTabler IconsIconMITOpen resource IconOpen resource

Phosphor Icons

Use when the same icon semantics need outline, active, filled, or duotone states; define the global weight strategy first, then reserve a few exceptions for selected, active, empty, or illustrative states.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Phosphor Icons
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: For React, prefer per-icon imports from @phosphor-icons/react; for static HTML, load only the webfont weight needed. Do not load all six weights unless the page truly needs them and the font/CSS budget accounts for it. Retain the MIT notice when copying SVGs or modifying icons.
Formats: SVG, React component, webfont, CSS
Caution: Limit a page to one or two default weights; reserve Fill/Duotone for active, selected, or illustrative moments.

phosphor-iconsPhosphor IconsIconMITOpen resource IconOpen resource

Iconoir

Use when one icon system must cover Web, mobile, Figma/Framer prototypes, and lightweight SaaS UI; define the 24px container, 1.5 stroke, currentColor inheritance, and accessible names for icon-only controls before choosing the package.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Iconoir
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: For React, prefer per-icon imports from iconoir-react; for native Web, copy only the needed SVGs or load the CSS/icon font intentionally. Across React Native, Flutter, Vue, Swift, Figma, or Framer, record the exact package, version, 24px optical size, 1.5 stroke, and MIT notice.
Formats: SVG, React component, React Native component, Vue component
Caution: When mixing with Lucide, Feather, Tabler, or other 2px icon sets, normalize stroke, radius, caps, and container size.

iconoirIconoirIconMITOpen resource IconOpen resource

Bootstrap Icons

Use for Bootstrap ecosystems, documentation sites, admin tools, form helper icons, and projects needing a stable MIT SVG icon library.

LicenseMITCommercialCommercial OK

Resource: Bootstrap Icons
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install bootstrap-icons, then use individual SVGs, SVG sprite, icon font, or import paths according to bundle and accessibility needs.
Caution: When mixing with Lucide or Tabler, normalize filled/outline style, size, and visual weight.

bootstrap-iconsBootstrap IconsIconMITOpen resource IconOpen resource

MingCute Icons

Use for mobile, consumer tools, content products, and clean 24px/2px-stroke icon systems with outline and filled styles.

LicenseApache 2.0CommercialCommercial OK

Resource: MingCute Icons
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install mingcute_icon or @mingcute/react, or download selected SVG/PNG files; keep Apache 2.0 notices when redistributing bundled assets.
Caution: The project asks that the icon set itself not be sold; recheck terms before asset-pack redistribution.

mingcute-iconsMingCute IconsIconApache 2.0Open resource IconOpen resource

IconPark

Use for medium-to-large web/mobile products, admin tools, and marketing pages needing outline, filled, two-tone, and multi-color icon themes from one source.

LicenseApache 2.0CommercialCommercial OK

Resource: IconPark
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install @icon-park/react, @icon-park/vue-next, or @icon-park/svg; set theme, size, strokeWidth, lineJoin, lineCap, and fill tokens instead of hard-coding colors.
Caution: Multi-color icons can blur into illustration; limit them to empty states, feature entries, or marketing modules.

iconparkIconParkIconApache 2.0Open resource IconOpen resource

Font Awesome Free

Use for mature general symbols, social/ecommerce/file/status icons, ready React/Vue/JS integrations, and icon-font compatibility paths.

LicenseFont Awesome Free split licenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Font Awesome Free
License: Font Awesome Free split license
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Use only Free icons; install the exact @fortawesome free package or download the Free kit, preserving license and attribution comments in SVG/JS, font, and code files.
Formats: SVG, JS, WOFF2, TTF
Caution: Separate Free and Pro governance; do not treat Pro search results as Free assets.

font-awesome-freeFont Awesome FreeIconIcons: CC BY 4.0; Fonts: SIL OFL 1.1; Code: MITOpen resource IconOpen resource

Carbon Icons

Use for enterprise admin, IBM/Carbon-style products, data platforms, cloud consoles, and interfaces needing rigorous filled/outline system symbols.

LicenseApache License 2.0CommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Carbon Icons
License: Apache License 2.0
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Import named 16/20/24/32px icons from @carbon/icons-react; preserve Apache 2.0 license/notice when redistributing source or copied SVGs, and do not imply IBM endorsement.
Formats: SVG, React component, SVG, React component
Caution: Carbon/IBM association is strong, so unaffiliated products should avoid brand confusion.

carbon-iconsCarbon IconsIconApache 2.0Open resource IconOpen resource

Fluent UI System Icons

Use for Microsoft/Fluent-style products, desktop productivity tools, command bars, navigation, status indicators, and interfaces needing regular/filled themes.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Fluent UI System Icons
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Use @fluentui/react-icons, platform packages, or plain SVG; preserve the MIT notice and distinguish system icons from product launch and file icons.
Formats: SVG, React component, Flutter package, iOS
Caution: Microsoft/Fluent association is strong, so unaffiliated products must not imply endorsement.

fluent-system-iconsFluent UI System IconsIconMITOpen resource FontOpen resource

Noto Emoji

Use for consistent emoji font rendering, cross-platform emoji fallback, education/docs/community interfaces, and products needing standard Unicode emoji support.

LicenseSIL Open Font License 1.1CommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Noto Emoji
License: SIL Open Font License 1.1
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Prefer using it as an emoji font; if extracting SVG/PNG assets, keep the OFL license, version, and source, and do not sell the font or raw assets by themselves.
Formats: TTF, WOFF2, SVG, PNG
Caution: OFL primarily governs font software; extracted SVG/PNG asset use should still preserve license, version, and source.

noto-emojiNoto EmojiFontSIL Open Font License 1.1Open resource IconOpen resource

Game-icons.net

Use for game UI, achievement badges, skill trees, map symbols, tabletop tools, narrative products, and interaction prototypes needing strong symbolic icons.

LicenseCreative Commons Attribution 3.0 UnportedCommercialConditionalRiskMedium riskCreditVisible credit

Resource: Game-icons.net
License: Creative Commons Attribution 3.0 Unported
Commercial: Conditional
Risk: Medium risk
Credit: Visible credit
Get: When downloading a specific icon or archive, keep author, icon URL, CC BY 3.0 link, and visible credit; record CC0 subsets per item.
Formats: SVG, PNG, SVG, PNG
Caution: CC BY 3.0 requires attribution; do not treat it as attribution-free.

game-iconsGame-icons.netIconCreative Commons 3.0 BY, with some CC0 contributors notedOpen resource IllustrationOpen resource

Fluent Emoji

Use for friendly status hints, education content, lightweight illustration, empty states, and pages needing a Microsoft Fluent 3D/flat emoji tone.

LicenseMITCommercialCommercial OK

Resource: Fluent Emoji
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download selected SVG/PNG emoji assets, preserve MIT notice, and keep emoji use supportive rather than replacing status text.
Caution: Microsoft/Fluent association is visible, so unaffiliated products should avoid brand confusion.

fluent-emojiFluent EmojiIllustrationMITOpen resource TokenOpen resource

Open Props

Use as a token reference for color, shadow, easing, size, ratio, and media queries; do not replace the project design system wholesale.

LicenseMITCommercialCommercial OK

Resource: Open Props
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Import from npm or CDN, then map only selected props into project semantic tokens.
Caution: Map to semantic tokens; avoid scattering atomic props through components.

open-propsOpen PropsTokenMITOpen resource ColorOpen resource

Radix Colors

Use for UI theme scales, light/dark modes, border/background/text/interactive state colors, and product interfaces that need stable 12-step palettes.

LicenseMITCommercialCommercial OK

Resource: Radix Colors
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install @radix-ui/colors; import JS color objects or CSS variables and map them into local semantic tokens.
Caution: Do not expose step names directly to product components; map them to semantic tokens such as accent-bg, accent-text, border, and focus.

radix-colorsRadix ColorsColorMITOpen resource ComponentOpen resource

Radix Themes and Colors

Use for accessible React components, dialogs, menus, tabs, color scales, and semantic theme systems.

LicenseMITCommercialCommercial OK

Resource: Radix Themes and Colors
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use Radix primitives/themes for behavior, then map accentColor, grayColor, radius, and scaling into local CSS variables.
Caution: Theme props are not a full brand strategy; still define product semantics.

radix-ui-themesRadix Themes and ColorsComponentMITOpen resource ComponentOpen resource

Radix Primitives

Use as unstyled accessible primitives for dialogs, menus, popovers, tabs, accordions, radios, selects, and related interactions.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Radix Primitives
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install only the needed primitive package; when copying examples, keep MIT license notice and map behavior to local tokens, states, and accessible copy.
Formats: TS, TSX, React primitive, unstyled component behavior
Caution: You still own visuals, states, responsiveness, and product copy.

radix-primitivesRadix PrimitivesComponentMITOpen resource ComponentOpen resource

React Aria Components

Use as an accessible React behavior foundation for complex forms, date pickers, collections, overlays, internationalized input, and custom design systems.

LicenseApache 2.0CommercialCommercial OK

Resource: React Aria Components
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install react-aria-components or the lower-level react-aria/react-stately packages; style with local tokens rather than Spectrum branding.
Caution: Apache license covers code, not Adobe Spectrum brand assets.

react-aria-componentsReact Aria ComponentsComponentApache 2.0Open resource ComponentOpen resource

shadcn/ui

Use for copy-in source components, forms, tables, dialogs, and dashboard blocks in Next.js/Tailwind/Radix projects.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: shadcn/ui
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: After using the CLI to copy source components, the project owns maintenance; record component source, version/date, third-party block boundary, and local token changes.
Formats: TSX, CSS, React component source, Tailwind classes
Caution: After copying, the project owns upgrades and consistency maintenance.

shadcn-uishadcn/uiComponentMITOpen resource ComponentOpen resource

Headless UI

Use for unstyled accessible menus, dialogs, tabs, listboxes, and transitions in React or Vue with Tailwind-friendly styling.

LicenseMITCommercialCommercial OK

Resource: Headless UI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install @headlessui/react or @headlessui/vue; style with local Tailwind/CSS tokens.
Caution: Component scope is narrower than Radix.

headless-uiHeadless UIComponentMITOpen resource ComponentOpen resource

Shiki

When an agent needs high-quality syntax highlighting with less client runtime, use Shiki; still add the CodeExampleContract copy button, aria-live status, tab semantics, and long-line scrolling.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Shiki
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install shiki through npm and load languages/themes intentionally; keep the MIT notice. When using it for code examples, separately design copy, tabs, placeholders, security, and mobile scrolling contracts.
Formats: TS, JS, HTML, HAST
Caution: Language and theme loading strategy affects bundle/build cost.

shiki-syntax-highlighterShikiComponentMITOpen resource ComponentOpen resource

PrismJS

When an agent needs lightweight CSS-controlled browser highlighting, use Prism; also handle code.language-* semantics, copy buttons, live regions, local overflow, and no-JS fallback.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: PrismJS
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install Prism core, languages, and plugins through npm or CDN as needed; keep the MIT notice. In production, limit languages/plugins and add copy, tabs, fallback, and contrast verification.
Formats: JS, CSS, client-side highlighted HTML, CSS token classes
Caution: Client-side highlighting adds runtime and loading/hydration timing risk.

prismjsPrismJSComponentMITOpen resource ComponentOpen resource

Sandpack

Retrieve Sandpack only when an agent needs a live playground rather than a static code block; add loading/error/reset, static-code fallback, keyboard paths, mobile layout, iframe/CSP, and dependency governance.

LicenseApache License 2.0CommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Sandpack
License: Apache License 2.0
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install @codesandbox/sandpack-react or the client package; keep the Apache-2.0 notice. Use only when users truly need runnable/editable examples, and record iframe/CSP, dependencies, fallback, and performance boundaries.
Formats: TSX, JS, CSS, virtual files
Caution: Heavier than static code blocks and can affect first viewport and mobile performance.

sandpackSandpackComponentApache-2.0Open resource ComponentOpen resource

Swagger UI

Retrieve Swagger UI when an agent needs a standards-based interactive OpenAPI reference or a fast spec readability check; still apply the api-reference-endpoint-contract for try-it safety, status matrices, code copy, and mobile QA.

LicenseApache License 2.0CommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Swagger UI
License: Apache License 2.0
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install through swagger-ui, swagger-ui-react, or swagger-ui-dist and keep the Apache-2.0 license/NOTICE. For production API docs, audit try-it environment, auth injection, CORS/proxy, write confirmation, and theme accessibility.
Formats: OpenAPI, YAML, JSON, JS
Caution: Keep the Apache-2.0 NOTICE.

swagger-uiSwagger UIComponentApache-2.0Open resource ComponentOpen resource

Redoc

Retrieve Redoc when an agent needs a static, scannable, three-panel API reference rather than a full API client; still add status matrices, x-codeSamples, mobile collapse, and the code-copy contract.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Redoc
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Render OpenAPI/Swagger docs through the Redoc CLI, HTML script tag, or React component; keep the MIT notice. Redoc CE is not a try-it console by default, so interactive calling needs a separate playground or Redocly API Reference.
Formats: OpenAPI, YAML, JSON, HTML
Caution: Community Edition differs from hosted Redocly/API Reference and does not include a Try-it console by default.

redocRedocComponentMITOpen resource ComponentOpen resource

Scalar API Reference

Retrieve Scalar when an agent needs docs closer to an API client than a traditional static reference; still add ApiEndpointContract, try-it safety, auth placeholders, mobile schemas, and version-compatibility review.

LicenseMIT LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Scalar API Reference
License: MIT License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install @scalar/api-reference or framework packages for a modern API reference; keep the MIT notice. Before adoption, confirm framework versions, OpenAPI compatibility, client/try-it safety, theme tokens, and hosted/pro feature boundaries.
Formats: OpenAPI, YAML, JSON, HTML
Caution: The project evolves actively, so pin versions and regression-test API changes before production.

scalar-api-referenceScalar API ReferenceComponentMITOpen resource ComponentOpen resource

AI Elements

Retrieve AI Elements when an agent needs Sources, Inline Citation, Reasoning, or Message parts for AI/RAG answers; add the ai-response-citation-contract data model, streaming source states, permission filtering, and mobile QA.

LicenseApache License 2.0CommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: AI Elements
License: Apache License 2.0
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Copy source components through `npx ai-elements@latest add <component>` or the shadcn registry; keep the Apache-2.0 notice. After intake, components become local code and need local tokens, states, permissions, citation data contracts, and upgrade diff management.
Formats: TSX, React, Tailwind, shadcn registry
Caution: Requires AI SDK plus Next.js/shadcn/Tailwind assumptions, so assess migration cost outside that stack.

vercel-ai-elementsAI ElementsComponentApache-2.0Open resource ComponentOpen resource

assistant-ui

Retrieve assistant-ui when an agent needs full chat runtime, thread state, and AI SDK/LangGraph/custom backend integration; citations/source cards still need the ai-response-citation-contract data model and permission boundaries.

LicenseMIT LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: assistant-ui
License: MIT License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install through `npx assistant-ui@latest init` or packages such as @assistant-ui/react and @assistant-ui/react-ai-sdk; keep the MIT notice. Cloud/thread persistence/analytics are optional hosted capabilities and should be recorded separately from open-source components.
Formats: TSX, React, runtime provider, AI chat interface
Caution: Separate Cloud/hosted persistence from the open-source library.

assistant-uiComponentMITMIT LicenseOpen resource ComponentOpen resource

tool-ui

Retrieve tool-ui Citation when an agent tool result needs clickable reference cards, domain, favicon, snippet, or source attribution; also apply the ai-response-citation-contract for claim mapping, permissions, and copy/export.

LicenseMIT LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: tool-ui
License: MIT License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Copy specific components through the shadcn registry or tool-agent, e.g. `npx shadcn@latest add @tool-ui/citation`; keep the MIT notice. After copying, record the Zod schema, tool payload, receipt/interaction behavior, and local token changes.
Formats: TSX, Zod schema, shadcn registry, citation card
Caution: Components render tool payloads but do not automatically guarantee source truth.

assistant-ui-tool-uitool-uiComponentMITOpen resource TokenOpen resource

Apple HIG Materials and Liquid Glass

Retrieve this when an agent needs Liquid Glass-inspired, frosted nav, immersive toolbar, or Apple-like translucent material; pair it with translucent-material-readability and do not copy Apple proprietary assets or apply the effect to every card.

LicenseApple Developer AgreementCommercialConditionalRiskHigh riskCreditCheck per asset

Resource: Apple HIG Materials and Liquid Glass
License: Apple Developer Agreement
Commercial: Conditional
Risk: High risk
Credit: Check per asset
Get: Use Apple HIG Materials, Liquid Glass, and Design Resources as official platform guidance and inspiration; do not treat Apple UI kits, templates, product bezels, icons, or brand assets as open-source assets. Accept and follow the relevant Apple Design Resources license before downloading or using them.
Formats: HIG guidance, Figma/Sketch UI kits under Apple terms, platform design resources, material guidance
Caution: Apple resources and brand assets are not open-source; UI kits, templates, bezels, icons, SF Symbols, and trademarks require separate Apple terms.

apple-hig-liquid-glassApple HIG Materials and Liquid GlassTokenApple Developer Agreement / Apple Design Resources terms; guidance and assets are not open-sourceOpen resource AccessibilityOpen resource

MDN backdrop-filter reference

Retrieve MDN when an agent writes `backdrop-filter`, blurred glass, or transparent overlay CSS; also apply translucent-material-readability for reduced transparency, forced colors, contrast, and performance QA.

LicenseCC-BY-SA-2.5+ documentation / CC0 or MIT code samplesCommercialConditionalRiskMedium riskCreditVisible credit

Resource: MDN backdrop-filter reference
License: CC-BY-SA-2.5+ documentation / CC0 or MIT code samples
Commercial: Conditional
Risk: Medium risk
Credit: Visible credit
Get: Use as a CSS `backdrop-filter` implementation reference; if reusing MDN prose, attribute under CC-BY-SA and respect share-alike. If reusing code samples, follow MDN's CC0/MIT sample guidance. Prefer writing project-specific CSS instead of copying long documentation.
Formats: HTML documentation, CSS reference, compatibility data, CSS implementation notes
Caution: MDN documentation is not MIT; copied prose needs attribution and share-alike.

mdn-backdrop-filterMDN backdrop-filter referenceAccessibilityDocumentation CC-BY-SA 2.5 or later; code samples CC0 or MIT depending revisionOpen resource ComponentOpen resource

Material Web

Use when a product needs Material 3 Web Components, framework-agnostic custom elements, form controls, navigation, pickers, and a clear Google/Android tone.

LicenseApache-2.0CommercialCommercial OK

Resource: Material Web
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install @material/web; import only needed components for production, or @material/web/all.js for prototypes, then map Material 3 theme tokens.
Caution: The official repository notes MWC is in maintenance mode pending new maintainers, so confirm maintenance risk before production use.

material-webMaterial WebComponentApache-2.0Open resource ComponentOpen resource

Fluent UI React

Use for Microsoft-ecosystem products, enterprise productivity tools, admin surfaces, Office/Teams-like interfaces, or mature React component needs.

LicenseMIT for code; referenced fonts/icons use separate Microsoft assets licenseCommercialConditional

Resource: Fluent UI React
License: MIT for code; referenced fonts/icons use separate Microsoft assets license
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: npm install @fluentui/react-components; import v9 components directly and configure FluentProvider with local theme tokens.
Caution: The code is MIT, but referenced fonts and icons use a separate Microsoft assets license; do not treat brand assets as generic MIT resources.

fluent-ui-reactFluent UI ReactComponentMIT for code; referenced fonts/icons use separate Microsoft assets licenseOpen resource ComponentOpen resource

Carbon Design System

Use for enterprise SaaS, dense admin tools, AI/IBM-like product surfaces, complex tables, forms, and workflow-heavy management interfaces.

LicenseApache-2.0CommercialCommercial OK

Resource: Carbon Design System
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use @carbon/react or @carbon/web-components with @carbon/styles and Carbon element tokens; choose React or Web Components by stack.
Caution: IBM's visual voice is strong; non-IBM products should abstract principles instead of copying brand expression.

carbon-design-systemCarbon Design SystemComponentApache-2.0Open resource ComponentOpen resource

Spectrum Web Components

Use for creative tools, editors, media managers, design/content production products, and framework-agnostic Web Components with an Adobe Spectrum tone.

LicenseApache-2.0CommercialCommercial OK

Resource: Spectrum Web Components
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install selected @spectrum-web-components packages plus @spectrum-web-components/theme; avoid the full bundle in production.
Caution: Docs note the full bundle includes every element and is not recommended for production; import by component.

spectrum-web-componentsSpectrum Web ComponentsComponentApache-2.0Open resource AccessibilityOpen resource

WAI-ARIA Authoring Practices Guide

When an agent cannot use primitives such as Radix or React Aria, or needs to audit a custom component, use APG to extract roles/states/properties, keyboard tables, focus movement, aria-activedescendant/roving tabindex, and test assertions.

LicenseW3C Software and Document LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: WAI-ARIA Authoring Practices Guide
License: W3C Software and Document License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Use as an authoritative pattern reference; when copying example code or prose, keep W3C license notice, source URI, and modification notes, and do not use W3C/WAI names as product endorsement.
Formats: HTML, CSS, JavaScript, Markdown
Caution: APG is a pattern guide, not a complete design system or ready-made React component library.

wai-aria-apgWAI-ARIA Authoring Practices GuideAccessibilityW3C Software and Document License 2023Open resource AccessibilityOpen resource

axe-core

Use as an automated web UI accessibility rules engine for component, page, and CI-level WCAG screening.

LicenseMPL 2.0CommercialCommercial OK

Resource: axe-core
License: MPL 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install axe-core; integrate with Playwright, Jest, Cypress, or Storybook and keep manual review for incomplete results.
Caution: Automated results cannot prove full accessibility; keyboard, screen-reader, and task-flow review still matter.

axe-coreAccessibilityMPL 2.0a11y testingOpen resource AccessibilityOpen resource

Pa11y

Use for command-line accessibility smoke tests against public URLs, local preview pages, and critical flows.

LicenseLGPL-3.0-onlyCommercialConditional

Resource: Pa11y
License: LGPL-3.0-only
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: npm install -D pa11y; run pa11y against local URLs in CI, noting that Pa11y 9 requires Node 20, 22, or 24.
Caution: LGPL license and runtime distribution should be checked against project policy.

pa11yPa11yAccessibilityLGPL-3.0-onlyOpen resource AccessibilityOpen resource

Lighthouse Accessibility

Use for page-level audits that combine accessibility, performance, best practices, and SEO before release.

LicenseApache 2.0CommercialCommercial OK

Resource: Lighthouse Accessibility
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install -D lighthouse; run with --only-categories=accessibility or through Lighthouse CI for page-level audits.
Caution: A score is not full quality proof and does not cover every WCAG requirement or assistive-technology experience.

lighthouse-accessibilityLighthouse AccessibilityAccessibilityApache 2.0Open resource AccessibilityOpen resource

Accessibility Insights for Web

When an agent has a runnable page and needs human-assisted evidence for keyboard paths, focus order, accessible names, structure, and WCAG 2.2 AA assessment, use Accessibility Insights to produce FastPass/Assessment evidence and convert findings into triage records.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Accessibility Insights for Web
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install the extension through Chrome Web Store or Microsoft Edge Add-ons; if copying or modifying repository code, retain the MIT copyright/license notice and respect Microsoft trademark boundaries. Audit records should preserve URL, viewport, page state, tool version, and report link.
Formats: Chrome extension, Edge add-on, TypeScript source, FastPass report
Caution: Extension results should record page, viewport, state, version, auth/data conditions, and report link.

accessibility-insights-webAccessibility Insights for WebAccessibilityMITOpen resource AccessibilityOpen resource

Storybook Accessibility Addon

Use to bring axe-core checks into Storybook during component development and catch missing labels, contrast, and ARIA issues early.

LicenseMIT addon; axe-core dependency is MPL 2.0CommercialConditional

Resource: Storybook Accessibility Addon
License: MIT addon; axe-core dependency is MPL 2.0
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: npx storybook add @storybook/addon-a11y; review violations in component stories and keep manual checks for keyboard and screen-reader behavior.
Caution: Record both addon and axe-core dependency licenses.

storybook-addon-a11yStorybook Accessibility AddonAccessibilityMIT addon; axe-core dependency is MPL 2.0Open resource AccessibilityOpen resource

WAVE by WebAIM

Use for human-assisted audits of real pages, quickly reviewing errors, alerts, structure, contrast, and ARIA signals.

LicenseFree web and extension use; API and report redistribution require WebAIM terms reviewCommercialConditional

Resource: WAVE by WebAIM
License: Free web and extension use; API and report redistribution require WebAIM terms review
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use the WAVE web service or browser extension for human-assisted page evaluation; check terms before API use or report redistribution.
Caution: WAVE supports human evaluation and is not an automatic pass/fail judge.

wave-webaimWAVE by WebAIMAccessibilityFree web and extension use; API and report redistribution require WebAIM terms reviewOpen resource TokenOpen resource

Leonardo

Use for target-contrast-based accessible color scales, dark mode, theme colors, and data/status color tokens.

LicenseApache 2.0CommercialCommercial OK

Resource: Leonardo
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use the web app for palette exploration or @adobe/leonardo-contrast-colors for code-generated contrast palettes.
Caution: Generated scales still need semantic token naming.

leonardo-colorLeonardoTokenApache 2.0Open resource ColorOpen resource

Color.js

Use for frontend projects that need CSS Color 4, OKLCH, P3 conversion, gamut mapping, color-difference calculations, and design-token build scripts.

LicenseMITCommercialCommercial OK

Resource: Color.js
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install colorjs.io; use for color conversion, gamut mapping, DeltaE, OKLCH/P3 workflows, and token build steps.
Caution: Color-science capability is deep, so agents should constrain scope.

colorjsColor.jsColorMITOpen resource ColorOpen resource

Culori

Use for programmatic color scales, interpolation, color difference, palette tools, chart palettes, and theme-build scripts that prefer a functional API.

LicenseMITCommercialCommercial OK

Resource: Culori
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install culori; use parse, converter, interpolate, formatCss, difference*, and clamp/gamut utilities in token tooling.
Caution: The library handles color math, not semantic tokens, accessible copy, or component state.

culoriCuloriColorMITOpen resource ColorOpen resource

Material Theme Builder

Use to explore Material 3 dynamic color, brand harmonization, light/dark roles, surface tokens, and designer-to-developer theme handoff.

LicenseApache 2.0CommercialCommercial OK

Resource: Material Theme Builder
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use the web/Figma builder to explore dynamic color and export theme code, then map Material roles into local product tokens.
Caution: Do not paste Material roles wholesale into non-Material products; translate them into local semantic tokens.

material-theme-builderMaterial Theme BuilderColorApache 2.0Open resource ColorOpen resource

Material Color Utilities

Use in code for Material You/HCT tonal palettes, dynamic themes, contrast adjustment, image color extraction, and cross-platform theme consistency.

LicenseApache 2.0CommercialCommercial OK

Resource: Material Color Utilities
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use the TypeScript package or platform-specific libraries when you need Material HCT palettes and dynamic color schemes in code.
Caution: HCT and Material theming logic fits Material contexts; other systems should abstract it.

material-color-utilitiesMaterial Color UtilitiesColorApache 2.0Open resource ComponentOpen resource

GOV.UK Frontend

Use for public services, application flows, eligibility checks, error recovery, task lists, check-answers pages, and high-trust forms.

LicenseMIT for code; documentation/content under Open Government Licence unless otherwise statedCommercialConditional

Resource: GOV.UK Frontend
License: MIT for code; documentation/content under Open Government Licence unless otherwise stated
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: npm install govuk-frontend; import Sass/CSS and JavaScript enhancements, then adapt only when your service can preserve accessibility behavior.
Caution: Do not copy GOV.UK branding or government marks.

govuk-frontendGOV.UK FrontendComponentMIT for code; documentation/content under Open Government Licence unless otherwise statedOpen resource ComponentOpen resource

NHS.UK Frontend

When an agent designs healthcare or public-sector form recovery, use NHS guidance for the Error title prefix, top error summary, inline field errors, focus movement, matching messages, and preserving entered values; do not copy NHS branding.

LicenseMIT + Open Government Licence 3.0 documentationCommercialConditionalRiskMedium riskCreditKeep license notice

Resource: NHS.UK Frontend
License: MIT + Open Government Licence 3.0 documentation
Commercial: Conditional
Risk: Medium risk
Credit: Keep license notice
Get: Install through npm or copy required Sass/CSS/JS from the official repository; record MIT code, OGL 3.0 docs, NHS brand/logo boundaries, and WCAG retesting after adaptation.
Formats: SCSS, CSS, JavaScript, Nunjucks
Caution: NHS visuals, name, marks, and service context carry strong brand/trademark boundaries; non-NHS products should abstract patterns only.

nhsuk-frontendNHS.UK FrontendComponentMIT for code and sample code unless stated otherwise; documentation under Open Government Licence 3.0Open resource ComponentOpen resource

U.S. Web Design System

Use for U.S. public services, federal-style information sites, forms, navigation, alerts, identity flows, and data portals.

LicenseMostly public domain/CC0 with listed Apache 2.0, SIL OFL, MIT, and trademark exceptionsCommercialConditional

Resource: U.S. Web Design System
License: Mostly public domain/CC0 with listed Apache 2.0, SIL OFL, MIT, and trademark exceptions
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: npm install @uswds/uswds; configure Sass theme settings and import only needed assets and components.
Caution: The project includes multiple licenses and trademark exceptions, so do not treat everything as CC0.

uswdsU.S. Web Design SystemComponentMostly public domain/CC0 with listed Apache 2.0, SIL OFL, MIT, and trademark exceptionsOpen resource Data VisualizationOpen resource

D3

Use for highly custom SVG, Canvas, or HTML data visualization, editorial graphics, complex interaction, and relationships that no standard chart component expresses well.

LicenseISCCommercialCommercial OK

Resource: D3
License: ISC
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install d3; import only needed modules such as d3-scale, d3-shape, d3-array, d3-axis, or d3-selection.
Caution: Not an out-of-the-box charting library; agents own accessibility, responsiveness, data cleaning, and legends.

d3D3Data VisualizationISCOpen resource Data VisualizationOpen resource

Observable Plot

Use for fast tabular-data exploration, lightweight dashboard charts, layered marks, and cases that need more expressiveness than Chart.js but faster delivery than D3.

LicenseISCCommercialCommercial OK

Resource: Observable Plot
License: ISC
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install @observablehq/plot; render Plot.plot(...) into a container and pair charts with summaries/tables.
Caution: Complex product interactions and custom layouts may still need D3 or ECharts.

observable-plotObservable PlotData VisualizationISCOpen resource Data VisualizationOpen resource

Vega-Lite

Use for declarative, versionable charts where agents can output JSON specs, especially analytical reports, reproducible graphics, and low-code chart generation.

LicenseBSD 3-ClauseCommercialCommercial OK

Resource: Vega-Lite
License: BSD 3-Clause
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use vega-lite specifications with vega-embed, or generate JSON specs that can be audited and versioned.
Caution: Runtime and embed dependencies must be explicit.

vega-liteVega-LiteData VisualizationBSD 3-ClauseOpen resource Data VisualizationOpen resource

Apache ECharts

Use for interactive dashboards, large data, maps, finance/operations monitoring, linked charts, and product interfaces that need many built-in chart types.

LicenseApache 2.0CommercialCommercial OK

Resource: Apache ECharts
License: Apache 2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install echarts; prefer tree-shaken imports and choose SVG or Canvas renderer based on data size and accessibility plan.
Caution: Configuration can become complex, so agents should constrain option scope.

apache-echartsApache EChartsData VisualizationApache 2.0Open resource Data VisualizationOpen resource

Chart.js

Use for common product charts, simple dashboards, small trend/bar/pie charts, and cases that need quick Canvas chart integration.

LicenseMITCommercialCommercial OK

Resource: Chart.js
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install chart.js; register only required controllers/elements/scales and provide accessible canvas labelling/fallback content.
Caution: Canvas content is not screen-reader accessible by default; add ARIA, fallback text, or nearby data tables.

chartjsChart.jsData VisualizationMITOpen resource Data VisualizationOpen resource

Recharts

Use for React product pages, SaaS dashboards, trend cards, business metrics, simple composed charts, and componentized SVG chart needs.

LicenseMITCommercialCommercial OK

Resource: Recharts
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install recharts; compose SVG chart components in React and pair every chart with a takeaway title, source, and data-table fallback.
Caution: Chart choice, responsiveness, keyboard tooltip, data-table alternatives, and accessible summaries remain project-owned.

rechartsRechartsData VisualizationMITOpen resource Data VisualizationOpen resource

MapLibre GL JS

Use for vector-tile maps, logistics/city/environment/operations geospatial UI, zoomable map views, and products avoiding proprietary Mapbox runtime licensing.

LicenseBSD 3-ClauseCommercialCommercial OK

Resource: MapLibre GL JS
License: BSD 3-Clause
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install maplibre-gl; pair the runtime with separately licensed tiles, styles, glyphs, sprites, and geodata attribution.
Caution: Code license does not cover tiles, styles, glyphs, sprites, geodata, or provider attribution.

maplibre-gl-jsMapLibre GL JSData VisualizationBSD 3-ClauseOpen resource Data VisualizationOpen resource

FT Visual Vocabulary

Use as a chart-selection reference for design review and agent reasoning: comparison, change, distribution, relationship, composition, geography, flow, or ranking.

LicenseCheck repository/content license before redistributionCommercialConditional

Resource: FT Visual Vocabulary
License: Check repository/content license before redistribution
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use as a chart-selection reference; do not redistribute posters or FT-branded assets without checking rights.
Caution: It is a selection reference, not a brand visual system to copy.

ft-visual-vocabularyFT Visual VocabularyData VisualizationCheck repository/content license before redistributionOpen resource PatternOpen resource

Pattern Monster

Use for low-contrast background texture, packaging-like sections, empty states, and brand illustration backplates.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Pattern Monster
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Export SVG/CSS/PNG from the exact pattern; record pattern name, foreground/background colors, stroke/angle settings, source URL, and MIT notice.
Formats: SVG, PNG, CSS, inline SVG
Caution: Keep texture low contrast so body copy remains readable.

pattern-monsterPattern MonsterPatternMITOpen resource PatternOpen resource

PatternFills

Use for D3/chart texture fills, color-blind-friendly differentiation, lightweight backgrounds, and print-friendly alternate encoding.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: PatternFills
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Before copying SVG pattern defs or CSS backgrounds, record pattern name, source, MIT notice, and the non-color encoding role for chart/print use.
Formats: SVG, CSS, SVG pattern defs, CSS background-image
Caution: Default visuals are basic; tune contrast or redraw to fit product style.

patternfillsPatternFillsPatternMITOpen resource PatternOpen resource

GeoPattern

Use for deterministic cover art, project placeholders, resource-card backgrounds, avatar backplates, lightweight geometric texture, and visuals reproducible from a text seed.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: GeoPattern
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Generate a static SVG/data URL from a seed and self-host it; record seed, base color, pattern type, opacity, generator/version, and MIT notice.
Formats: SVG, SVG, data URL, CSS background-image
Caution: The project is older; generate static SVG and self-host it instead of depending on the runtime library in production.

geopatternGeoPatternPatternMITOpen resource PatternOpen resource

Hero Patterns

Use for marketing sections, brand bands, empty-state backplates, and repeatable SVG backgrounds with tunable color and opacity.

LicenseCreative Commons Attribution 4.0 InternationalCommercialConditionalRiskMedium riskCreditVisible credit

Resource: Hero Patterns
License: Creative Commons Attribution 4.0 International
Commercial: Conditional
Risk: Medium risk
Credit: Visible credit
Get: Before copying CSS/SVG, record pattern name, author, source URL, CC BY 4.0 link, color/opacity changes, and attribution location.
Formats: SVG, CSS, inline SVG, background-image CSS
Caution: Attribution and license links must be preserved.

hero-patternsHero PatternsPatternCC BY 4.0Open resource PatternOpen resource

CSS Pattern

Use for pure-CSS backgrounds, grid texture, lightweight geometric surfaces, and image-free experimental UI surfaces.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: CSS Pattern
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Copy the exact CSS gradient pattern; replace color, size, and opacity with local semantic variables, and preserve Temani Afif / MIT notice.
Formats: CSS, CSS background-image, CSS custom properties
Caution: Complex gradients can make CSS hard to maintain; wrap them as tokens or utilities.

css-patternCSS PatternPatternMITOpen resource PatternOpen resource

pattern.css

Use for reusable CSS pattern classes such as checks, dots, grids, stripes, and zigzags in admin, docs, empty states, and chart-adjacent encoding.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: pattern.css
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Prefer the npm package or copy only needed SCSS/CSS classes; record class names, color variables, version, MIT notice, and avoid shipping unused patterns.
Formats: CSS, SCSS, CSS utility classes, background pattern classes
Caution: Default class names may not match local naming conventions; wrap them in local utilities.

pattern-csspattern.cssPatternMITOpen resource PatternOpen resource

fffuel SVG Generators

Use for generated brand backgrounds, noise textures, isometric patterns, line fields, waves, grainy gradients, and lightweight decorative SVG.

Licensefffuel custom image licenseCommercialConditionalRiskMedium riskCreditCredit recommended

Resource: fffuel SVG Generators
License: fffuel custom image license
Commercial: Conditional
Risk: Medium risk
Credit: Credit recommended
Get: Generate and download the exact SVG/PNG, then self-host it; record generator name, settings, colors, export format, and fffuel custom license. Do not resell, share, or redistribute generated images as an asset pack.
Formats: SVG, PNG, SVG, PNG
Caution: Custom license blocks sublicensing, resale, sharing, transfer, or redistribution of the images themselves.

fffuel-svg-generatorsfffuel SVG GeneratorsPatternFree custom image license for generated/downloaded images; no sublicensing or redistributionOpen resource PatternOpen resource

SVGBackgrounds.com

Use for copy-paste SVG/CSS backgrounds, patterns, doodles, triangles, and lightweight animated graphics in marketing pages, portfolio pages, and content sections.

LicenseSVGBackgrounds.com License AgreementCommercialConditionalRiskMedium riskCreditCheck per asset

Resource: SVGBackgrounds.com
License: SVGBackgrounds.com License Agreement
Commercial: Conditional
Risk: Medium risk
Credit: Check per asset
Get: Before copying or downloading a specific SVG/CSS graphic, record graphic name, free/pro status, license URL, attribution requirement, subscription status, project use, and whether it can be used in future projects.
Formats: SVG, CSS, inline SVG, CSS background
Caution: The license restricts using a graphic on its own as the primary complete design element.

svgbackgrounds-comSVGBackgrounds.comPatternSVGBackgrounds.com License Agreement; commercial project use with attribution/subscription and redistribution restrictionsOpen resource MotionOpen resource

Vanta.js

Use for short-lived brand pages, portfolio heroes, campaign pages, and parameterized WebGL/p5.js animated backgrounds.

LicenseMIT LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Vanta.js
License: MIT License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install/import Vanta and three.js or p5.js per selected effect; record effect, parameters, runtime dependency, reduced-motion static fallback, destroy cleanup, and MIT notice.
Formats: JavaScript, Canvas, WebGL, runtime canvas background
Caution: Animated backgrounds need a `prefers-reduced-motion` static fallback and text safe-area checks.

vanta-jsVanta.jsMotionMITOpen resource MotionOpen resource

tsParticles

Use for particles, confetti, fireworks, ribbons, lightweight interactive backgrounds, and motion backgrounds across React, Vue, Svelte, Solid, and Web Components.

LicenseMIT LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: tsParticles
License: MIT License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install slim/basic/React/Vue packages as needed; record preset/config, particle count, interaction trigger, pause control, reduced-motion strategy, dependency versions, and MIT notice.
Formats: JavaScript, TypeScript, Canvas, runtime canvas particles
Caution: Particle backgrounds easily become attention noise, so avoid them by default in admin tools, long docs, and forms.

tsparticlestsParticlesMotionMITOpen resource PatternOpen resource

css-doodle

Use for generative CSS patterns, dynamic backgrounds, creative loading states, brand experiments, and visual prototypes needing parameterized grid texture.

LicenseMIT LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: css-doodle
License: MIT License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Use the runtime for experiments; in production pin seeds/rules, limit grid and animation, export or recreate static SVG/PNG/CSS when possible, and preserve the MIT notice.
Formats: JavaScript, CSS, Web Component, DOM/CSS pattern
Caution: Runtime custom elements have SSR, hydration, and performance boundaries.

css-doodlePatternMITMIT LicenseOpen resource PatternOpen resource

ambientCG

Use for paper, fabric, stone, metal, noise, and PBR material textures in premium brand pages, 3D scenes, tactile surfaces, and poster-like heroes.

LicenseCreative Commons CC0 1.0 UniversalCommercialCommercial OKRiskLow riskCreditNo credit required

Resource: ambientCG
License: Creative Commons CC0 1.0 Universal
Commercial: Commercial OK
Risk: Low risk
Credit: No credit required
Get: Download only needed resolutions and texture maps from the exact material page; downsample to AVIF/WebP for UI and record asset id, resolution, and derivatives.
Formats: JPG, PNG, EXR, blend
Caution: Raw PBR maps are heavy and must be downsampled and compressed for UI.

ambientcgambientCGPatternCC0 1.0Open resource 3DOpen resource

Poly Haven

Use for high-quality HDRIs, PBR materials, real texture, product hero 3D scenes, and Three.js or Blender prototypes.

LicenseCC0 1.0CommercialCommercial OK

Resource: Poly Haven
License: CC0 1.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download selected HDRIs, textures, or models; convert/compress models to glTF/GLB and UI backgrounds to optimized AVIF/WebP derivatives before shipping.
Caution: Original files are heavy; frontend must plan size, texture budgets, draco/meshopt, lazy loading, and low-end fallbacks.

poly-havenPoly Haven3DCC0 1.0Open resource 3DOpen resource

Kenney Assets

Use for games, interactive demos, lightweight 3D prototypes, UI packs, icon-like scene props, and low-risk commercial placeholders.

LicenseCreative Commons CC0CommercialCommercial OK

Resource: Kenney Assets
License: Creative Commons CC0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download the exact asset pack, keep the included license file, and export only the needed sprites, UI pieces, textures, or 3D files into the project.
Caution: Kenney's logo is reserved for official projects and should not imply endorsement.

kenney-assetsKenney Assets3DCreative Commons CC0Open resource 3DOpen resource

Khronos glTF Sample Assets

Use for validating Three.js, Babylon, glTF loaders, PBR, transmission, animation, variants, Draco, Meshopt, and related format features.

LicenseVaries by model, commonly CC BY 4.0 or other listed licensesCommercialCheck per set

Resource: Khronos glTF Sample Assets
License: Varies by model, commonly CC BY 4.0 or other listed licenses
Commercial: Check per set
Risk: Unmarked
Credit: Unmarked
Get: Use for testing loaders and material features; read each model's credit/license before including it in a product or screenshot.
Caution: Not a single CC0 asset library; each model has its own license and attribution requirements.

gltf-sample-assetsKhronos glTF Sample Assets3DVaries by model, commonly CC BY 4.0 or other listed licensesOpen resource 3DOpen resource

3Dicons

Use for lightweight 3D empty states, feature icons, social posts, product hero accents, presentations, and quick prototypes needing a friendly 3D tone.

LicenseCC0 1.0CommercialCommercial OK

Resource: 3Dicons
License: CC0 1.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download selected PNG/3D source assets, optimize to WebP/AVIF or GLB as needed, and record style, angle, and collection before using in a hero or empty state.
Caution: The 3D icon style is recognizable, so customize key brand visuals.

3dicons3Dicons3DCC0 1.0Open resource IllustrationOpen resource

Open Doodles

Use for casual hand-drawn onboarding, empty states, community pages, and educational explainers.

LicenseCC0 1.0CommercialCommercial OK

Resource: Open Doodles
License: CC0 1.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download SVG/PNG/GIF assets and recolor or compose them as lightweight illustration accents.
Caution: Strong hand-drawn tone; not ideal for serious finance, healthcare, or security-critical pages.

open-doodlesOpen DoodlesIllustrationCC0 1.0Open resource IllustrationOpen resource

IRA Design Illustrations

Use for onboarding, empty states, product explainers, team/collaboration scenes, lightweight marketing, and interfaces needing composable hand-drawn people or objects.

LicenseMITCommercialCommercial OK

Resource: IRA Design Illustrations
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download selected SVG, PNG, or AI assets; customize gradients and colors, then export only the composed scenes needed by the product.
Caution: Pair illustration with title, reason, and primary action; do not fill empty states with people art alone.

ira-designIRA Design IllustrationsIllustrationMITOpen resource IllustrationOpen resource

Open Peeps

Use for avatars, teams, community, people scenes, lightweight marketing, and onboarding illustration.

LicenseCC0 1.0CommercialCommercial OK

Resource: Open Peeps
License: CC0 1.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download or compose people illustrations, then export only the needed SVG/PNG assets.
Caution: Recognizable style; customize for important brand pages.

open-peepsOpen PeepsIllustrationCC0 1.0Open resource IllustrationOpen resource

Humaaans

Use for onboarding, team/community scenes, people-led empty states, storyboards, and product explainers needing composable people illustrations.

LicenseCC0 1.0CommercialCommercial OK

Resource: Humaaans
License: CC0 1.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download the design library or selected SVG/PNG exports, compose only needed people scenes, and record source plus any local color/customization notes.
Caution: The style is highly recognizable, so important brand pages should customize or redraw it.

humaaansHumaaansIllustrationCC0 1.0Open resource IllustrationOpen resource

unDraw

Use for quick empty-state, explainer, and onboarding illustrations, while noting it is not OSI open source.

LicenseFree custom content license, not OSI open sourceCommercialConditional

Resource: unDraw
License: Free custom content license, not OSI open source
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Download SVG from unDraw and customize the accent color; do not redistribute the collection as a pack.
Caution: License restricts compiling or redistributing as a competing collection.

undrawunDrawIllustrationFree custom content license, not OSI open sourceOpen resource MotionOpen resource

LottieFiles Public Animations

Use for loading, success, empty-state, and lightweight explainer motion; check the exact file and license terms.

LicenseLottie Simple LicenseCommercialConditionalRiskMedium riskCreditCredit recommended

Resource: LottieFiles Public Animations
License: Lottie Simple License
Commercial: Conditional
Risk: Medium risk
Credit: Credit recommended
Get: Before downloading a public animation, record creator, animation URL, license, file format, and whether it comes from marketplace/paid resources; provide a reduced-motion alternative.
Formats: JSON, dotLottie, SVG renderer, canvas renderer
Caution: Popular animations are overused.

lottiefiles-publicLottieFiles Public AnimationsMotionLottie Simple License for public animation filesOpen resource MotionOpen resource

Coverr Stock Video

When an agent needs a website hero background video, return the exact Coverr video page, credit/license judgment, release risk, poster, compression formats, pause control, and reduced-motion fallback instead of embedding a large MP4 directly.

LicenseCoverr LicenseCommercialConditionalRiskMedium riskCreditVisible credit

Resource: Coverr Stock Video
License: Coverr License
Commercial: Conditional
Risk: Medium risk
Credit: Visible credit
Get: Download from the exact video page and record video URL, creator/Coverr, license, free or Coverr+ status, credit placement, MP4/4K, poster, crop/color edits, and people/brand/property release risk; do not use for AI training, datasets, or competing services.
Formats: MP4, MP4, WebM derivative, poster image
Caution: The current license page says free downloads require credit; despite looser FAQ copy, intake should treat free downloads as credit-required.

coverr-stock-videoCoverr Stock VideoMotionCoverr custom stock video and music licenseOpen resource MotionOpen resource

Mixkit Stock Video

When an agent searches stock video, it must first identify whether a Mixkit item uses the Free or Restricted License; Free can enter commercial candidates, Restricted stays personal/non-commercial.

LicenseMixkit Stock Video Free/Restricted LicenseCommercialCheck per setRiskNeeds reviewCreditCheck per asset

Resource: Mixkit Stock Video
License: Mixkit Stock Video Free/Restricted License
Commercial: Check per set
Risk: Needs review
Credit: Check per asset
Get: Download only from the exact video page and record whether it uses the Free or Restricted License, creator/URL, dimensions, no-watermark status, whether it is an Envato Elements promotion, people/trademark/third-party component risk, and no-aggregation/resale limits.
Formats: MP4, MP4, WebM derivative, poster image
Caution: Mixkit has both Free and Restricted stock-video licenses, so commercial use cannot be assumed at platform level.

mixkit-stock-videoMixkit Stock VideoMotionMixkit Stock Video Free or Restricted License; check each itemOpen resource MotionOpen resource

Motion

Use for React/JS/Vue component-level layout, exit, gesture, shared-layout, hover/tap/drag, and small product micro-interactions.

LicenseMITCommercialCommercial OK

Resource: Motion
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install motion; use motion/react for React, motion for vanilla JavaScript, and useReducedMotion or MotionConfig for reduced-motion paths.
Caution: Complex timelines, SVG morphing, or advanced scroll choreography may still fit GSAP better.

motion-devMotionMITMotion.devOpen resource MotionOpen resource

GSAP

Use for complex timelines, ScrollTrigger, SVG/DOM choreography, draggable/gesture interactions, plugin-heavy motion, and cross-framework control.

LicenseGSAP Standard No Charge License, custom termsCommercialConditional

Resource: GSAP
License: GSAP Standard No Charge License, custom terms
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: npm install gsap @gsap/react; register plugins once, use gsap.matchMedia for responsive and reduced-motion branches, and preserve proprietary notices.
Caution: Not MIT/OSI open-source; check GSAP standard license and prohibited uses.

gsapGSAPMotionGSAP Standard No Charge License, custom termsOpen resource MotionOpen resource

Lenis

Use when a page truly needs scroll storytelling, WebGL sync, parallax, or immersive brand flow; keep native scroll for ordinary tools.

LicenseMITCommercialCommercial OK

Resource: Lenis
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install lenis; import lenis/dist/lenis.css when using React/Vue wrappers and test anchors, sticky, keyboard, focus, and reduced-motion behavior.
Caution: Smooth scroll changes native feel; test keyboard, anchors, browser back, touch, and scroll containers.

lenisLenisMotionMITOpen resource MotionOpen resource

Scrollama

Use for lightweight scrollytelling in journalism, data stories, product explainers, and education pages where chapter enter/exit controls visual state.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Scrollama
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install scrollama from npm and preserve the MIT license notice; use CSS position: sticky for sticky graphics, recording version-specific deprecated APIs and IntersectionObserver/polyfill boundaries.
Formats: JavaScript, TypeScript types, step trigger, step progress
Caution: Not a complex animation timeline tool; GSAP ScrollTrigger still fits heavy pin/scrub choreography better.

scrollamaScrollamaMotionMITOpen resource MotionOpen resource

Anime.js

Use for lightweight framework-agnostic DOM/SVG/object tweens, easing, stagger, draggable, or standalone demo motion.

LicenseMITCommercialCommercial OK

Resource: Anime.js
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install animejs; use for focused DOM/SVG/object tweens and clean up timelines in component lifecycles.
Caution: React/Next code must manage refs, lifecycle, and cleanup manually.

animejsAnime.jsMotionMITOpen resource MotionOpen resource

CSS Scroll-driven Animations

Use for reading progress, local reveals, lightweight parallax, and scroll-linked motion prototypes that do not need a JS timeline.

LicenseWeb platform feature; documentation/license follows source docsCommercialCommercial OK

Resource: CSS Scroll-driven Animations
License: Web platform feature; documentation/license follows source docs
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use animation-timeline, scroll(), view(), and @supports checks; provide JS/CSS fallback for browsers where the feature is not Baseline.
Caution: Some properties are not Baseline yet, so check compatibility and provide fallbacks.

css-scroll-driven-animationsCSS Scroll-driven AnimationsMotionWeb platform feature; documentation/license follows source docsOpen resource MotionOpen resource

lottie-web

Use as a Lottie JSON player for loading, empty states, success feedback, and lightweight explainer motion.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: lottie-web
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Record lottie-web only as the player/runtime; animation JSON, illustration, audio, and brand assets need separate source licenses.
Formats: JS, SVG renderer, canvas renderer, HTML renderer
Caution: Player license is not the animation asset license.

lottie-webMotionMITMIT LicenseOpen resource MotionOpen resource

dotLottie Web

Use when motion needs compressed .lottie packages, playback control, Web Components, or React/Vue wrappers.

LicenseMITCommercialCommercial OK

Resource: dotLottie Web
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use @lottiefiles/dotlottie-web or framework wrappers for compressed .lottie animation packages.
Caution: Still verify each animation asset license separately.

dotlottie-webdotLottie WebMotionMITOpen resource MotionOpen resource

Rive Runtimes

Use for interactive vector animation, state-machine buttons, onboarding, gamified feedback, product demos, and input-driven animation states.

LicenseMIT for official runtimesCommercialCommercial OK

Resource: Rive Runtimes
License: MIT for official runtimes
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use @rive-app/react-canvas or the relevant official runtime for .riv files, self-host WASM/assets when needed, and provide static/reduced-motion fallback.
Caution: Runtime license is not the `.riv` asset license; editor, marketplace, third-party graphics, and brand assets require separate checks.

rive-runtimesRive RuntimesMotionMIT for official runtimesOpen resource MotionOpen resource

useAnimations

Use for small animated UI icons such as menu, play/pause, loading, and check states.

LicenseMITCommercialCommercial OK

Resource: useAnimations
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: npm install react-useanimations; use for small animated icons, not large narrative scenes.
Caution: Do not replace text state with animation only.

useanimationsuseAnimationsMotionMITOpen resource IllustrationOpen resource

OpenMoji

Use when an agent needs open-source emoji or light illustration and can satisfy CC BY-SA attribution plus share-alike obligations; return the exact emoji, download path, version, attribution copy, modification note, and whether ShareAlike is triggered.

LicenseCreative Commons Attribution-ShareAlike 4.0 International for graphics; GNU Lesser General Public License v3 for codeCommercialConditionalRiskMedium riskCreditVisible credit

Resource: OpenMoji
License: Creative Commons Attribution-ShareAlike 4.0 International for graphics; GNU Lesser General Public License v3 for code
Commercial: Conditional
Risk: Medium risk
Credit: Visible credit
Get: Download exact SVG/PNG/font assets from the OpenMoji site or GitHub release; record emoji name, Unicode, color/black variant, OpenMoji version, CC BY-SA 4.0 attribution location, whether it was modified, and whether adapted graphics are shared under the same or compatible license.
Formats: SVG, PNG, OTF, TTF
Caution: CC BY-SA 4.0 permits commercial use but requires attribution; modified, redrawn, or adapted graphics need the same or a compatible license for the contribution.

openmojiOpenMojiIllustrationCC BY-SA 4.0 for graphics; LGPL-3.0 for codeOpen resource IllustrationOpen resource

Twemoji

Use for consistent emoji graphics, reactions, community expression, education content, and lightweight illustrated states.

LicenseCC BY 4.0 for graphics; MIT for codeCommercialConditional

Resource: Twemoji
License: CC BY 4.0 for graphics; MIT for code
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use the SVG/PNG graphics only with visible attribution in README, About, footer, legal, or source comments; keep emoji as supportive expression, not the only status signal.
Caution: CC BY 4.0 requires attribution; do not treat it as no-attribution art.

twemojiTwemojiIllustrationCC BY 4.0 for graphics; MIT for codeOpen resource PhotoOpen resource

Openverse

Use to find openly licensed image, photo, audio, and media candidates for articles, knowledge bases, education pages, case explainers, and low-budget projects.

LicensePer-item Creative Commons or public-domain licenseCommercialCheck per setRiskNeeds reviewCreditCheck per asset

Resource: Openverse
License: Per-item Creative Commons or public-domain license
Commercial: Check per set
Risk: Needs review
Credit: Check per asset
Get: Use Openverse as discovery; open the original source and record item URL, creator, provider, license, attribution text, commercial/adaptation filters, and likeness/trademark risk.
Formats: JPG, PNG, SVG, MP3
Caution: Always visit the original source page to verify license, attribution, resolution, likeness, and trademark risk.

openverseOpenversePhotoCreative Commons or public-domain license varies by itemOpen resource PhotoOpen resource

Wikimedia Commons

Use for historical, cultural, architectural, scientific, location, public-figure, and evidence imagery with traceable provenance.

LicenseFree licenses vary by file, commonly CC BY, CC BY-SA, public domain, or other listed licensesCommercialCheck per set

Resource: Wikimedia Commons
License: Free licenses vary by file, commonly CC BY, CC BY-SA, public domain, or other listed licenses
Commercial: Check per set
Risk: Unmarked
Credit: Unmarked
Get: Open the specific file page, copy the title, author, source, license, and attribution text, then download an appropriately sized derivative.
Caution: CC BY and CC BY-SA need attribution, and SA derivatives can trigger share-alike obligations.

wikimedia-commonsWikimedia CommonsPhotoFree licenses vary by file, commonly CC BY, CC BY-SA, public domain, or other listed licensesOpen resource PhotoOpen resource

NASA Image and Video Library

Use for space, science, Earth observation, education, immersive heroes, 3D texture reference, and science-communication visuals.

LicenseNASA media generally not subject to U.S. copyright, with endorsement, logo, and third-party restrictionsCommercialConditional

Resource: NASA Image and Video Library
License: NASA media generally not subject to U.S. copyright, with endorsement, logo, and third-party restrictions
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Download from the NASA media page, keep title/ID/date/credit metadata, and avoid uses that imply NASA endorsement or misuse NASA insignia.
Caution: NASA insignia, employee likeness, mission patches, third-party content, and endorsement context must follow official guidelines.

nasa-image-video-libraryNASA Image and Video LibraryPhotoNASA media generally not subject to U.S. copyright, with endorsement, logo, and third-party restrictionsOpen resource ComponentOpen resource

Ariakit

Use in React to build accessible behavior foundations for combobox, menu, dialog, popover, select, tooltip, and related components while keeping custom visual systems.

LicenseMIT for packages and most examples; Ariakit Plus and app code use separate/proprietary termsCommercialConditional

Resource: Ariakit
License: MIT for packages and most examples; Ariakit Plus and app code use separate/proprietary terms
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Install ariakit-react or copy MIT examples only after checking the path-specific license; do not copy Plus examples unless licensed.
Caution: Repository directories use different licenses, so verify the exact path before copying examples.

ariakitAriakitComponentMIT for packages and most examples; Ariakit Plus and app code use separate/proprietary termsOpen resource ComponentOpen resource

Ark UI

Use for design systems that need consistent component logic across React, Solid, Vue, and Svelte, especially cross-product libraries and internal tooling platforms.

LicenseMITCommercialCommercial OK

Resource: Ark UI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install @ark-ui/react, @ark-ui/vue, @ark-ui/solid, or @ark-ui/svelte, then style parts with local CSS variables and semantic tokens.
Caution: Requires part selector, state-attribute, and token-mapping conventions.

ark-uiArk UIComponentMITOpen resource ComponentOpen resource

Zag.js

Use when agents need state-machine-driven complex component logic such as number input, steps, combobox, menu, toast, slider, and tree view.

LicenseMITCommercialCommercial OK

Resource: Zag.js
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install the specific @zag-js machine package plus a framework adapter, then connect generated props to local markup and styles.
Caution: Higher learning curve than copying components.

zag-jsZag.jsComponentMITOpen resource ComponentOpen resource

Base UI

Use in React projects to build unstyled, accessible, slot-friendly component libraries, especially when a team wants a newer foundation informed by Radix, Floating UI, and MUI experience.

LicenseMITCommercialCommercial OK

Resource: Base UI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install @base-ui-components/react and wrap primitives into local components with project tokens, slots, and data-state styling.
Caution: React-only, so it is not a direct fit for Vue/Svelte multi-framework libraries.

base-uiBase UIComponentMITOpen resource ComponentOpen resource

Mantine

When an agent needs a full React component library rather than headless primitives, Mantine is a broad implementation resource; map the Mantine theme to local tokens and retest form errors, date localization, and dark mode.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Mantine
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install Mantine packages through npm; record MIT license, theme overrides, styling integration, and whether Mantine UI example blocks were copied.
Formats: TypeScript, TSX, CSS, React components
Caution: Mantine has a recognizable component-library voice; strongly branded products should remap tokens, radius, typography, and state visuals.

mantineMantineComponentMITOpen resource ComponentOpen resource

HeroUI

When an agent needs a more packaged component library than shadcn while staying in Tailwind/Next.js, retrieve HeroUI; separate Apache-2.0 open packages from HeroUI Pro paid assets.

LicenseApache License 2.0CommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: HeroUI
License: Apache License 2.0
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install open-source HeroUI packages through npm; record Apache-2.0 license, version, any Pro template/component boundary, and React Aria/Tailwind v4 dependencies.
Formats: TypeScript, TSX, Tailwind CSS, React components
Caution: Record old NextUI/MIT and new HeroUI/Apache-2.0 versions separately.

herouiHeroUIComponentApache-2.0Open resource ComponentOpen resource

Chakra UI

When an agent needs a complete component system rather than copy-source components, Chakra UI is an implementation path; clarify client-component boundaries and write token/recipe constraints into the local design system.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Chakra UI
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install Chakra UI through npm; record MIT license, Provider/theme boundaries, any Pro component use, RSC/client-component impact, and local token mapping.
Formats: TypeScript, TSX, CSS, React components
Caution: Chakra Pro is separately paid and should not be cataloged as MIT.

chakra-uiChakra UIComponentMITOpen resource ComponentOpen resource

Flowbite React

When an agent needs a broad React component package in the Tailwind ecosystem plus Figma/design-system references, retrieve Flowbite React; mark open-source components, CC BY docs, and Pro boundaries.

LicenseMIT code + CC BY 3.0 docsCommercialConditionalRiskMedium riskCreditKeep license notice

Resource: Flowbite React
License: MIT code + CC BY 3.0 docs
Commercial: Conditional
Risk: Medium risk
Credit: Keep license notice
Get: Install open-source React components through npm/CLI; when copying docs or prose, record CC BY 3.0, and verify paid terms before using Pro blocks.
Formats: TypeScript, TSX, Tailwind CSS, React components
Caution: Docs are CC BY 3.0, code is MIT, and Pro resources use separate terms; do not merge them into one license bucket.

flowbite-reactFlowbite ReactComponentMIT code; documentation CC BY 3.0; Pro templates/components use separate paid termsOpen resource ComponentOpen resource

Kobalte

When the target stack is SolidJS and the agent needs Radix/React Aria-like primitives, retrieve Kobalte; do not apply it directly to React or Vue projects.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Kobalte
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install @kobalte/core through npm; record MIT license, SolidJS scope, state data-* styling strategy, and whether Tailwind or vanilla-extract helpers are used.
Formats: TypeScript, TSX, SolidJS primitives, unstyled accessible components
Caution: SolidJS-only, so it does not directly fit React/Next.js codebases.

kobalteKobalteComponentMITOpen resource ComponentOpen resource

Park UI

When an agent has selected Ark UI/Panda CSS and needs a reference for turning headless parts into full components, retrieve Park UI; replace brand tokens, copy, icons, and product states after copying.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Park UI
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Copy selected Ark UI + Panda CSS components from official docs/repo or use the preset; keep MIT notice and record component source, recipe/token changes, and target framework.
Formats: TypeScript, TSX, Panda CSS, styled components
Caution: It is a styled starting point, not a final brand to clone.

park-uiPark UIComponentMITOpen resource ComponentOpen resource

Ant Design

When an agent needs to build an enterprise admin quickly and the project accepts antd's visual/dependency system, retrieve Ant Design; control theme tokens, localization, table density, form errors, and template-license boundaries.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Ant Design
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install antd through npm; record MIT license, ConfigProvider/theme overrides, locale, icon dependencies, and whether Ant Design Pro/templates are used.
Formats: TypeScript, TSX, CSS-in-JS, React components
Caution: Ant Design has a strong enterprise visual voice and may not fit non-admin or highly branded products.

ant-designAnt DesignComponentMITOpen resource ComponentOpen resource

MUI Material

When an agent needs stable React Material Design components, retrieve MUI Material; define ThemeProvider, Emotion, token overrides, SSR, and MUI X paid boundaries before implementation.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: MUI Material
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install @mui/material, @emotion/react, and @emotion/styled through npm; record MIT notice, and check MUI X Pro/Premium, templates, Roboto, and Material Icons separately.
Formats: TypeScript, TSX, CSS-in-JS, React components
Caution: Material/MUI has a strong visual identity, so branded products need token and component voice overrides.

mui-materialMUI MaterialComponentMITOpen resource ComponentOpen resource

Nuxt UI

When an agent builds a Vue/Nuxt design system or product interface, retrieve Nuxt UI; align Tailwind tokens, App wrapping, SSR, Figma Kit licensing, and historical Pro boundaries.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Nuxt UI
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install @nuxt/ui with Tailwind CSS; register the Nuxt module or official Vue/Vite plugin, and keep separate records for the Figma Kit and any historical Pro resources.
Formats: Vue, TypeScript, Tailwind CSS, Vue components
Caution: Primarily for Vue/Nuxt, not React projects.

nuxt-uiNuxt UIComponentMITOpen resource ComponentOpen resource

Web Awesome

When an agent needs cross-framework components without binding to React/Vue runtime, retrieve Web Awesome Core; isolate Pro assets, icon-library licenses, and Fonticons/Web Awesome trademark context.

LicenseMIT LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Web Awesome
License: MIT License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install from npm or self-host the npm pack output for Web Awesome Core; keep the MIT notice, do not mix in Pro components/themes/colorways, and check external icon libraries per set.
Formats: Web Components, JavaScript, CSS, SVG icons
Caution: Pro components, themes, patterns, and some colorways are not open-source catalog material.

web-awesomeWeb AwesomeComponentMIT for Web Awesome Core; Web Awesome Pro uses separate commercial termsOpen resource ComponentOpen resource

React DayPicker

When an agent needs date picking rather than a full UI kit, retrieve React DayPicker; specify the v10 package name, locale, keyboard interaction, range selection, time zones, and styling integration.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: React DayPicker
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install @daypicker/react for new projects; during migration, record the legacy react-day-picker compatibility package, version, date/time-zone behavior, and style overrides.
Formats: TypeScript, TSX, CSS, React date picker
Caution: React only.

react-day-pickerReact DayPickerComponentMITOpen resource ComponentOpen resource

Primer React

When an agent builds developer platforms or needs GitHub Primer-style components, retrieve Primer React; replace brand voice, calibrate BaseStyles/ThemeProvider, and handle GitHub/Primer trademark boundaries.

LicenseMIT LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Primer React
License: MIT License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install @primer/react, @primer/primitives, react, and react-dom through npm; keep the MIT notice, and avoid copying GitHub brand context, Octicons/docs imagery, or implying endorsement.
Formats: TypeScript, TSX, CSS, React components
Caution: GitHub/Primer visual and semantic voice is strong, so commercial products must avoid brand confusion.

primer-reactPrimer ReactComponentMITOpen resource ComponentOpen resource

React Spectrum

When an agent needs React Spectrum's accessible, internationalized, and adaptive components, retrieve it; configure Provider, defaultTheme, locale, colorScheme, and CSS imports during implementation.

LicenseApache License 2.0CommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: React Spectrum
License: Apache License 2.0
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install @adobe/react-spectrum through a package manager; import its CSS, configure Provider/defaultTheme, keep Apache-2.0 notices, and do not copy official docs media or imply Adobe endorsement.
Formats: TypeScript, TSX, CSS, React components
Caution: Adobe/Spectrum visual voice and trademark context are obvious.

react-spectrumReact SpectrumComponentApache-2.0Open resource ComponentOpen resource

Reka UI

When an agent needs Vue/Nuxt headless accessible component primitives, retrieve Reka UI; visual styling must come from local tokens and CSS rather than treating demos as the final brand.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Reka UI
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install reka-ui through npm; use reka-ui/nuxt for Nuxt and reka-ui/resolver for auto imports, while keeping MIT and dependency notices.
Formats: Vue, TypeScript, unstyled Vue primitives, Nuxt module
Caution: Vue/Nuxt only, not React.

reka-uiReka UIComponentMITOpen resource ComponentOpen resource

Figma Community

Use to discover UI kits, icons, component libraries, templates, FigJam diagrams, design-system examples, and educational resources; intake must record the license for the exact file.

LicensePer-resource Figma Community licenseCommercialCheck per setRiskNeeds reviewCreditCheck per asset

Resource: Figma Community
License: Per-resource Figma Community license
Commercial: Check per set
Risk: Needs review
Credit: Check per asset
Get: Before duplicating an exact file, record creator, resource URL, free/paid status, license, third-party asset notes, and whether client/code-project copying is allowed.
Formats: Figma file, FigJam, plugin, widget
Caution: There is no single open-source license; free, paid, plugin, widget, and slide-template rules differ.

figma-communityFigma CommunityComponentPer-resource license: Community Free/Paid Resource License, CC BY 4.0 slide templates, or creator-specified termsOpen resource ColorOpen resource

ColorBrewer

Use for maps, choropleths, data visualizations, policy dashboards, and situations needing sequential, diverging, or qualitative palette decisions.

LicenseApache-2.0 / Apache-style license for ColorBrewer software and color schemesCommercialCommercial OK

Resource: ColorBrewer
License: Apache-2.0 / Apache-style license for ColorBrewer software and color schemes
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use schemes as starting points for choropleth maps and data visualization, then record palette name, class count, colorblind-safe status, and local token mapping.
Caution: Palettes are not a full brand system; map them to semantic tokens and retest contrast.

colorbrewerColorBrewerColorApache-2.0 / Apache-style license for ColorBrewer software and color schemesOpen resource ColorOpen resource

Open Color

Use for fast UI base scales, prototypes, docs, draft status colors, and lightweight products that need consistent 0-9 color-scale naming.

LicenseMITCommercialCommercial OK

Resource: Open Color
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install open-color or copy selected scales, then translate them into semantic tokens such as surface, border, text, accent, danger, and success.
Caution: Not an OKLCH/perceptually uniform modern scale, so contrast and perceptual jumps need manual checks.

open-colorOpen ColorColorMITOpen resource PhotoOpen resource

Unsplash

Use for high-quality photo candidates, brand moodboards, article imagery, hero references, and real-scene atmosphere, but not as already-cleared product evidence.

LicenseUnsplash LicenseCommercialConditionalRiskMedium riskCreditCredit recommended

Resource: Unsplash
License: Unsplash License
Commercial: Conditional
Risk: Medium risk
Credit: Credit recommended
Get: Download from the exact photo page and record photographer, photo URL, date, crop/color edits, alt text, recognizable people/places/trademarks, and whether extra releases are needed.
Formats: JPG, AVIF, WebP, JPG
Caution: Images cannot be sold without significant modification or compiled into a competing service.

unsplashUnsplashPhotoUnsplash LicenseOpen resource PhotoOpen resource

Pexels

Use for websites, blogs, ad drafts, video backgrounds, product moodboards, and page prototypes that need both photo and video resources.

LicensePexels LicenseCommercialConditionalRiskMedium riskCreditCredit recommended

Resource: Pexels
License: Pexels License
Commercial: Conditional
Risk: Medium risk
Credit: Credit recommended
Get: Open the exact photo/video page and record creator, URL, license, size, crop/edits, people/brand/trademark risk, and no-endorsement boundary.
Formats: JPG, MP4, AVIF, WebP
Caution: Do not use photos or videos as trademarks, design marks, trade names, or service marks.

pexelsPexelsPhotoPexels License and some CC0 content; check each asset pageOpen resource IconOpen resource

Remix Icon

Use when a product needs neutral 24x24 system symbols with outline/fill variants for SaaS, admin, AI tools, mobile web, and marketing support icons.

LicenseRemix Icon License v1.0CommercialConditional

Resource: Remix Icon
License: Remix Icon License v1.0
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use @remixicon/react, remixicon webfont CSS, SVG sprite, or copy individual SVG/PNG files; keep the custom license note with redistributed assets.
Caution: The project moved to the custom Remix Icon License v1.0 in 2026; do not keep recording it as old Apache/MIT licensing.

remix-iconRemix IconIconRemix Icon License v1.0Open resource IconOpen resource

CSS.GG

Use as a discovery source for pure CSS icons, SVG icons, Figma icons, and glyph/pattern inspiration, especially for prototypes that avoid icon fonts.

LicenseCustom CSS.GG / GLYF.APP license for v2.1.2+; older versions before 2.1.2 were MITCommercialConditional

Resource: CSS.GG
License: Custom CSS.GG / GLYF.APP license for v2.1.2+; older versions before 2.1.2 were MIT
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use only after confirming the target version/license; for commercial production, request permission for v2.1.2+ or pin and document an older MIT release if that is legally acceptable.
Caution: The current main-branch license requires attribution and explicit permission for commercial use; do not simply label it MIT.

css-ggCSS.GGIconCustom CSS.GG / GLYF.APP license for v2.1.2+; older versions before 2.1.2 were MITOpen resource IconOpen resource

MynaUI Icons

Use for lightweight modern outline/solid icons, React integration, admin tools, mobile controls, and products that need an alternative to the common Lucide/Tabler tone.

LicenseMITCommercialCommercial OK

Resource: MynaUI Icons
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install @mynaui/icons or @mynaui/icons-react, or download selected SVG files; import per icon and keep the MIT license notice.
Caution: Smaller ecosystem than Lucide or Tabler, so sample missing icons and maintenance cadence before production.

mynaui-iconsMynaUI IconsIconMITOpen resource IconOpen resource

Teenyicons

Use for ultra-compact UI, table-row actions, toolbars, badges, chips, mobile bottom bars, and 15px small-control icons.

LicenseMITCommercialCommercial OK

Resource: Teenyicons
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install teenyicons, then inline selected 15x15 outline or solid SVGs; wrap them in accessible icon components when used with labels or controls.
Caution: Not a direct 24px primary icon system; enlarged icons may feel too light or small.

teenyiconsTeenyiconsIconMITOpen resource MotionOpen resource

Dot Matrix

Retrieve Dot Matrix when an agent needs loaders with more character than a spinner; place the loader near the pending region, pair it with visible text or aria-label, check reduced-motion, and confirm the components are not repackaged into a sellable component library.

LicenseCustom Proprietary LicenseCommercialConditionalRiskMedium riskCreditKeep license notice

Resource: Dot Matrix
License: Custom Proprietary License
Commercial: Conditional
Risk: Medium risk
Credit: Keep license notice
Get: Install individual loaders through the shadcn CLI registry; record the item name, version, source URL, custom LICENSE, and modifications. Product UI use is allowed, but do not publish, resell, sublicense, or repackage the components as a standalone reusable component library, template pack, or loader library.
Formats: TSX, CSS, JSON, shadcn registry item
Caution: The license is not ordinary MIT: the root repository LICENSE is custom and forbids standalone component or loader-library redistribution and commercialization.

dot-matrix-loadersDot MatrixMotionCustom proprietary license; product use is permitted, but standalone reusable component distribution/resale is prohibited. package.json lists MIT, but the repository LICENSE is stricter and should govern intake.Open resource MotionOpen resource

Motion-Primitives

Use as animated-component starting points for React, Next.js, and Tailwind projects: text reveals, layout transitions, hover/tap feedback, media reveals, and lightweight interaction demos.

LicenseMITCommercialCommercial OK

Resource: Motion-Primitives
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Copy or install only the needed React/Tailwind/Motion component, then remap timing, easing, tokens, reduced-motion behavior, and accessibility labels to the local design system.
Caution: The project is labeled beta, so components and APIs may change; localize copied code and add QA.

motion-primitivesMotion-PrimitivesMotionMITOpen resource ComponentOpen resource

Magic UI

Use for quick exploration of dynamic marketing modules, text effects, background effects, interactive cards, and launch-page component prototypes in Next.js, Tailwind, and shadcn projects.

LicenseMITCommercialCommercial OK

Resource: Magic UI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use the documented component source or CLI flow, then replace demo copy, colors, icons, gradients, and motion timing with local tokens and project content.
Caution: Many components skew marketing/decorative, so reduce noise for admin or transactional products.

magic-uiMagic UIComponentMITOpen resource ComponentOpen resource

Animate UI

Use when a React product needs already-animated shadcn/Radix-style components such as overlays, menus, buttons, feedback controls, and motion-rich component distribution.

LicenseMITCommercialCommercial OK

Resource: Animate UI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install or copy only selected animated React/Tailwind/Motion/Shadcn components; verify dependencies, portals, focus, exit animation, and reduced-motion fallback.
Caution: Animated components do not replace interaction contracts; still check aria, keyboard, focus return, portals, and form states.

animate-uiAnimate UIComponentMITOpen resource ComponentOpen resource

React Bits

Use for exploring text effects, animated backgrounds, interactive cards, creative buttons, and launch-page visual modules in React/Next/Tailwind projects before localizing to the design system.

LicenseMIT + Commons ClauseCommercialConditional

Resource: React Bits
License: MIT + Commons Clause
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use its shadcn/jsrepo commands or copy a single component variant, then localize tokens, dependencies, animation timing, reduced-motion behavior, and accessibility labels.
Caution: Commons Clause adds restrictions around selling the software/component library; commercial product use is allowed but distribution/resale scenarios need review.

react-bitsReact BitsComponentMIT + Commons ClauseOpen resource IconOpen resource

SVGL

Use to discover SVG logo candidates for AI, developer tools, platforms, payment, social, design, and software brands, especially for case pages, integration lists, and stack displays.

LicenseMIT for the SVGL project code; logo and trademark rights vary by brandCommercialCheck per set

Resource: SVGL
License: MIT for the SVGL project code; logo and trademark rights vary by brand
Commercial: Check per set
Risk: Unmarked
Credit: Unmarked
Get: Use as a brand-logo discovery index; before embedding any logo, open its original brand guidelines or asset source and record permission, trademark boundary, color mode, and attribution.
Caution: SVGL's MIT project license does not make every logo freely commercially usable; verify brand trademark, endorsement, and usage guidelines per logo.

svglSVGLIconMIT for the SVGL project code; logo and trademark rights vary by brandOpen resource 3DOpen resource

Quaternius Assets

Use for low-poly 3D scenes, gamified onboarding, education demos, map/city/nature assets, character prototypes, and lightweight Three.js scenes.

LicenseCreative Commons CC0CommercialCommercial OK

Resource: Quaternius Assets
License: Creative Commons CC0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download the selected pack, keep the source URL and license note, then optimize exported GLB/texture/sprite assets for the target runtime.
Caution: The style is game-like, so serious enterprise products should adapt it or use it only for prototypes.

quaternius-assetsQuaternius Assets3DCreative Commons CC0Open resource TokenOpen resource

Style Dictionary

Use to transform design tokens from one JSON source into CSS, SCSS, JS, Android, iOS, documentation, and multi-brand theme outputs.

LicenseApache-2.0CommercialCommercial OK

Resource: Style Dictionary
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install style-dictionary as a dev dependency, keep token source files in JSON/DTCG-compatible folders, and generate CSS variables, platform files, docs, or typed exports in CI.
Caution: It is a transform tool, not a semantic-token strategy; define primitive, semantic, and component token layers first.

style-dictionaryStyle DictionaryTokenApache-2.0Open resource TokenOpen resource

Design Tokens Format Module

Use as the reference format for design-system token files, RAG schemas, Figma/code sync, tooling interoperability, and long-term asset governance.

LicenseW3C Community Final Specification AgreementCommercialConditional

Resource: Design Tokens Format Module
License: W3C Community Final Specification Agreement
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use the specification as the exchange contract for token JSON: prefer $type, $value, $description, aliases, groups, and .tokens.json naming when authoring shared token files.
Caution: It is not a W3C Standards Track standard; validate tooling support against the project stack.

dtcg-format-moduleDesign Tokens Format ModuleTokenW3C Community Final Specification AgreementOpen resource 3DOpen resource

<model-viewer>

Use to embed rotatable, zoomable 3D and AR models in product pages, portfolios, education content, spatial demos, and AR prototypes.

LicenseApache-2.0CommercialCommercial OK

Resource: <model-viewer>
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install @google/model-viewer or use the documented script import, then serve optimized GLB/USDZ assets with poster images, dimensions, alt text, loading policy, and AR fallback notes.
Caution: The library license does not cover example models or third-party 3D assets; record source and license per model.

model-viewer<model-viewer>3DApache-2.0Open resource 3DOpen resource

glTF Transform

Use to bring downloaded or generated GLB/glTF assets into a frontend release pipeline: inspect, prune, compress geometry, compress textures, split, repair, and batch process.

LicenseMITCommercialCommercial OK

Resource: glTF Transform
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install @gltf-transform/cli for batch asset work, or @gltf-transform/core/extensions/functions for scripted GLB inspection, pruning, deduping, Draco/meshopt compression, and texture conversion.
Caution: Compression is not automatically visually lossless; compare material, normal, animation, and scale output with screenshots or model inspection.

gltf-transformglTF Transform3DMITOpen resource PhotoOpen resource

The Met Open Access

Use for museum-grade artwork images, historic objects, texture references, editorial heroes, cultural education pages, moodboards, and generative visual references.

LicenseCC0 for public-domain Open Access images and dataCommercialCommercial OK

Resource: The Met Open Access
License: CC0 for public-domain Open Access images and data
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Search for works with the Open Access/OA indicator or use the public API, then store object ID, artist, title, date, image URL, source URL, and CC0 note with every downloaded asset.
Caution: Only OA/Open Access public-domain images should be treated as CC0; do not mix in non-OA collection records.

met-open-accessThe Met Open AccessPhotoCC0 for public-domain Open Access images and dataOpen resource PhotoOpen resource

Smithsonian Open Access

Use for science, natural history, aerospace, history, design, ethnography, art, and public-domain 2D/3D collection asset discovery.

LicenseCC0 for designated Open Access assetsCommercialCommercial OK

Resource: Smithsonian Open Access
License: CC0 for designated Open Access assets
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Filter for CC0/Open Access assets, then preserve title, collection unit, catalog record, source URL, rights note, and any cultural/usage context alongside downloaded 2D or 3D files.
Caution: CC0 applies only to assets marked with the CC0 designation; unmarked items have usage conditions.

smithsonian-open-accessSmithsonian Open AccessPhotoCC0 for designated Open Access assetsOpen resource PhotoOpen resource

Squoosh

Use before adding images to the library for compression, WebP/AVIF/JPEG comparison, hero-image export, case-study image trimming, and local processing without uploading images to a third-party server.

LicenseApache-2.0CommercialCommercial OK

Resource: Squoosh
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use the web app for visual codec comparisons, or review the repository before adopting automated workflows; record original size, output format, quality settings, dimensions, and visual QA notes.
Caution: Check the repository and @squoosh/lib maintenance state before automating; large pipelines may prefer actively maintained tools such as Sharp or imagemin.

squooshSquooshPhotoApache-2.0Open resource IconOpen resource

SVGO

Use to optimize SVG icons, logos, patterns, and illustration fragments exported from Figma, Illustrator, or Inkscape by removing redundant metadata, hidden elements, and compressible path data.

LicenseMITCommercialCommercial OK

Resource: SVGO
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install svgo as a dev dependency, keep an explicit svgo.config.mjs, and run it on exported icons, logos, decorative SVGs, pattern SVGs, and illustration fragments before bundling.
Caution: Default optimization can break ids, viewBox, aria/title, gradient references, or animation; protect accessibility and runtime references in config.

svgoSVGOIconMITOpen resource AccessibilityOpen resource

The A11Y Project Checklist

Use for component review, page acceptance, accessibility regression, design-system guidance, and human QA after agents generate frontend code.

LicenseApache-2.0 for site repository content; verify linked third-party resources separatelyCommercialConditional

Resource: The A11Y Project Checklist
License: Apache-2.0 for site repository content; verify linked third-party resources separately
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use the checklist as a human QA rubric in design and frontend review; map each relevant item to local acceptance criteria, tests, and manual keyboard/screen-reader checks.
Caution: The checklist cannot guarantee full accessibility; real user paths, assistive technology, and professional audits still matter.

a11y-project-checklistThe A11Y Project ChecklistAccessibilityApache-2.0 for site repository content; verify linked third-party resources separatelyOpen resource PhotoOpen resource

Sharp

Use to turn downloaded, photographed, or generated images into production assets: format conversion, resizing, cropping, compression, thumbnails, placeholders, and pre-ingest quality checks.

LicenseApache-2.0CommercialCommercial OK

Resource: Sharp
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install sharp in a Node.js asset pipeline, then generate AVIF/WebP/JPEG/PNG variants, thumbnails, metadata, and responsive srcset outputs from original source images.
Caution: Tie compression settings to visual QA, especially for text, hairlines, alpha edges, dark gradients, and skin tones.

sharp-image-pipelineSharpPhotoApache-2.0Open resource TokenOpen resource

Utopia

Use to generate fluid type, leading, and spacing tokens so responsive pages interpolate smoothly between small and large screens instead of relying on many breakpoints.

LicenseFree calculator and generated CSS; verify utopia-core/tooling license before redistributing codeCommercialCheck per set

Resource: Utopia
License: Free calculator and generated CSS; verify utopia-core/tooling license before redistributing code
Commercial: Check per set
Risk: Unmarked
Credit: Unmarked
Get: Use the calculator to generate clamp-based type and space tokens, then store the exported CSS/custom properties in the local design-token layer with min/max viewport assumptions.
Caution: Fluid sizing is not a full typography system; still define body text, headings, line length, leading, wrapping, and density.

utopia-fluid-type-spaceUtopiaTokenFree calculator and generated CSS; verify utopia-core/tooling license before redistributing codeOpen resource AccessibilityOpen resource

Responsively App

Use before frontend handoff to inspect multiple device widths together, mirror scroll/click interactions, capture screenshots, and catch breakpoint, overflow, touch target, and layout-density issues.

LicenseAGPL-3.0CommercialConditional

Resource: Responsively App
License: AGPL-3.0
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Install the desktop app for manual responsive QA, or use its device list as a reference when defining browser/screenshot test matrices.
Caution: AGPL-3.0 has obligations for modification, distribution, and network-use scenarios; confirm compliance for commercial work.

responsively-appResponsively AppAccessibilityAGPL-3.0Open resource Data VisualizationOpen resource

OpenFreeMap

Use for map-based data visualization, location-product prototypes, city/route/store distribution pages, and interactive projects that need low-cost vector basemaps.

LicenseMIT for project code; OpenStreetMap, OpenMapTiles, Natural Earth, style, glyph, and attribution licenses apply separatelyCommercialConditional

Resource: OpenFreeMap
License: MIT for project code; OpenStreetMap, OpenMapTiles, Natural Earth, style, glyph, and attribution licenses apply separately
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use the public endpoint for prototypes or self-host the stack for production; always preserve OSM/OpenMapTiles/Natural Earth attribution and document tile/data provenance.
Caution: Map data and style dependencies have separate licenses and attribution requirements; do not rely only on the project MIT license.

openfreemapOpenFreeMapData VisualizationMIT for project code; OpenStreetMap, OpenMapTiles, Natural Earth, style, glyph, and attribution licenses apply separatelyOpen resource Data VisualizationOpen resource

OSM Liberty

Use as a base style for open map projects, helping agents quickly get roads, water, labels, points of interest, and administrative boundaries into map visualizations.

LicenseBSD for the style; OpenMapTiles, Natural Earth, Maki icons, glyphs, tiles, and data licenses apply separatelyCommercialConditional

Resource: OSM Liberty
License: BSD for the style; OpenMapTiles, Natural Earth, Maki icons, glyphs, tiles, and data licenses apply separately
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use as a MapLibre/Mapbox GL basemap style, then bind it to a compatible OpenMapTiles-schema source and record all source, sprite, glyph, and attribution requirements.
Caution: It is a style, not a tile service; the data schema must match.

osm-libertyOSM LibertyData VisualizationBSD for the style; OpenMapTiles, Natural Earth, Maki icons, glyphs, tiles, and data licenses apply separatelyOpen resource TokenOpen resource

Panda CSS

Use to turn design-system tokens, recipes, variants, and styling constraints into a type-safe CSS generation layer, especially for React/TS projects with themes and component variants.

LicenseMITCommercialCommercial OK

Resource: Panda CSS
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install @pandacss/dev, initialize the config, define tokens/semantic tokens/recipes, and commit the generated styled-system output policy for the project.
Caution: Define token layers and naming strategy first; otherwise type safety only amplifies disorder.

panda-cssPanda CSSTokenMITOpen resource TokenOpen resource

vanilla-extract

Use for design systems that need TypeScript token contracts, static CSS output, multiple themes, and framework-agnostic style packages, especially component libraries and long-lived product UI.

LicenseMITCommercialCommercial OK

Resource: vanilla-extract
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install @vanilla-extract/css plus the bundler integration, define theme contracts in .css.ts files, and generate static CSS at build time.
Caution: Requires bundler integration, and component-library distribution must specify how consumers compile .css.ts files.

vanilla-extractTokenMITzero runtime CSSOpen resource IllustrationOpen resource

Boring Avatars

Use for user-avatar placeholders, team lists, comments, community profiles, project cards, and privacy-friendly deterministic avatars that do not require uploaded photos.

LicenseMITCommercialCommercial OK

Resource: Boring Avatars
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install `boring-avatars`, pass a stable user id/name/email as the seed, choose one variant and a project color palette, and render SVG avatars locally instead of depending on the paused legacy API.
Caution: The legacy API service was paused, so production should generate locally or verify terms before using the newer hosted API.

boring-avatarsBoring AvatarsIllustrationMITOpen resource IllustrationOpen resource

DiceBear

Use for product avatars, anonymous users, community identity, gamified profiles, team mock data, and reproducible SVG avatars across multiple visual styles.

LicenseCore code MIT; avatar style licenses vary by artist/styleCommercialCheck per set

Resource: DiceBear
License: Core code MIT; avatar style licenses vary by artist/style
Commercial: Check per set
Risk: Unmarked
Credit: Unmarked
Get: Use the DiceBear package/API only after selecting an exact avatar style; record style name, creator, license URL, required attribution, seed, options, and whether the HTTP API or local generation is used.
Caution: Each avatar style has its own license, so do not treat the whole collection as one MIT asset library.

dicebearDiceBearIllustrationCore code MIT; avatar style licenses vary by artist/styleOpen resource IconOpen resource

Maki Icons

Use for map POIs, store/facility distribution, city guides, logistics, travel, public-service maps, and visualization interfaces needing tiny geospatial symbols.

LicenseCC0-1.0CommercialCommercial OK

Resource: Maki Icons
License: CC0-1.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Download selected 15px SVG POI icons, preserve the icon id/file name, and build a MapLibre/Mapbox sprite or inline SVG set with local color, hit-target, and label rules.
Caution: Icon licensing does not cover basemaps, tiles, geodata, fonts, sprites, or provider attribution.

maki-iconsMaki IconsIconCC0-1.0Open resource ComponentOpen resource

Tremor

Use for SaaS dashboards, analytics consoles, operations metrics, finance/sales/product data views, and React projects that need data-rich UI quickly.

LicenseApache-2.0CommercialCommercial OK

Resource: Tremor
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Copy selected React/Tailwind/Radix dashboard components or follow Tremor's installation guide, then remap colors, charts, density, empty states, and data-loading states to local product tokens.
Caution: After copying dashboard components, bind real data semantics, legends, units, sources, and empty/loading/error states.

tremorTremorComponentApache-2.0Open resource ComponentOpen resource

daisyUI

Use in Tailwind projects to quickly build buttons, forms, navigation, modals, cards, themes, and admin/marketing prototypes, especially for teams that want fewer utility classes.

LicenseMITCommercialCommercial OK

Resource: daisyUI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install daisyUI as a Tailwind CSS plugin, set a local theme/token policy, and use component class names as a fast prototype layer before hardening product-specific semantics and states.
Caution: It is a component-class layer, not a solution for IA, form copy, complex states, or accessibility regression.

daisyuidaisyUIComponentMITOpen resource ComponentOpen resource

HyperUI

Use for marketing sites, app pages, ecommerce, forms, navigation, CTAs, cards, and Tailwind HTML prototypes where no component package should be installed.

LicenseMITCommercialCommercial OK

Resource: HyperUI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Copy individual Tailwind CSS v4 markup blocks into the project, then replace demo content, normalize spacing/type/color tokens, and test form, ecommerce, and marketing states with real copy.
Caution: After copying HTML fragments, add semantics, form error states, focus, keyboard paths, and real-content stress tests.

hyperuiHyperUIComponentMITOpen resource ComponentOpen resource

Origin UI

Use in React/Tailwind/shadcn ecosystems for app UI, input controls, navigation, complex forms, data display, and product-interface fragments.

LicenseMITCommercialCommercial OK

Resource: Origin UI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Add selected registry components with the documented shadcn-compatible flow, then localize tokens, dependencies, copy, validation, and Tailwind v4 assumptions before production.
Caution: Confirm Tailwind v4 compatibility with older projects and record legacy component paths separately.

origin-uiOrigin UIComponentMITOpen resource ComponentOpen resource

Bits UI

Use in Svelte/SvelteKit projects to build headless, accessible, deeply branded component libraries such as dialog, select, combobox, menu, popover, slider, and tabs.

LicenseMITCommercialCommercial OK

Resource: Bits UI
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install Bits UI in Svelte/SvelteKit, compose the unstyled primitives with local CSS variables, and document part/state attributes, keyboard contracts, and accessibility acceptance tests.
Caution: Unstyled does not mean design-free; define tokens, state copy, errors, motion, and responsive behavior.

bits-uiBits UIComponentMITOpen resource 3DOpen resource

Three.js

Use for WebGL/WebGPU 3D heroes, product models, spatial data, interactive scenes, shader prototypes, portfolios, and frontend experiences that need deeper control than `<model-viewer>`.

LicenseMITCommercialCommercial OK

Resource: Three.js
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install `three` and use only the imports needed for the scene; pair every 3D surface with optimized GLB/KTX2 assets, loading states, reduced-motion/static fallback, keyboard-accessible controls, and mobile GPU budgets.
Caution: The library license does not cover example models, HDRIs, textures, audio, or third-party assets.

three-jsThree.js3DMITOpen resource 3DOpen resource

KTX-Software / Basis Universal

Use for GPU texture compression, KTX2 packaging, GLB texture slimming, mobile material-performance optimization, and preflight processing for large 3D heroes or product models.

LicenseFiles unique to KTX-Software generally Apache-2.0; Basis Universal components Apache-2.0 unless otherwise notedCommercialConditional

Resource: KTX-Software / Basis Universal
License: Files unique to KTX-Software generally Apache-2.0; Basis Universal components Apache-2.0 unless otherwise noted
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Use KTX tools in an asset pipeline to encode KTX2/Basis Universal textures; record source texture license, encoder settings, quality target, target GPU formats, and visual QA screenshots.
Caution: Tool licensing does not cover input textures, models, or output asset copyright.

ktx-softwareKTX-Software / Basis Universal3DFiles unique to KTX-Software generally Apache-2.0; Basis Universal components Apache-2.0 unless otherwise notedOpen resource PatternOpen resource

Texturelabs

Use for paper, ink, grain, retro print, metal, scratches, overlay noise, and real-material backplates in brand heroes, poster-like pages, image compositing, and tactile style-system cases.

LicenseCustom Texturelabs terms; many textures are free for personal and commercial use with exceptionsCommercialConditional

Resource: Texturelabs
License: Custom Texturelabs terms; many textures are free for personal and commercial use with exceptions
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Download an exact texture page asset, record the texture URL/name/size, the terms URL, edits/crops/compression, and whether the use is an end product rather than a redistributed texture pack.
Caution: Not a CC0/OSI open-source asset library; record the custom terms and exact download page.

texturelabsTexturelabsPatternCustom Texturelabs terms; many textures are free for personal and commercial use with exceptionsOpen resource MotionOpen resource

AutoAnimate

Use for list add/remove, filtered results, accordions, form regions, tags/chips, upload queues, and low-cost layout-change motion, especially when agents need quick transition feedback.

LicenseMITCommercialCommercial OK

Resource: AutoAnimate
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install `@formkit/auto-animate` or the framework adapter, attach it to a parent list/region, and test add/remove/reorder transitions with reduced-motion, focus, virtualization, and dynamic-height content.
Caution: Automatic motion is not interaction design; complex timelines, scroll storytelling, and accessible states still need manual planning.

auto-animateAutoAnimateMotionMITOpen resource IconOpen resource

Primer Octicons

Use for GitHub-like developer tools, code review, issue/PR workflows, repository management, CLI docs, and compact product UI.

LicenseMIT for the Octicons code/assets; GitHub brand usage still follows GitHub trademark and brand boundariesCommercialConditional

Resource: Primer Octicons
License: MIT for the Octicons code/assets; GitHub brand usage still follows GitHub trademark and brand boundaries
Commercial: Conditional
Risk: Unmarked
Credit: Unmarked
Get: Install `@primer/octicons-react` or `@primer/octicons`, import individual icons, preserve MIT notices, and reserve GitHub-specific brand marks for legitimate GitHub references.
Caution: Octicons licensing is not GitHub trademark permission; govern Octocat, GitHub marks, and product association separately.

octiconsPrimer OcticonsIconMIT for the Octicons code/assets; GitHub brand usage still follows GitHub trademark and brand boundariesOpen resource TokenOpen resource

Spectrum Design Data

Use to study Adobe Spectrum tokens, component schemas, cross-platform design data, token diffs, and large design-system data governance.

LicenseApache-2.0CommercialCommercial OK

Resource: Spectrum Design Data
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use Spectrum token packages as reference or pipeline input, map token names to local semantic tokens, and keep Apache-2.0 notices with copied code/data.
Caution: Spectrum token semantics are opinionated; do not directly skin non-Adobe brands as Adobe.

spectrum-design-dataSpectrum Design DataTokenApache-2.0Open resource ComponentOpen resource

Spectrum CSS

Use when studying or adopting Adobe Spectrum CSS components, token-driven CSS custom properties, theme variables, and enterprise component states.

LicenseApache-2.0CommercialCommercial OK

Resource: Spectrum CSS
License: Apache-2.0
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install only needed `@spectrum-css/*` packages, wire the required token CSS, and treat Spectrum usage guidelines as design constraints instead of copying isolated styles.
Caution: The visual voice is strongly Adobe; non-Adobe products should extract patterns rather than clone the whole look.

spectrum-cssSpectrum CSSComponentApache-2.0Open resource 3DOpen resource

React Three Fiber

Use for declarative Three.js scenes in React/Next.js, product 3D heroes, interactive models, particle/shader prototypes, and componentized WebGL pages.

LicenseMITCommercialCommercial OK

Resource: React Three Fiber
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install `three @react-three/fiber`, match the package major to the React major, and verify the canvas with desktop/mobile screenshots plus reduced-motion/static fallbacks.
Caution: The library license does not cover models, HDRIs, textures, audio, or example assets.

react-three-fiberReact Three Fiber3DMITOpen resource 3DOpen resource

Drei

Use in R3F projects for cameras, controls, environments, text, loaders, instancing, HTML overlays, and common 3D interaction helpers.

LicenseMITCommercialCommercial OK

Resource: Drei
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install `@react-three/drei` alongside `three` and `@react-three/fiber`; import helpers individually and audit each helper for accessibility, asset, and performance impact.
Caution: Helper convenience can hide performance cost; test Environment, Html, Text, Instances, ScrollControls, and similar pieces individually.

dreiDrei3DMITOpen resource 3DOpen resource

gltfjsx

Use to turn GLB/GLTF models into reusable R3F JSX components for product models, characters, icon-scale 3D, and configurable scenes in React codebases.

LicenseMITCommercialCommercial OK

Resource: gltfjsx
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Run `npx gltfjsx model.glb --transform` for eligible assets, commit generated components only after checking model license, node naming, animations, compression, and visual parity.
Caution: The tool license does not cover input model or texture rights.

gltfjsx3DMITGLB to JSXOpen resource 3DOpen resource

meshoptimizer

Use to optimize Web 3D models for vertex cache, overdraw, simplification, compression, and load performance, especially before publishing GLB/GLTF assets.

LicenseMIT with requested attribution in product documentation/creditsCommercialCommercial OK

Resource: meshoptimizer
License: MIT with requested attribution in product documentation/credits
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Use meshoptimizer through glTF Transform, native tools, or runtime decoders; record attribution, before/after file sizes, visual QA, and loader support.
Caution: The project requests attribution in user-facing documentation or credits.

meshoptimizer3DMIT with requested attribution in product documentation/creditsmeshoptOpen resource Data VisualizationOpen resource

deck.gl

Use for large geospatial/spatial datasets, point clouds, trajectories, heatmaps, 3D Tiles, map overlays, and GPU-accelerated exploratory visualization.

LicenseMITCommercialCommercial OK

Resource: deck.gl
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install `deck.gl` or scoped layer packages, pair with a licensed basemap/data source, and provide non-canvas summaries, filters, legends, and performance budgets.
Caution: deck.gl licensing does not cover basemap tiles, geodata, 3D Tiles, font glyphs, or third-party data terms.

deck-gldeck.glData VisualizationMITOpen resource Data VisualizationOpen resource

visx

Use in React projects for highly customized SVG charts, branded data components, dashboard marks, interactive axes, and D3-powered visualizations managed by React.

LicenseMITCommercialCommercial OK

Resource: visx
License: MIT
Commercial: Commercial OK
Risk: Unmarked
Credit: Unmarked
Get: Install only needed `@visx/*` packages such as `@visx/shape`, `@visx/scale`, and `@visx/axis`; define chart tokens, accessibility labels, and interaction behavior locally.
Caution: visx is not a turnkey chart library; layout, theme, tooltip, keyboard, screen-reader, and empty states are local responsibilities.

visxData VisualizationMITAirbnb visualizationOpen resource Data VisualizationOpen resource

Plotly.js

Choose Plotly.js when many chart types, exploratory interaction, or rapid prototypes matter; agents must check bundle size, modebar controls, keyboard/screen-reader alternatives, color tokens, and data-table fallbacks.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Plotly.js
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `plotly.js`, `plotly.js-dist-min`, or a partial bundle; define chart theme, modebar behavior, static image/export policy, and accessible table fallback locally.
Formats: JavaScript, TypeScript, SVG, Canvas
Caution: Default bundles can be heavy; evaluate partial bundles or alternative libraries for production interfaces.

plotly-jsPlotly.jsData VisualizationMITOpen resource Data VisualizationOpen resource

Observable Framework

When the task is a data app/report site rather than a single React component, agents can choose Observable Framework; record loader inputs, build outputs, data licenses, and chart fallbacks.

LicenseISC LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Observable Framework
License: ISC License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Create with `npm init @observablehq`, keep data loaders deterministic, document source data licenses, and export static dashboards only after checking embedded assets.
Formats: Markdown, JavaScript, TypeScript, HTML
Caution: Not a general React component library; confirm routing and build boundaries before embedding in a Next app.

observable-frameworkObservable FrameworkData VisualizationISCOpen resource Data VisualizationOpen resource

Leaflet

Choose Leaflet for ordinary POI/area/route maps when lightweight maturity and plugin ecosystem matter; agents must separately verify tile, geodata, and icon licenses.

LicenseBSD 2-Clause LicenseCommercialCommercial OKRiskMedium riskCreditKeep license notice

Resource: Leaflet
License: BSD 2-Clause License
Commercial: Commercial OK
Risk: Medium risk
Credit: Keep license notice
Get: Install `leaflet` and framework bindings only when needed; pair with licensed tiles/data, visible attribution, keyboard-accessible controls, and a non-map list/table fallback.
Formats: JavaScript, CSS, GeoJSON, Raster Tiles
Caution: Leaflet code licensing does not cover map tiles, OSM data, commercial basemaps, POI data, or marker icons.

leafletLeafletData VisualizationBSD 2-ClauseOpen resource Data VisualizationOpen resource

Turf.js

Use Turf when a map UI needs spatial computation rather than only layer rendering; record units, coordinate system, precision error, performance budget, and geodata licenses.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Turf.js
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `@turf/turf` for broad use or individual `@turf/*` packages for bundle control; validate CRS, units, precision, and data-source licenses.
Formats: JavaScript, TypeScript, GeoJSON
Caution: Turf is an analysis tool, not a map renderer, accessibility layer, or basemap attribution solution.

turf-jsTurf.jsData VisualizationMITOpen resource ComponentOpen resource

Floating UI

When an agent needs to build a floating surface instead of using a finished component, use Floating UI for collision, flip, shift, arrow, size, and anchor positioning; interaction semantics remain local.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Floating UI
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `@floating-ui/react` or lower-level DOM packages, then pair positioning middleware with local focus, dismissal, aria, and portal contracts.
Formats: TypeScript, JavaScript
Caution: It solves positioning, not the full accessible semantics of dialogs, menus, or listboxes.

floating-uiFloating UIComponentMITOpen resource ComponentOpen resource

TanStack Table

When generating complex tables, use TanStack Table for column models, sorting, filtering, selection, expansion, and pagination; do not let it replace visual hierarchy or accessible header relationships.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: TanStack Table
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install the adapter for the target framework, define typed columns/data models, and implement markup, density, keyboard, empty, loading, sorting, filtering, pagination, and virtualization locally.
Formats: TypeScript, JavaScript
Caution: Headless does not include accessible table design, mobile reflow, or batch-action preview.

tanstack-tableTanStack TableComponentMITOpen resource ComponentOpen resource

TanStack Virtual

When list size affects performance, agents can use TanStack Virtual to render only visible items; also record scroll owner, item measurement, focus retention, and screen-reader alternatives.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: TanStack Virtual
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install the framework adapter, define a measured scroll container, stable item keys, overscan, dynamic-size strategy, and keyboard/focus behavior before using it in tables or feeds.
Formats: TypeScript, JavaScript
Caution: Virtualization affects browser find, screen-reader continuity, anchors, printing, and SEO; provide alternatives.

tanstack-virtualTanStack VirtualComponentMITOpen resource MotionOpen resource

Embla Carousel

When an agent needs a carousel, use Embla for drag and snap behavior; add visible controls, aria/current-page text, pause logic, and stable mobile sizing.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Embla Carousel
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install the framework adapter, use semantic slide markup, expose previous/next controls, pagination state, keyboard support, reduced-motion behavior, and no-autoplay default unless user-controlled.
Formats: TypeScript, JavaScript
Caution: Carousels can hide content and create accessibility risk; avoid autoplay by default.

embla-carouselEmbla CarouselMotionMITOpen resource ComponentOpen resource

cmdk

When generating a command palette, use cmdk for composable command lists and filtering; add command semantics, permissions, empty/loading states, shortcut display, and execution feedback.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: cmdk
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `cmdk`, compose it inside a local dialog/sheet, and define command grouping, empty state, keyboard help, search indexing, permissions, and route/action side effects.
Formats: TypeScript, JavaScript
Caution: cmdk does not replace command information architecture; grouping, synonyms, recents, permissions, and dangerous-action confirmation still need design.

cmdkComponentMITMIT LicenseOpen resource ComponentOpen resource

Sonner

When an agent needs toast feedback, Sonner is a useful implementation resource; important errors, validation, batch results, and security events need persistent surfaces too.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Sonner
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `sonner`, mount one Toaster near the app root, and map toast variants to local tokens, live-region expectations, undo actions, and durable error surfaces.
Formats: TypeScript, JavaScript
Caution: Toasts are transient and should not carry required reading, recovery, or audit states.

sonnerSonnerComponentMITOpen resource ComponentOpen resource

react-dropzone

Retrieve react-dropzone when an agent needs a customizable dropzone rather than a full uploader suite; it handles selection/drag interaction, not server validation, upload queues, progress, or error recovery.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: react-dropzone
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `react-dropzone`, use `getRootProps` and `getInputProps` together, keep the native file input in the DOM, and implement upload, validation, progress, retry, and cleanup locally.
Formats: TypeScript, JavaScript, React
Caution: It is not an upload client; implement endpoint, progress, cancel, retry, and security validation separately.

react-dropzoneComponentMITMIT LicenseOpen resource ComponentOpen resource

Uppy

Retrieve Uppy when an agent needs a complete upload product experience rather than one dropzone; choose the smallest plugin set and define restrictions, privacy boundary, Companion deployment, upload backend, and local state mapping.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Uppy
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `@uppy/core` plus only needed UI and uploader plugins such as `@uppy/react`, `@uppy/dashboard`, `@uppy/tus`, or `@uppy/xhr-upload`; self-host Companion when remote providers are used.
Formats: TypeScript, JavaScript, React, CSS
Caution: Dashboard and remote sources add visual, dependency, and privacy complexity; avoid overusing it for simple avatar upload.

uppyUppyComponentMITOpen resource ComponentOpen resource

FilePond

Retrieve FilePond when an agent needs a fuller upload component than native input but a lighter suite than Uppy; record plugins, server contract, style overrides, image processing, and accessible states.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: FilePond
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `filepond` plus the framework adapter and only needed plugins such as file type/size validation or image preview; separate FilePond MIT code from optional paid image-editing products.
Formats: JavaScript, TypeScript, React, Vue
Caution: Check plugin and image-editing dependencies and licenses item by item; products such as Pintura are separate from FilePond MIT.

filepondFilePondComponentMITOpen resource ComponentOpen resource

tus-js-client

Retrieve tus-js-client when an agent needs reliable resumable uploads; it is a protocol client, not a complete UI, and must be combined with dropzone, queue UI, tus server, and permission validation.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: tus-js-client
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `tus-js-client`, pair it with a tus-compatible server endpoint, persist upload fingerprints carefully, and surface pause/resume/error/progress states in the local uploader UI.
Formats: JavaScript, TypeScript, HTTP
Caution: Requires a tus-compatible server plus CORS/auth strategy; the client library alone is not an upload product.

tus-js-clientComponentMITMIT LicenseOpen resource MotionOpen resource

Rough Notation

When an agent wants a handwritten annotation effect, use Rough Notation for short decorative emphasis; do not make the animation the only carrier of meaning.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Rough Notation
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `rough-notation` or a framework wrapper, annotate only short text targets, expose reduced-motion/static emphasis, and keep semantic emphasis in HTML/CSS.
Formats: TypeScript, JavaScript, SVG
Caution: Not suitable for dense admin UIs, long body copy, or serious compliance interfaces.

rough-notationRough NotationMotionMITOpen resource Data VisualizationOpen resource

Mermaid

When an agent needs maintainable process, architecture, state, or data-relationship diagrams in docs, prefer Mermaid; user-authored definitions need safe-mode and escaping strategy.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Mermaid
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `mermaid`, pin the major version, render only trusted or sanitized definitions, and pair complex diagrams with text summaries or table fallbacks.
Formats: Markdown, JavaScript, SVG, HTML
Caution: Do not render untrusted input directly as SVG/HTML; configure security level, escaping, and sanitization.

mermaidMermaidData VisualizationMITOpen resource IllustrationOpen resource

Excalidraw

When an agent needs sketch-like whiteboard composition rather than precise UI mockups, Excalidraw is suitable; imported libraries or brand graphics still need per-item license checks.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Excalidraw
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `@excalidraw/excalidraw` for embedded React whiteboards, keep `.excalidraw` source files, verify imported community libraries item-by-item, and separate Excalidraw+ service terms from MIT code.
Formats: TypeScript, JavaScript, JSON, SVG
Caution: Excalidraw+, hosted collaboration, and cloud service terms are separate from the repository's MIT code license.

excalidrawExcalidrawIllustrationMITOpen resource ComponentOpen resource

tldraw

When an agent needs a production-grade infinite-canvas SDK, evaluate tldraw; first confirm trial/commercial/hobby license, license key, trademark, and data-collection boundaries.

Licensetldraw SDK LicenseCommercialConditionalRiskMedium riskCreditCheck per asset

Resource: tldraw
License: tldraw SDK License
Commercial: Conditional
Risk: Medium risk
Credit: Check per asset
Get: Install `tldraw` for SDK exploration, but add a valid trial, commercial, or hobby license key before production; do not classify the SDK as permissive open source.
Formats: TypeScript, JavaScript, CSS, JSON
Caution: The SDK default terms permit development use only; production requires a valid license key.

tldrawComponenttldraw SDK Licenseinfinite canvas SDKOpen resource ComponentOpen resource

React Flow / xyflow

When an agent needs draggable nodes, edges, handles, minimap, controls, and custom React nodes, React Flow is a strong default; complex auto-layout still needs a layout engine.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: React Flow / xyflow
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `@xyflow/react`, model nodes and edges as app data, define keyboard/selection affordances, and treat React Flow Pro examples/support as a separate paid boundary.
Formats: TypeScript, JavaScript, CSS, SVG
Caution: React Flow Pro examples, priority support, and subscription services are separate from the MIT core.

react-flowReact Flow / xyflowComponentMITOpen resource IllustrationOpen resource

RoughJS

When an agent needs programmatic sketch-like graphics rather than a full whiteboard editor, use RoughJS; make output reproducible and keep semantics in text or data.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: RoughJS
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `roughjs`, choose Canvas or SVG output, fix seeds/options for repeatable renders, and keep semantic meaning in labels, captions, or data structures.
Formats: JavaScript, Canvas, SVG
Caution: Sketchiness is a visual tone, not a substitute for information architecture or data accuracy.

roughjsRoughJSIllustrationMITOpen resource Data VisualizationOpen resource

Nivo

When an agent needs quick React charts without building from D3 primitives, use Nivo; add source, unit, legend, empty states, accessibility alternatives, and performance boundaries.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Nivo
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install only needed `@nivo/*` packages, choose SVG/Canvas/HTML rendering per data size, and define theme, legends, aria labels, table fallback, and SSR boundaries locally.
Formats: TypeScript, JavaScript, SVG, Canvas
Caution: Strong React binding makes it less suitable outside React.

nivoNivoData VisualizationMITOpen resource IconOpen resource

Feather Icons

When a project lacks a primary icon set and needs simple line icons, Feather is a lightweight candidate; if Lucide/Tabler already exists, do not mix without normalization.

LicenseMIT LicenseCommercialCommercial OKRiskLow riskCreditKeep license notice

Resource: Feather Icons
License: MIT License
Commercial: Commercial OK
Risk: Low risk
Credit: Keep license notice
Get: Install `feather-icons` or copy selected SVGs, normalize 24px viewBox/2px stroke/currentColor, and wrap icon-only buttons with accessible labels.
Formats: SVG, JavaScript
Caution: Smaller set than large icon libraries, so niche domain icons may be missing.

feather-iconsFeather IconsIconMITOpen resource WorkflowOpen

Project Asset Intake

Bring images, links, and text references into the creation agent so generation works from real material.

Upload project references, then bind every asset to a clear region role before generation.Open DocsOpen

Asset Workflow Docs

Read how uploads, extraction, node sync, and generation connect inside the project workspace.

Use asset summaries as structured context, not loose inspiration.Open

Interface Lab Library

Assets connect real visual material to the project workflow.

Assets

Aura Asset Images

Landing Page Quality Assets

Component Library Fit Intake

Stock Video Hero Background

Asset License Intake

Asset Attribution Credit Surface

Font Delivery Governance

Icon Source Governance

Brand Logo Usage Audit

Generated Asset Provenance

Photo and 3D Asset Citation Intake

Google Fonts

Fontsource

Bunny Fonts

Inter

Noto Sans / Noto CJK

Geist

Mona Sans

Hubot Sans

Public Sans

IBM Plex

Atkinson Hyperlegible

Lexend

Readex Pro

B612

JetBrains Mono

Commit Mono

Monaspace

Source Sans 3

Source Han Sans

LXGW WenKai

Fraunces

Manrope

Space Grotesk

Lucide Icons

Heroicons

Iconify Icon Sets

Simple Icons

SVG Repo

Material Symbols

Radix Icons

Tabler Icons

Phosphor Icons

Iconoir

Bootstrap Icons

MingCute Icons

IconPark

Font Awesome Free

Carbon Icons

Fluent UI System Icons

Noto Emoji

Game-icons.net

Fluent Emoji

Open Props

Radix Colors

Radix Themes and Colors

Radix Primitives

React Aria Components

shadcn/ui

Headless UI

Shiki

PrismJS

Sandpack

Swagger UI

Redoc

Scalar API Reference

AI Elements

assistant-ui

tool-ui

Apple HIG Materials and Liquid Glass

MDN backdrop-filter reference

Material Web

Fluent UI React

Carbon Design System

Spectrum Web Components

WAI-ARIA Authoring Practices Guide

axe-core