AI Guide · Design resources
Sites built with AI often end up looking alike. Use these resources to keep yours from looking generic: ready-made components, animation, 3D, fonts and icons. Click a card to see how to use it with AI.
220 resources · information read from each source on October 8, 2026.
The backbone of sites built with AI: the most widely used and recommended component libraries, CSS frameworks and small UI helpers. At the end of the shelf, a few copy-paste component sites, listed with their restrictions.
A CLI and component set that copies components into your project as source code rather than installing them as a package. Since July 2026, Base UI has been the default foundation for new projects; Radix and React Aria can also be selected.
For: Anyone building a site or app with React + Tailwind who wants to own the code; the default stack of AI tools
The Vue/Nuxt port of shadcn/ui: with the same copy-and-own model, its CLI adds components to your project (built on Reka UI).
For: Anyone working with Vue 3 / Nuxt who wants the shadcn look
The Svelte/SvelteKit port of shadcn/ui; its CLI copies Bits UI-based components into your project, and it offers its own registry system.
For: Anyone working with Svelte / SvelteKit
Unstyled, accessible React building blocks (dialog, menu, popover…); you supply the look. For a long time the foundation of shadcn/ui. Maintained by WorkOS.
For: React developers building their own design system; existing shadcn (Radix) projects
Unstyled, accessible React components from the teams behind Radix, Floating UI, and MUI. The default foundation of shadcn/ui since July 2026.
For: Anyone starting a new React project, adopting shadcn's current default, or building their own design system
Adobe's unstyled React component and hook library, the most comprehensive one for accessibility and internationalization (dates, numbers, right-to-left). shadcn/ui and HeroUI v3 can be built on top of it.
For: App developers who take accessibility and multilingual/date-time components seriously
Unstyled, accessible React and Vue components from the Tailwind team (menu, listbox, dialog, combobox…); designed to be styled with Tailwind classes.
For: React/Vue developers who use Tailwind and need a small number of interactive components
Unstyled, accessible components from the Chakra team; the same API works in React, Vue, Solid, and Svelte (Zag.js state machines).
For: Anyone who wants the same component behavior across multiple frameworks or is building their own design system
Not a set of ready-made components but a CSS framework for writing styles directly in HTML/JSX with utility classes (utility-first); at build time it generates only the classes you use. v4 uses CSS-first configuration (@theme).
For: Almost everyone: AI tools and kits like shadcn, daisyUI, Flowbite, and Preline are built on it
A Tailwind plugin: provides ready-made component styles with semantic class names like `btn`, `card`, and `modal`, plus 30+ ready-made themes; requires no JavaScript and works with any framework.
For: Anyone who wants a fast, themed UI without long chains of Tailwind classes; people writing framework-independent HTML
Copyable HTML component examples built on Tailwind, plus a small JS package that makes them work; has React, Vue, Svelte, and Angular integrations.
For: Anyone who wants ready-made Tailwind components independent of any framework (plain HTML included)
Flowbite's paid set of blocks, application UI, and Figma files; copied into your project and adapted.
For: Agencies/freelancers who need a large number of ready-made page blocks with Flowbite
640+ ready-made component and block examples on Tailwind, plus the JS plugins that power them (datepicker, table, editor…); works with plain HTML and all frameworks.
For: Anyone who wants ready-made, corporate-looking blocks with Tailwind; plain HTML or any framework
Preline's paid set of 780+ blocks, 21 templates, AI prompts, and animated icons; copied into your project and adapted.
For: Freelancers/teams who want lots of ready-made pages and templates with Preline
The classic CSS framework with a ready-made grid, component classes, and a small JS package; works even from a CDN, without a build tool.
For: Anyone building sites quickly without a build tool, working on the WordPress/PHP side, or maintaining older projects
A pre-styled, themeable React component set built on Radix Primitives; does not require Tailwind.
For: Anyone who wants a tidy, clean-looking React UI without using Tailwind
A "batteries-included" React library with a large number of components and hooks; areas like forms, dates, notifications, and charts live in separate @mantine/* packages.
For: React developers building admin panels, SaaS, or form-heavy apps who want everything from one place
One of the most widely used React component libraries, implementing Google's Material Design; the core is free (MIT), while advanced table/chart/date components are in the separate, paid MUI X.
For: React teams building enterprise/admin apps who are fine with the Material look
The paid tiers of MUI's advanced data table (Data Grid), date/time picker, chart, and tree components; the base versions are MIT, while Pro/Premium features require a license key.
For: Enterprise React apps that need large data tables (virtualization, grouping, Excel export)
An accessible, ready-made React component system that works with style props and design tokens; v3 is built on Ark UI.
For: React developers building SaaS and dashboard UIs who prefer in-component style props to Tailwind
330+ paid blocks and templates written with Chakra UI; copied into your project and adapted.
For: Chakra UI users who want ready-made page blocks
React components built on Tailwind v4 and React Aria that look polished out of the box; v3 also has a React Native library.
For: React/Next.js developers who want a modern, animated look with little customization
HeroUI's paid package of Pro components, templates, design systems, and Pro AI (skills + MCP); for web, mobile, or both.
For: Teams building products with HeroUI who want ready-made templates/Pro components
A Vue library with 125+ components built on Reka UI and Tailwind; in v4, the formerly paid Nuxt UI Pro components and templates joined the free package. Also works in Vue without Nuxt.
For: Anyone building a site, dashboard, or SaaS with Vue / Nuxt
A comprehensive Vue component library (data table, tree, calendar, forms…). With v5 it moved to the PrimeUI commercial license.
For: Anyone building enterprise, data-heavy Vue apps; individual developers and small teams who qualify for the community license
A comprehensive React component library (DataTable, tree, calendar, forms…). With v11 it moved to the PrimeUI commercial license.
For: Anyone building enterprise, data-heavy React apps; individual developers and small teams who qualify for the community license
Ant Group's enterprise UI design language and comprehensive React component library; especially for forms, tables, and admin panels.
For: React developers building form/table-heavy admin panels and internal tools
A comprehensive Vue component framework based on Material Design; layout, forms, tables, and theming are all included.
For: Anyone building a Material-style app or dashboard with Vue
An animated notification (toast) component you add with a single line; shadcn/ui's toast uses it.
For: Anyone adding fast, polished notifications to a React app
An unstyled command menu / searchable list (⌘K) React component; it filters and sorts items automatically. shadcn/ui's Command component uses it.
For: React developers adding a command palette or searchable select box to their app
A dependency-free, lightweight carousel engine; has React, Vue, Svelte, and Solid wrappers. shadcn/ui's Carousel component uses it.
For: Anyone who needs an image/product carousel and doesn't want a heavy slider plugin
Cal.com's design system: copy-and-own components and "particle" examples built on Base UI + Tailwind; the successor to Origin UI (originui.com redirects here). Installed with the shadcn CLI.
For: React developers who want shadcn-style components with a different look, focused on production apps
7,450 small UI elements shared by the community (buttons, loading animations, cards, forms…); copied as HTML/CSS, Tailwind, React, or Figma.
For: Anyone looking for a single eye-catching button/loader/card; people who want framework-independent plain CSS
shadcn-compatible, animated landing page components (marquee, globe, bento grid, shimmering buttons, text animations); copied with the shadcn CLI.
For: React + Tailwind users who want to add eye-catching effects to a promo/landing page
Magic UI's paid set of 50+ landing sections and 9+ ready-made templates (React, Next.js, Tailwind, Framer Motion).
For: Founders/freelancers who want to ship landing pages fast
112+ flashy animated components written with Tailwind + Framer Motion (3D cards, glow, beam effects…); copied with the shadcn CLI.
For: React/Next.js users who want a "wow" effect on their landing page
Aceternity's paid set of 200+ blocks, 12+ templates, and full landing pages; copied and adapted.
For: Agencies/freelancers who want lots of flashy landing blocks
An open-source collection of React components for animated text, backgrounds, cursors, and 3D/shader effects; copied in CSS or Tailwind and JS or TS variants.
For: React users who want to add distinctive animated effects (text, backgrounds) to their site
React Bits' paid tier: 230 animated components, 300 page blocks, 300 app UI blocks, an agent kit, and 15 landing templates (depending on the tier).
For: Anyone who wants to build animated landing pages and app UIs from ready-made blocks
A marketplace of 12,000+ community-published React/Tailwind components, templates, and themes; preview and copy the TSX, or install with the shadcn CLI / 21st MCP.
For: Anyone looking for ready-made components for a shadcn-based project who wants to do it from an AI agent
A catalog of ready-made page blocks (hero, pricing, FAQ…) built on shadcn/ui; free blocks install from the public shadcn registry. Radix, Base UI, or React Aria can be chosen as the foundation.
For: Anyone who wants to quickly add landing sections to a shadcn project
shadcnblocks' paid set of 2,151+ components, 1,983+ blocks, templates, Figma files, and an admin kit.
For: Agencies/freelancers building many client sites with shadcn
Ready-made animated React components built with Motion and Tailwind: text effects, scrolling, transitions, accordion, dock. Add them to your project with a command or by copying; the code becomes yours.
For: Anyone who wants to add light, smooth motion to a React + Tailwind site
Free UI and 3D blocks extracted from real sites (menu, announcement bar, chart, 404, audio sphere); each installs with a single line, or its code can be copied.
For: Anyone who wants to add ready-made, animated individual blocks to their site
Sites built with AI keep coming out with the same purple gradient, the same typeface and the same card layout. Color, theme and font tools, plus guides on giving AI design references.
Design skills you install in Claude Code or Codex are on the Repositories page.
A visual theme editor that changes a shadcn/ui theme's colors, fonts, corner radius and shadows with a live in-browser preview. Exports the result as CSS variables or a shadcn registry command.
For: Anyone building with shadcn/ui + Tailwind who wants to move past the default black-and-white/purple look
tweakcn's paid tier: unlimited AI theme generation, AI theme extraction from images (e.g., screenshots) and unlimited saved themes.
For: Anyone who wants to quickly pull a shadcn theme from a screenshot or brand image
shadcn/ui's official visual setup page: preview colors, corner radius, font and icon set, then generate a single preset code. The old /themes address now redirects here.
For: Anyone using shadcn/ui who wants to start a project with something other than the default look
A color system that provides every color as an accessible 12-step scale with light and dark modes. The "Custom palette" page generates a scale with the same structure from your own brand color.
For: Anyone who wants a consistent, contrast-aware color system instead of random hex codes
A tool for picking colors in OKLCH and converting HEX/RGB/HSL to OKLCH; shows the P3 wide color gamut and the sRGB fallback. Since Tailwind v4 and shadcn themes use OKLCH, it helps you read and hand-tune those values.
For: Anyone who wants to understand and change the oklch(...) values in a Tailwind v4 / shadcn theme
An open-source Adobe tool that generates colors from target contrast ratios and builds accessible color systems for light and dark themes. Also includes data visualization scales and color evaluation tools.
For: Anyone who wants to keep their brand color and derive accessible (WCAG 2 / APCA) theme colors from it
A palette tool that generates matching palettes at the press of the spacebar, extracts colors from images, checks contrast and previews palettes on sample designs.
For: Anyone who wants to quickly try different palettes instead of the default purple-blue
Coolors' paid tier: ad-free use, auto-generated palettes with more than 5 colors, unlimited saves, Coolors AI color chat and advanced export.
For: Anyone who uses Coolors regularly and saves palettes project by project
A tool that generates a Tailwind CSS-compatible 50-950 color scale from a single brand color and shows it in sample designs such as cards, dashboards and shadcn/ui components. Also offers a shadcn/ui theme generator and a Figma plugin.
For: Anyone using Tailwind who wants to turn a brand color into a full scale
UI Colors' paid tier; unlocks locked features such as custom font selection.
For: Anyone who uses UI Colors often to build a brand color system
Calculators (type, space, grid, clamp) that generate CSS clamp() values for type and spacing scales that grow fluidly with screen width. There is also a Figma plugin.
For: Anyone who wants heading sizes and spacing to keep the same proportions on every screen
A tool that builds a type scale from headings down to small text based on the ratio you choose (e.g., 1.250 Major Third), previews it with Google Fonts and outputs CSS.
For: Anyone who wants to tie heading and body text sizes to a single ratio
Ready-made, categorized font-family stacks (transitional serif, old style, geometric, humanist…) built from fonts already on the operating system, with no font downloads.
For: Anyone who wants to move beyond Inter/Roboto without adding font-loading cost
A site that shows curated heading + body pairings of Google Fonts and Fontshare fonts on sample pages and provides the CSS.
For: Anyone looking for two free fonts that go well together instead of Inter
Fontpair's paid tier: all 500+ pairings, unlimited favorites/collections, a Chrome extension and export of your chosen font + color system as a ready-made prompt for Cursor, Lovable, v0, Bolt, Replit, Windsurf and Claude Code.
For: Anyone who wants to carry font and color decisions straight into a vibe coding tool
A "Site of the Day" archive showing which fonts real websites use, plus font lists (e.g., Helvetica alternatives, best Google Fonts) and typography guides.
For: Anyone who wants inspiration from real examples when choosing fonts
A guide that collects psychology principles used in interface design, such as Fitts's Law, Hick's Law and Jakob's Law, with short explanations and visuals.
For: Developers and founders who want to give the AI a "why design it this way" rationale
A book (218-page PDF) and video set of concrete interface design tactics for non-designer developers, written by Tailwind CSS creators Adam Wathan and Steve Schoger.
For: Anyone who says "I'm a developer, not a designer" and wants to learn how to make hierarchy, spacing and color decisions
Anthropic's official guide: a ready-made prompt block with typography, color, motion and background guidelines, to add to a system prompt or CLAUDE.md, that keeps Claude from drifting into generic designs that look "AI-made."
For: Anyone building sites with Claude (Claude Code, API)
A section of Anthropic's per-model prompting guides: explains that the model has a persistent "house style" (for Opus 4.8, cream backgrounds and serif headings) and two reliable ways to break it: describe a concrete alternative, or ask it to propose options before coding.
For: Anyone who has noticed Claude keeps producing designs that look the same
OpenAI's official frontend prompting guide and blog post: define the design system up front, set the visual frame with a screenshot or mood board, and set hard rules like "don't use cards by default."
For: Anyone building sites with GPT/Codex
The official guide to teaching v0 your own design system once (GitHub repo, Figma frames, screenshots, Storybook link) so it generates with the same components and colors in every chat.
For: Anyone using v0 who wants to keep the same brand in every new chat
Lovable's official docs: preview three different design directions before building, answer typography/color/layout questions, and steer the look with style words like "minimal, cinematic, premium."
For: Founders who don't code and build sites with Lovable
Figma's official help article: explains how to write short, imperative rules in a guidelines/ folder (Guidelines.md, tokens.md, styles.md, component files) so Figma Make generates in line with your design system.
For: Anyone using Figma Make or wanting to write a design rules file for the AI
Ready-made DESIGN.md files capturing the color, font, spacing and component rules of well-known sites. Put one in your project root and the coding agent builds an interface in that visual language.
For: Anyone building sites with Claude Code, Codex or Cursor who wants to escape the same-looking design
getdesign.md's paid offering: a monthly Catalog Pass (40 curated DESIGN.md files, 5+ new each month), a DESIGN.md custom-made for your site and web/mobile starter kits.
For: Anyone who wants a ready-made design file and skeleton code for their own or a client's site
A Chrome extension that extracts the colors, fonts, measurements and images of the site you have open and exports them as Tailwind, shadcn, CSS variables or DESIGN.md.
For: Anyone who wants to quickly extract the palette and fonts of a reference site they like
Woblo's paid plans: more file downloads, design system export and page copies.
For: Anyone who uses Woblo daily to extract references
Motion and 3D libraries, plus free 3D model sources. Where it can be measured, the card shows how much weight a library adds to the page (the compressed size of its JavaScript package).
A UI animation library for React, Vue, and plain JavaScript: enter/exit, scroll-linked, drag, and layout animations.
For: Anyone building a site or app with React/Next.js who wants smooth, component-level motion.
Motion's paid package: 460+ examples, ready-made premium components (carousel, number animation, custom cursor, typewriter, etc.), Motion UI sections, and extra pieces for the AI Kit.
For: Developers or teams using Motion who want to save time with ready-made premium components and examples.
A framework-agnostic JavaScript animation engine: timelines, scroll-linked animation (ScrollTrigger), SVG, text splitting (SplitText), and drag plugins.
For: Anyone who wants scroll-driven storytelling, complex timelines, or animation on a framework-free (vanilla/WordPress/Webflow) site.
A lightweight, modular JavaScript animation engine: timeline, scroll, and drag APIs for CSS properties, SVG, DOM attributes, and JS objects.
For: Anyone who doesn't want GSAP's proprietary license and is looking for an MIT-licensed, framework-free animation engine.
Adds automatic transition animations when list items are added, removed, or reordered, with a single line of code.
For: Beginners who want to add motion to lists, cards, accordions, and similar UI without writing animations.
A spring-physics-based React animation library; it produces natural motion from physics parameters instead of durations, and also works with React Three Fiber.
For: Anyone who wants physics-based, interruption-resilient animation in a React project, or who animates R3F scenes.
A smooth scroll library; used to sync scrolling with GSAP ScrollTrigger or WebGL scenes.
For: Anyone building a promo or portfolio site with scroll-linked animation.
The official LottieFiles player for Lottie (.json) and dotLottie (.lottie) animations on the web; Rust + WASM core, Canvas2D/WebGL/WebGPU rendering. React wrapper: @lottiefiles/dotlottie-react.
For: Anyone who wants to put vector animations from After Effects/LottieFiles (icons, loaders, success animations) on their site.
A library of free, community-shared Lottie animations (loaders, checkmarks, errors, icons, etc.); downloadable as .json or .lottie.
For: Anyone looking for ready-made micro-animations without drawing their own.
An interactive vector animation tool and player with state machines; the .riv file drawn in the editor runs on the web via a WASM runtime.
For: Designer-developer pairs who want character, button, or icon animations that respond to mouse or touch.
Paid plans for the Rive editor: export without the splash screen, unlimited files; Voyager adds libraries, CDN, and embed-link hosting.
For: Anyone who wants to ship Rive animations without the branded splash screen.
Community-shared Rive files that can be opened and remixed in the editor.
For: Anyone looking for interactive animation starter files instead of drawing from scratch.
The foundational JavaScript library for drawing 3D graphics in the browser with WebGL and WebGPU: scenes, cameras, lights, materials, and glTF model loading.
For: Anyone who wants a 3D hero section, product viewer, or interactive scene; R3F, Threlte, and TresJS are built on top of it.
A React renderer that lets you write Three.js with React components.
For: Anyone adding a 3D scene to a React/Next.js project; 3D that fits the React output of AI tools.
Ready-made helpers for React Three Fiber: camera controls, environment lighting, text, glTF loading, shadows, scroll controls, and more.
For: Anyone who wants to set up scenes quickly with R3F.
A framework for writing Three.js with Vue components (the Vue counterpart of R3F).
For: Anyone adding a 3D scene to a Vue/Nuxt project.
An open-source 3D framework for writing Three.js with Svelte components.
For: Anyone adding a 3D scene to a Svelte/SvelteKit project.
A full-featured web 3D/game engine backed by Microsoft: WebGL/WebGPU, physics, audio, XR, and node-based material and animation editors.
For: Large 3D projects that need engine features, such as games, configurators, or XR.
An open-source web 3D engine (WebGL2/WebGPU); React and Web Components wrappers, a collaborative editor that runs in the browser, and Gaussian splat support.
For: Anyone building games, product configurators, or 3D scan (splat) viewers.
A web component that shows a rotatable glTF/GLB 3D model on the page with a single HTML tag; supports AR (viewing the model in your real surroundings on mobile).
For: E-commerce and marketing sites that want to show a product model without writing 3D code.
A tool for designing interactive 3D scenes without code, in the browser or on desktop; a published scene is embedded on the web with the runtime or a React component.
For: Designers and vibe coders who want interactive 3D in a hero section without knowing 3D code.
Paid plans for the Spline editor: watermark-free web export, AI generation credits, code export and glTF/USDZ on Pro, and self-hosting on Enterprise.
For: Anyone who wants to publish Spline scenes without a watermark or from their own server.
3D scenes and objects shared by Spline users that can be copied (remixed) and edited.
For: Spline users who want to start from a ready-made 3D scene.
A no-code WebGL effects editor: layer 75+ animated effects such as gradients, particles, and distortion, and publish them as a scene you can embed on your site.
For: Designers and Framer/Webflow users who want an animated WebGL background in their hero section.
Unicorn Studio's paid plan: commercial license, unlimited watermark-free publishing, JSON export, custom 3D models/fonts, hosting, and CDN.
For: Anyone who will use Unicorn Studio effects on a client or company site.
A library of free HDRIs (environment lighting), textures, and 3D models; all human-made and CC0.
For: Anyone looking for realistic lighting, ground textures, or models for a Three.js/R3F scene.
A CC0-licensed library of PBR materials/textures, HDRIs, and models.
For: Anyone looking for realistic surface textures (wood, concrete, fabric) for a 3D scene.
Free 2D/3D game assets: low-poly model kits, icons, UI packs, audio.
For: Anyone building simple 3D scenes, gamification, or game prototypes.
Free low-poly 3D model packs, most of them animated (characters, nature, city); glTF, FBX, OBJ, Blend.
For: R3F/Three.js users who want animated characters or low-poly scenes.
A large 3D model sharing and viewing platform; some models are downloadable, and each model carries its own license.
For: Anyone looking for a ready-made 3D model of a specific object.
A free Adobe service that applies automatic rigging and ready-made motion animations (walking, dancing, waving) to 3D characters.
For: Anyone who wants a moving human character in a Three.js/R3F scene.
A 2D physics engine for the web: builds realistic motion with objects that fall, collide, stack, and get dragged.
For: Anyone who wants to add playful, physics-based motion to their site or HTML-based video
A React component that shows nine waiting states such as 'working, searching, listening' in an AI or chat interface with a dotted-sphere animation; it adapts to light/dark themes on its own.
For: Anyone adding an AI assistant or chat box to their site or app
Animated 3D gradient backgrounds whose color, speed, and shape you adjust. You use the result as a React component, a Framer component, or a Figma plugin.
For: Anyone who wants an animated, eye-catching background for their site or presentation
In-browser GIF and video tools. It extracts 1–30 JPG frames per second from a video and gives you all of them as a zip; useful for preparing a frame sequence for a product animation that plays as you scroll.
For: Anyone preparing a frame sequence for an 'Apple-style' product animation that plays as you scroll
Free font, icon and image sources; every card notes what to watch for in commercial use. For fonts, Turkish character support (ğ, ş, ı, İ) is listed separately.
About 1,950 free, openly licensed font families; link them via CDN or download them and self-host on your own server.
For: Anyone who wants a free font that is cleared for commercial use; the most searched-for font source in Turkey.
Ships Google Fonts families and other open-source fonts as npm packages; the font is bundled with your project and served from your own server.
For: Anyone who wants to use a font in a React/Vite/Next.js project without linking to Google's CDN, with the version pinned.
An EU-based, no-logging mirror of the Google Fonts catalog; just swap the domain in the link.
For: Site owners who want to load fonts from a CDN without sending visitor IP addresses to Google.
Indian Type Foundry's free font service: 100 professional families, via CDN or download.
For: Designers and developers looking for a distinctive display font that sets them apart from Google Fonts.
An independent Italian open-source type collective; 16 families, all free under the OFL.
For: Anyone looking for a distinctive display font to move away from AI's default fonts (Inter, Space Grotesk).
An open-source set of 1,800+ icons (1,869 SVGs in the repo) in a consistent stroke style, forked from Feather; packages for React, Vue, Svelte, and plain JS.
For: Anyone working with shadcn/ui and building sites with AI; it is shadcn's default icon library.
The Tailwind CSS team's set of 324 icons (24 px outline); available in outline, solid, mini, and micro sizes.
For: Projects built with Tailwind CSS where a small, simple icon set is enough.
A large, frequently updated open-source set of more than 6,200 outline and filled icons (6,238 SVGs in the repo).
For: Anyone building dashboards or admin interfaces who wants a broad set for icons Lucide doesn't have.
A flexible icon family that ships every icon in six weights (thin, light, regular, bold, fill, duotone).
For: Projects that want different visual weights from a single set and a look that differs from Lucide.
Gives you 239 open-source icon sets (380,955 icons) through one API and one component; there is also a Tailwind plugin.
For: Anyone who wants to choose from several icon sets and work with set name + icon name.
The free tier of the most widely used icon set: core UI icons and brand logos, as SVG, JS, and web font.
For: Projects that need brand/social media logos, or that come from a Bootstrap/WordPress background.
All of Font Awesome's Pro icons and styles (duotone, sharp, etc.), the icon wizard, and custom icon uploads.
For: Teams committed to Font Awesome that want a wider range of styles and icons.
Google's variable-font icon set of around 3,900 icons, with fill, weight, and optical size axes.
For: Anyone who wants a Material Design / Android feel, or to load icons from Google Fonts with a single line.
A neutral UI set of 3,200+ icons (3,229 SVGs in the repo) in outline and filled pairs; web font, SVG, and a React package.
For: Anyone who wants outline/filled icon pairs, or who picks a set other than Lucide in shadcn.
332 crisp, small UI icons drawn on a 15×15 grid.
For: Anyone building dense interfaces with Radix UI or the older shadcn "new-york" style.
6,000+ free "stroke rounded" icons; packages for React, Vue, Svelte, Angular, React Native, and Flutter.
For: Anyone who wants a broader, different-looking set than Lucide in shadcn.
60,000+ icons in 10 styles; Figma source files, custom icon sets, and a CDN web font.
For: Teams that use Hugeicons widely in their product and need every style.
An independent open-source set of 1,300+ thin-stroke icons (1,383 SVGs in the repo); React, Vue, React Native, Flutter, and CSS.
For: Anyone who wants light stroke icons similar to Lucide but with a different character.
Single-color SVGs and official brand colors for 3,400+ brand logos (3,465 SVGs in the repo).
For: Sites that show "technologies we use", integration, or social media logos.
Bundles 31 sets such as Font Awesome, Material, Heroicons, and Lucide into a single React package.
For: React developers who want to use icons from different sets with one import style.
The Bootstrap team's 2,000+ SVG icons (2,078 in the repo) and web font; works without Bootstrap too.
For: Anyone building sites with Bootstrap or plain HTML/CSS.
9,700 free animated icons; Lottie-based, played via a web component or React.
For: Sites that want animated icons on buttons and in empty states.
38,100 PRO animated icons, attribution-free use, and collections.
For: Anyone who wants to use animated icons in their product without attribution.
More than 18 million icons and stickers; PNG downloads with a free account.
For: Anyone in Turkey searching for "free icon downloads" and making presentations or social media graphics.
Use all Flaticon icons as SVG/EPS/PSD without attribution, with 2,000 downloads per day; also removes the attribution requirement on Storyset illustrations.
For: Anyone who wants to use Flaticon icons in client work without attribution and in vector format.
An archive of high-resolution photos shared for free by photographers; official API and JS client.
For: Anyone looking for free photos for a site hero, blog cover, or background.
Members-only photos, unlimited downloads, cropping/background removal, and legal protection.
For: Agencies and brands that want copyright protection.
A free photo and video archive; free API.
For: Anyone looking for free photos, and especially videos, for websites and social media.
An archive of free photos, vectors, illustrations, videos, and music; free API.
For: Anyone searching for "royalty-free images" with a Turkish-language interface, and who also needs vectors and illustrations.
An archive of vectors, photos, PSDs, and templates; Freepik now uses the name Magnific (page title "Magnific (formerly Freepik)"); freepik.com redirects.
For: A vector/PSD source widely used in Turkey; for anyone designing presentations and social media graphics.
250 million+ Premium assets, attribution-free use, and AI image/video generation credits.
For: Designers and agencies that want stock images + AI generation in a single subscription.
16,000+ free AI-generated stock images; filter by color, lighting, and orientation.
For: Anyone who wants an original-looking hero image instead of cliché stock photos.
The entire library watermark-free, ultra resolution, reframing, background removal, and 60 AI credits per month.
For: Anyone who wants to use Lummi images at high resolution and edit them.
An archive of flat SVG illustrations whose color you can choose on the site.
For: Anyone who wants free illustrations for landing pages, empty states, and 404 screens.
Editable, animatable illustrations from the Freepik/Magnific company; colors and layers are changed on the site.
For: Anyone who wants animated illustrations for presentations, training, and landing pages.
2D/3D illustration, icon, and animation packs; some of them free.
For: Anyone who wants a consistent illustration set for landing pages and app screens.
Access to all of DrawKit's Pro illustration, icon, and animation packs.
For: Product teams that need many illustrations in a single style.
A search engine and editor for hundreds of thousands of SVG icons and vectors, collected by bot from openly licensed sources.
For: Anyone who wants to find a specific icon/vector as SVG quickly.
Simple generative SVG patterns such as grid, flow, circular, noise, and isometric. Adjust the pattern with sliders and download it as SVG.
For: Anyone looking for original patterns for posters, presentation covers, site backgrounds, or social media graphics
Galleries that showcase sites and screens other people have built. Not for copying, but for giving AI a reference such as "a layout like this one". Gallery images are not shown on this site.
A jury-scored website awards gallery; picks a 'Site of the Day' every day and can be filtered by technology (GSAP, WebGL, Three.js, Framer…) and category.
For: Designers and developers looking for animated, experimental, high-end interfaces
A showcase where designers post short work snippets (shots): interface, brand, illustration and animation examples.
For: Anyone looking for ideas, colors and component looks
Adobe's creative portfolio network; UI/UX, web, brand and illustration projects presented as case studies, often with the process.
For: Designers who want to see how a project was built from start to finish
A daily-updated website gallery; filter by page type, section (hero, pricing, footer…), style, color and platform (Framer, Webflow…).
For: Anyone looking for landing page and section layouts
A gallery that has added a landing page example every day since 2015; filter by category, color, platform and year, plus free templates and a books section.
For: Anyone looking for SaaS, agency or portfolio landing pages
A library of screens, flows and animations from shipped mobile and web apps (the page says '621,500 shipped screens'); has an official MCP server.
For: Anyone designing app screens (onboarding, paywall, settings) who wants to give an AI agent real product references
A reference library of screens and user flows from web and iOS products (144,000+ screens, 400+ products); has an MCP server, a Figma plugin and an open-source agent skill.
For: Anyone designing product screens who wants an AI agent to do design research
A curated design feed of websites, OG images, app screens, icons and motion work; replaced the Godly gallery and also has a directory of design agent skills.
For: Anyone looking for current, selective web and brand inspiration
A web design showcase curated by Daniel Howells; more than 8,000 sites categorized by style, type and subject, with profiles of the agencies that designed them.
For: Anyone looking for typographic, minimal, agency/portfolio sites
A gallery of one-page sites, sections (9,000+) and templates since 2008; has a technology filter (Tailwind, GSAP, shadcn/ui…) and a free MCP server.
For: Anyone looking for one-page landing/portfolio and section examples, or who wants to search directly from Claude Code
A gallery curated from SaaS companies' landing, pricing, about and FAQ pages (840 examples on the page); has technology and font filters.
For: Anyone building a landing page for a SaaS product
A UI/UX gallery of SaaS apps' in-product screens (dashboards, tables, settings, checkout, onboarding); a product of the SaaS Landing Page team.
For: Anyone designing SaaS dashboards and app screens
A selection of clean, functional websites, with type tags (agency, portfolio, SaaS, e-commerce…) and a weekly newsletter.
For: Anyone looking for minimal designs with plenty of white space
A hand-picked gallery of live websites; filter by industry and style, with a landing page section library on Pro. Run by the Craftwork team.
For: Anyone looking for landing pages and sections (hero, pricing table)
Recorded user flow videos, screens, UI elements and emails from web, iOS and Android products.
For: Anyone designing multi-step flows such as onboarding, checkout or subscriptions
A landing page and section (component) inspiration gallery; also a paid Tailwind/Webflow/Figma component and template library and an MCP server.
For: Anyone looking for landing page sections who wants to give their agent section references
Navigation bar examples only: sticky, dropdown, mega menu, sidebar, search, announcement bar, full-screen menu.
For: Anyone designing a menu/top bar
Website footer examples only; grouped by type and style (typographic, grid, animated, dark…).
For: Anyone designing a footer
A selection of dark-themed websites only; curated by Cai Cardenas.
For: Anyone looking for dark themes
A section-focused gallery: hero, testimonial, feature, CTA, footer and pricing sections, each separately (5,130 sections on the page).
For: Anyone building a page section by section
Recordings of micro-interactions and animations from shipped iOS apps (2,100 shots, 492 apps), with motion breakdowns; separate paid MCP.
For: Anyone who wants to add animations/micro-interactions to an app
A library of screens, components and flows from SaaS web apps (209,891 screens on the page); MCP server that connects via OAuth.
For: Anyone designing SaaS app screens
A site gallery curated by David Hellmann since 2008 (2,642 sites on the page); site of the day and a link roundup.
For: Anyone looking for agency/portfolio and experimental sites
Unconventional web design and interaction examples; each entry has a short description of the interaction.
For: Anyone looking for experimental hover/scroll interactions
An independent typography archive: tags how fonts are used in real work (web, brand, books, packaging) by font name.
For: Anyone looking for font pairings and typography examples
A visual inspiration and collection app; search by color, find similar images, and choose to show, blur or hide AI-generated images.
For: Designers building moodboards
A general visual search and board platform; design boards are built with searches like 'web design' and 'UI.'
For: Anyone who wants to build a moodboard
A gallery of creative 404 (page not found) designs, filterable by style, interaction and industry.
For: Anyone who wants to make their site's error page less boring
A gallery of curated call-to-action sections from websites (buttons, forms, newsletters, downloads, pricing), shown by type, industry and light/dark mode.
For: Anyone who wants to strengthen their offer, contact and newsletter sections
A creative publication online since 2007: features graphic, illustration, photography, brand and web design projects through articles.
For: Anyone who wants to follow design trends and find inspiration for brand and visual language
A British graphic design site online since 2007; curates and showcases brand, typography, editorial, digital and motion design projects with large images.
For: Anyone looking for inspiration for a logo, identity, poster or page layout
Ready-made landing pages, admin dashboards and starter kits: give AI a solid skeleton instead of a blank page. Free and open-licensed templates and paid marketplaces get separate cards.
Vercel's template gallery: starter kits for frameworks such as Next.js, Astro, Nuxt, and SvelteKit, plus SaaS, e-commerce, blog, portfolio, and admin dashboard templates. Each template can be copied to your own GitHub repository and deployed in one click.
For: Anyone who wants to start from a ready, working project; those who will deploy on Vercel
About 230 official example projects in the Next.js repository: authentication, CMS integrations, blog, e-commerce, database, and styling setups. Each one opens as a new project with a single command.
For: Those getting started with Next.js who want to see a correctly configured version of a specific integration
The Next.js team's SaaS starter kit: landing and pricing pages, email/password sign-in, subscriptions via Stripe Checkout, team management with Owner/Member roles, Postgres + Drizzle. The UI is minimal, built with shadcn/ui.
For: Those who want to launch a paid subscription web app from a working skeleton rather than from scratch
Vercel's e-commerce storefront template: product listing, search, cart, and checkout flow; product data is pulled from Shopify.
For: Those who want to build a fast, custom-designed storefront for a Shopify store
Astro's theme directory: blog, landing page, portfolio, documentation, and e-commerce themes; free and paid themes share one filterable list.
For: Those building fast-loading content sites (blog, corporate, portfolio)
A landing page and corporate site template built with Astro + Tailwind v4: 30+ ready-made sections (hero, features, pricing table, FAQ, testimonials), MDX blog, RSS, sitemap, dark mode, and RTL.
For: Small businesses (SMBs) and freelancers who want a quick promotional/corporate site
A clean, accessible, fast blog template built with Astro: static search with Pagefind, draft posts, RSS and sitemap, dark mode, and an automatic OG image for each post.
For: Those who want to start a personal or company blog
Ready-made page blocks from shadcn/ui: an admin dashboard (dashboard-01), 16 sidebars, sign-in and sign-up screens, and chart blocks (97 blocks in the registry). The code is copied straight into your project.
For: Those who want to add a ready-made dashboard and sign-in screen to a React/Next.js project
A ready-made admin dashboard built with shadcn/ui + Vite + TanStack Router: 10+ pages, a global search command, dark mode, RTL support; optional Clerk sign-in.
For: React users building an admin panel/internal tool
A Next.js + shadcn/ui admin dashboard starter kit: fully working data tables (React Query), forms (Zod), charts, Clerk sign-in, Sentry, and a sample AI chat page.
For: Those building a Next.js-based SaaS dashboard or internal tool
A full-stack SaaS starter kit on Wasp (React + Node.js + Prisma): sign-in, Stripe/Lemon Squeezy payments, admin dashboard, email, file uploads, blog, and a documentation site.
For: Those who want to launch a SaaS that takes payments in a single repository, front end and back end together
A Next.js + Tailwind + TypeScript starter kit that comes with Clerk sign-in, Drizzle ORM, testing (Vitest, Playwright), Sentry, internationalization (i18n), and code quality tools preinstalled.
For: Those who want a project with testing and monitoring set up from the start
The paid SaaS edition of the free Next.js Boilerplate: multi-tenancy and teams, roles/permissions, shadcn/ui, Stripe payments.
For: SaaS founders who want team and subscription infrastructure ready-made
An MDX-based blog template built with Next.js + Tailwind: tag pages, command palette search, Giscus/Utterances comments, a newsletter component, RSS, 3 post layouts, and multi-author support.
For: Technical bloggers who write in Markdown/MDX
A single-page developer portfolio built with Next.js + shadcn/ui + Magic UI; the content is edited from a single data file.
For: Those who want to launch a personal portfolio/resume site quickly
A Next.js portfolio template built with Once UI: project pages, blog, gallery, and an about section.
For: Personal, non-commercial portfolio sites; those buying Once UI Pro for commercial use
Ready-made page examples from the Bootstrap team: layouts such as dashboard, blog, album, pricing, checkout, sign-in, and cover, plus Vite/Webpack starter setups.
For: Those starting with plain HTML/CSS who are looking for a 'ready-made HTML CSS template'
An open-source admin dashboard template based on Bootstrap 5: 100+ components, multiple layouts, dark mode, and 6 ready-made demos.
For: Those building an admin panel with HTML/Bootstrap
Tabler's paid package: a compiled HTML/CSS/JS bundle and email support; the All Package adds SVG illustrations, icons, and email templates.
For: Teams that want a compiled package and support
An open-source admin dashboard template based on Bootstrap 5, around since 2013: ready-made dashboard pages, forms, tables, plugins.
For: Those who want a classic HTML/Bootstrap admin panel; PHP/Laravel projects
Paid admin templates listed as 'Premium Templates' on the AdminLTE site (Next.js, React, Vue, Angular, HTML, shadcn/ui versions); the seller is DashboardPack.
For: Teams willing to pay for a modern-looking ready-made admin panel
Free admin dashboard templates and a component library for Bootstrap, React, Vue, and Angular.
For: Teams building a corporate-looking admin panel, flexible on framework choice
CoreUI's paid package: 250+ PRO components, 25+ admin templates, a data table (Data Grid), a calendar (Scheduler), and 4,300+ icons; React, Angular, Vue, Bootstrap, Next.js.
For: Teams developing corporate admin panels
A free admin dashboard template built with Tailwind CSS; HTML, React, Next.js, Vue, Angular, and Laravel versions live in separate repositories.
For: Those building an admin panel with Tailwind
TailAdmin's paid version: all Pro components, Figma source (Business and up), lifetime updates; HTML, React, Next.js, Vue, Angular, Laravel.
For: Freelancers and agencies who want an admin panel with more pages and components
Free landing page templates built with Tailwind + Next.js (Simple Light, Open React Template).
For: Those building a SaaS/app landing page
Paid landing page, SaaS marketing, and admin templates built with Tailwind (Artifact, Relay, Cadence, Flux, Mosaic, Stellar…); sold individually or as Classic/Modern bundles.
For: Founders and agencies who want a carefully designed Tailwind landing page
Ready-made HTML templates built with Bootstrap 5 in business, portfolio, restaurant, corporate, landing page, and admin categories.
For: Those looking for a quick HTML template for their own site
The paid version of BootstrapMade templates: removable attribution line, a working PHP/AJAX contact form, SCSS files, support; the Premium Plan includes all pro templates and a template builder.
For: Freelancers and agencies who build sites for clients and charge for them
182+ Bootstrap/HTML templates: ready-made sites for industries such as agency, corporate, restaurant, hotel, construction, and agriculture.
For: Those looking for a ready-made HTML site for their industry
A license to remove the attribution line from the free templates (+ a working AJAX/PHP contact form, support) and paid Pro templates (Single/Unlimited license).
For: Those who don't want the 'Designed by HTML Codex' line on a client site
620+ free HTML/CSS templates since 2008; in 2026 it added framework-free, single-file pure CSS templates billed as 'customizable with AI.'
For: Those who want to download HTML templates without signing up and without mandatory attribution
Envato's marketplace for individually purchased themes and templates: HTML site templates, admin dashboards, React/Next.js templates (WordPress themes are outside this shelf).
For: Those who want to choose from a large number of ready-made designs and pay once
Envato's subscription: unlimited downloads of millions of items, web templates included; each use requires “registering” the item to a project.
For: Agencies and content creators who use many templates/images
Free site templates on the Webflow marketplace. They run only on Webflow; exporting the code requires a paid Webflow plan.
For: Those building a site on Webflow without writing code
Paid site templates on the Webflow marketplace; sold under the Single-Use License.
For: Designers building client sites on Webflow
Free site templates on Framer Marketplace; copied into your own Framer project with 'Remix'. They run only on Framer.
For: Those building portfolios and landing pages on Framer
Paid site templates on Framer Marketplace; sold with a single-project license.
For: Designers building client sites on Framer
Templates published by v0 users: landing pages, dashboards, sign-in screens, blogs/portfolios, e-commerce, AI apps. Copied into your own v0 chat with 'Fork'.
For: Those working in v0 who want to start from a ready-made project instead of writing a prompt from scratch
About 214 site and app templates published by the Lovable community: portfolio, SaaS, blog, dashboard, e-commerce, landing page.
For: Those working in Lovable who want to start from a ready-made app
Sells animated landing page and section examples (hero, menu, footer, CTA) along with their prompts; you give the prompt to Lovable, Cursor, or Claude and have it build something similar. Animated background videos are also available.
For: Designers and agencies who want to add a quick, striking hero section to a client site
A subscription library offering UI kits, components, Figma files, shader and texture effects, site templates, and 'vibe coding' prompts; it connects to your coding agent via MCP.
For: Designers and developers who want a ready-made, polished visual direction when building sites with AI
The paid part of vividsites: 299 animated, “cinematic” site templates with their prompts, motion videos, and the Create tool that builds a site from a single sentence.
For: Anyone who wants a landing page with scroll-triggered motion and 3D elements
A look that's unique to your brand, fast-loading pages and cleanly licensed resources. The guide stays free.
Web design serviceWe use cookies to improve the site and measure advertising performance. Analytics and advertising cookies run only if you accept them. Details are in our Privacy Policy and Data Protection Notice.