A directory of Nextjs Dev Tools tools and resources
originui.com
origin_ui
styleglide.ai
styleglide_ai
cult-ui.com
cultui_shadcn_ui
joshwcomeau.com/css/in...
css_grid_guide
reui.io
reui
ui.aceternity.com
aceternity_ui
shadcnui-blocks.com
shadcn_ui_blocks
kokonutui.com
kokonut_ui_components
neobrutalism-component...
neobrutalism_components
uipub.com
ui pub
magicui.design
magic_ui
ui.shadcn.com
shadcn_ui
shadcnblocks.com
shadcnblocks
kibo-ui.com
kibo_ui
retroui.dev
retro_ui
github.com/kennetposti...
react_google_login_component
cleanmyseo.com
clean_myseo
buttons.ibelick.com
tailwind_buttons
pro.cult-ui.com
shadcn_blocks
uiverse.io
uiverse
builtatlightspeed.com
jamstack_themes
components.bridger.to
next_js_components
clean_my_seo
react_google_login
css-tricks.com/firebas...
firebase_react_auth
tailwind_button_collection
avvvatars.com
avvvatars
hypercolor.dev
tailwind_gradients
vercel.com/blog/buildi...
next_image_gallery
github.com/gitname/rea...
react_gh_pages
gist.github.com/macken...
coverflow_carousel
uiverse_ui
uiverse.io/patterns
css_tailwind_patterns
github.com/thedaviddia...
front_end_checklist
github.com/vuejs/vue
vue2_repo
github.com/youzan/vant
vant
shadcn-extension.verce...
carousel
blog.bitsrc.io/8-react...
react_hosting_solutions
platejs.org
plate_editor
nextjs_components
tweakcn.com
tweakcn_theme_editor
klim.co.nz/retail-font...
family_fonts_klim
curated.design
curated_inspiration
velvetyne.fr/fonts/le-...
le_murmure_velvetyne
magicpattern.design
magicpattern
velvetyne.fr/fonts/tri...
trickster_velvetyne
collletttivo.it/typefa...
mazius_display_clt
freesets.vercel.app/icons
free_icon_sets
hypercolor_gradients
fonts.google.com/speci...
archivo_google_fonts
futurefonts.xyz/jtd/oculi
oculi
futurefonts.xyz/studio...
digestive
futurefonts.xyz/slobzh...
relaate_fonts
uilabs.dev
ui_labs
velvetyne.fr/fonts/bac...
backout_velvetyne
futurefonts.xyz/phanto...
phantom_sans
fontshare.com
fontshare
type-department.com/co...
rotonto
shapes.framer.website
copy_svg_shapes
theleagueofmoveabletyp...
league_of_moveable_type
shape.so/browse
shape_icons
danielsun.space
daniel_sun
nutsdev.com
nutsdev_design
grillitype.com/typefac...
gt_walsheim_typeface
supply.family/shop/gra...
gradient_blend
supply.family/shop/squ...
squeezer_backgrounds
supply.family/shop/dun...
dune_gradients
family_fonts
nutsdev
onepagelove.com
one_page_love
le_murmure
magic_pattern
velvetyne.fr/fonts/gulax/
gulax_velvetyne
velvetyne.fr
velvetyne
velvetyne.fr/fonts/kar...
karrik_velvetyne
velvetyne_trickster
syne_google_fonts
velvetyne.fr/fonts/avara/
avara_velvetyne
icons_freesets
builder.io/content/f9b...
builder_io
svgdoodles.com
svg_doodles
space_grotesk
designresourc.es
design_resources
archivo
public_sans
tunera.xyz
tunera_type_foundry
futurefonts.xyz/ryan-b...
meek_display
work_sans
futurefonts.xyz/teo-tu...
future_fonts
built_at_lightspeed
futurefonts.xyz/duong-...
lavishe
digestive_typeface
uilabs
velvetyne.fr/fonts/ter...
terminal_grotesque_velvetyne
rotonto_type_department
uncut.wtf
uncut_fonts
gt_walsheim
shadergradient.co
shader_gradient
crimson_text
league_moveable_type
shape_2
copy_paste_svg_shapes
sun_brand_design
atipofoundry.com/fonts...
brockmann_atipo_foundry
gradient_blend_noise
fontsfree.pro/base-web...
aktiv_grotesk_corp
csspro.com
css_pro
dune_gradient_backgrounds
myfonts.com/collection...
pf_din_text
blog.daftcode.pl/bugs-...
bugs_in_production
egghead.io/courses/get...
egghead_io
dirty_dozen_bugs
thebookofshaders.com/02/
book_of_shaders
css-tricks.com/intro-f...
firebase_react_intro
redux_fundamentals
framermotionexamples.com
framer_motion_examples
buildui.com
build_ui
advancedframer.com
advanced_framer
web3templates.notion.s...
tailwind_css_handbook
maximalexpression.noti...
shader_prototyping
A ready-to-use foundation of beautifully designed, customizable UI components for building and extending your design system. Open source and open code—start here and tailor it to your needs.
10
component_libraries
An interactive theme editor and generator for shadcn/ui and Tailwind CSS v4, plus custom styles. Customize colors, typography, and UI tokens with real-time previews and export-ready code, including AI-generated themes.
62
design_tools
A curated collection of customized Shadcn UI blocks and components with live previews and copy-ready code snippets, designed to accelerate web development.
26
A premium component library offering hundreds of extra Shadcn UI blocks and components built with Shadcn UI, React, and Tailwind, designed to accelerate development with unlimited usage and ongoing updates. Includes categorized blocks, templates, and ready-to-use UI kits for rapid integration.
30
A free, open-source collection of 100+ UI components for modern web apps, built with Next.js, React, Tailwind CSS, and Motion to accelerate development.
An open-source UI component library for React with TypeScript, Tailwind CSS, and Motion, featuring animated components and seamless integration with shadcn/ui.
34
A Tailwind CSS and Framer Motion component library for Next.js and TypeScript that lets you copy-paste trendy UI blocks into your site, reducing styling headaches and delivering a modern, cohesive look.
18
Premium registry of shadcn/ui components, UI kits, blocks, and templates for rapid, consistent UI development. Includes motion-ready kits and team licensing options.
33
A collection of neobrutalism-styled components based on shadcn/ui. It provides ready-to-use UI elements to assemble modern, bold interfaces with ease.
2
AI-powered tool to generate color palettes and typography for a design system. Tailor outputs to your project, preview in real time, and export kits for your workflow.
45
A registry of composable, accessible, open-source React components designed for seamless use with shadcn/ui. Built with React, TypeScript, Tailwind CSS, Lucide, and Radix UI to speed up interface development.
8
RetroUI is a retro-styled React UI component library built with TailwindCSS for modern web apps. It offers ready-to-use blocks and templates, easy customization, and supports both SSR and SPA workflows with a growing community of developers and designers.
A UI component library and template collection for building visually stunning landing pages. Includes ready-made demos and a command palette to speed up design and development.
4
A React component that enables Google authentication. It allows easy user sign-in through Google in React applications.
A comprehensive SEO cleaning tool that audits and optimizes your site to improve crawlability and remove on-site SEO issues. Achieve higher visibility and rankings with automated optimizations.
developer_tools
An everyday typeface inspired by Clearface, extending its friendly curves for modern typography. Developed by Klim Type Foundry, Family Fonts preserves Clearface's approachable personality while updating it for current typesetting needs.
typography
A collection of Tailwind CSS buttons designed for quick, copy-paste integration with no JavaScript required, enabling easy styling upgrades for your website.
A curated collection of design inspiration featuring hundreds of handpicked websites and design patterns from Curated.design to spark creativity and elevate design work.
12
Premium Shadcn Blocks collection featuring full-stack components, animated UI elements, and ready-to-use templates. Built with Next.js 15, Tailwind CSS, and Supabase to help you ship SaaS apps faster.
14
Open-source Shadcn UI components, animated blocks, and full templates you can copy-paste into any TypeScript/Next.js project. Tailwind, Framer, and React integration included.
44
Libre, open-source typefaces for broad reuse across branding, print, and digital UI. Designed for accessibility and collaboration with permissive licenses.
A design tool that generates SVG/CSS patterns, gradients and organic shapes for branding and social media. With 20+ tools, you can create unique visuals in seconds and export as images or code (SVG/CSS), plus organize assets for consistent branding.
A library of libre/open-source typefaces (Trickster and Velvetyne) for designers and developers. It features diverse writing systems, clear licensing, and practical usage guidance.
0
Mazius Display is a high-contrast serif typeface with old-style proportions and a strong calligraphic feel. Influenced by chancery hands, it offers three display styles (regular and two distinct italics) and excels at large sizes for expressive headlines.
Curated collection of free icon sets and assets from popular libraries like Font Awesome, Iconify, Tabler, Feather, Ionicons, and more—designed to speed up UI design and implementation.
A community-driven library of free, customizable UI elements you can copy as HTML/CSS, Tailwind, React, or Figma. Browse by tags and accelerate UI development with ready-to-use building blocks.
A curated collection of beautiful gradients for Tailwind CSS, leveraging the full color range. Easily copy Tailwind classes, CSS snippets, or save gradients as images.
6
A blog post detailing the 12 most common production bugs observed by a web services tester, with practical examples and tips to prevent them.
articles
Expert-led front-end courses for developers and teams, delivered through concise, practical lessons on the most useful tools and techniques for modern web development.
courses
Archivo is a grotesque sans serif typeface family designed for headlines and display text. Its bold, compact shapes evoke late 19th-century American grotesques while maintaining strong legibility at display sizes.
An imagined lowercase companion to Roman capitals, designed to harmonize with uppercase forms and remain legible at small sizes.
Digestive is a bold display typeface blending Art Nouveau elegance with Gothic edge, inspired by seaweed-like forms and anatomical motifs. It balances allure and repulsion, incorporating food-inspired textures to give typography a distinctive, tactile personality.
Relaate is a multi-genre type family where each member—Serif, Slab, and Grotesque—retains its own distinctive voice while sharing a cohesive family character. It delivers elegant, brutal, and quirky variants to cover a wide range of typographic needs.
A directory and marketplace of open-source and premium Jamstack themes, templates, starters, and UI kits for rapid modern web development, featuring Shadcn blocks and Next.js boilerplates.
frontend_frameworks
An experimental laboratory for fine UI components and interactions. It showcases dynamic widgets and animated elements—popover actions, toolbars, calendars, sliders, and responsive containers—designed for rapid prototyping and exploratory design.
A collection of libre, open-source fonts including BackOut and Velvetyne, designed for inclusive and versatile typography.
Phantom Sans blends Futura influence with grotesk geometry, adding warmth and originality to geometric sans typography. Its larger dot details improve legibility at small sizes on screens, making it suitable for UI, branding, and display design.
Fontshare is a free fonts service by the Indian Type Foundry (ITF), delivering high-quality typefaces to designers and developers everywhere.
Rotonto is a variable typeface that emphasizes the contrast between rigid, square counters and rounded outlines. Rooted in grotesque characteristics, it delivers versatile use across a wide range of contexts and applications.
A Framer-made library of ready-to-use SVG shapes that you can copy and paste into your UI designs, speeding up prototyping.
The first open-source font foundry and a learning hub for typography, teaching you how to use, create, and license type. Join fellow type nerds and discover new typography weekly.
Shape lets you customize the style, colors, and borders of static and animated icons and illustrations. Export to React, SVG, and Lottie code.
A premier design partner crafting brand and product websites for SaaS and Web3 startups. Trusted by YC founders to deliver standout, pride-worthy digital experiences.
design_systems
A TypeScript React component library for Next.js, built with Tailwind and shadcn/ui, created by Bridger Tower. It provides reusable UI building blocks to accelerate development and ensure a consistent look across projects.
A full-service digital design agency delivering innovative websites and mobile apps, combining strategy, design, and development to create best-in-class digital experiences.
GT Walsheim is a friendly but precise display typeface inspired by Swiss poster designer Otto Baumberger from the 1930s, with full Cyrillic language support. This specimen and license page provides previews and licensing options for use in design projects.
A design toolkit featuring 70 versatile gradient blend objects for logos, apparel, and more. Download now to boost creativity and streamline branding design.
A library of 36 vibrant abstract backgrounds with customizable colors. Includes 15 AI files, PNG textures, and a paper texture for versatile design assets.
visual_assets
A collection of 30 vibrant gradient backgrounds in silk, noise, and rough textures, designed for branding, social media, and web design. Ready-to-use textures to elevate any visual identity.
A comprehensive SEO cleaning toolkit that analyzes and fixes site issues, delivering faster, more reliable optimization to boost search rankings and visibility.
A reusable React component that enables Google authentication, simplifying user sign-in flows in React applications.
A practical tutorial on adding Google-based authentication with Firebase to a React app, covering sign-in/out, session persistence, and UI updates to show the user and restrict actions to authenticated users.
Family is an everyday typeface based on Clearface, preserving its approachable curves while updating it for contemporary use. It offers versatile glyphs and legible punctuation for UI, editorial design, and branding.
A collection of ready-to-use Tailwind CSS buttons with copy-paste integration, no JavaScript required. Simply copy and paste into your project to instantly upgrade your UI.
An all-in-one digital design agency that crafts impressive websites and mobile apps with fluent design language and full-stack development. We prioritize transparent communication and tailored solutions to meet every client's needs.
A curated gallery of the best single-page websites, templates, and resources. Discover fresh inspiration for modern one-page design and faster project ideation.
Le Murmure is a libre typeface by Velvetyne, offering open-source fonts for typography with multiple styles and broad licenses for use in writing systems and design projects.
A pattern and background generator that creates SVG/CSS patterns, gradients, and organic shapes for branding and social media. With 20+ tools and export options (images, SVG, CSS), it streamlines asset creation and brand consistency.
Libre typefaces featuring Gulax and Velvetyne with open licenses for use in print and on the web. Designed for designers and developers seeking reliable, freely licensed typography.
A collection of freely licensed typefaces (Libre fonts) for use in any project, promoting open typography. Includes articles on Libre Typefaces and a contact page for inquiries.
typefaces
A libre font collection centered on Karrik Velvetyne and related typefaces, designed for universal use and easy distribution. Freely licensed for embedding, modifying, and sharing across projects.
A libre collection of open-license typefaces (Velvetyne and Trickster) for everyone. Designed for broad use with diverse writing systems and easy access for designers and developers.
A typography resource highlighting the Syne font family and its styling options, with guidance on selecting and pairing type for design projects. Ideal for designers exploring typographic options in Google Fonts.
Avara Velvetyne is a libre, open-source typeface designed for broad usability across writing systems and media, available under open licenses for designers and developers.
A free, open-source React UI avatars library that generates unique placeholder avatars for users in any project. Lightweight, easy to integrate and customizable for production use.
A Daftcode Blog post detailing the twelve most common bugs in production, with real-world examples and practical insights for testers and developers.
A curated collection of top free icon sets and resources for designers and developers. Quickly discover SVG/icon libraries (Iconify, Font Awesome, Feather, Tabler, Ionicons, etc.) to speed up UI design and prototyping.
icons_graphics
A gentle, step-by-step guide to fragment shaders, designed for beginners to progressively master shader concepts, from Hello World to practical visuals.
tutorials
An AI-powered visual development platform that enables teams to design, prototype, and optimize web and mobile experiences quickly and collaboratively.
A curated collection of Tailwind CSS gradients using the full color spectrum, with easily copyable class names and CSS, and the option to save gradients as images for quick reuse.
A practical guide to building a high-performance, animated image gallery using Next.js' Image component and Cloudinary. Learn to render hundreds of large images with smooth UX, accessibility, and efficient loading.
A guided tutorial introducing Firebase and React fundamentals. Build a Fun Food Friends web app with setup, database integration, and CRUD functionality.
A free collection of editable SVG icons you can customize to enhance both online and offline designs.
ui_components
A practical guide for deploying a Create React App to GitHub Pages using the gh-pages package. Includes setup steps, package.json scripts, and hosting configuration.
A React-based coverflow carousel built with Tailwind and Framer Motion. Delivers smooth, customizable transitions for modern web interfaces.
A community-made library of free, customizable UI elements built with CSS, Tailwind, React, and Figma. Copy-ready HTML/CSS or code snippets help you accelerate UI development and reuse components across projects.
Space Grotesk is a proportional sans-serif variant based on Colophon Foundry's Space Mono (2016), designed by Florian Kar. Available through Google Fonts, it delivers crisp readability with a modern grotesk aesthetic.
A curated gallery of design assets, tools, and websites. Find top resources for designers—from fonts and icons to UX inspiration and design jobs.
A curated collection of reusable CSS and Tailwind pattern snippets to accelerate UI development, with ready-to-use examples and practical implementation guidance.
Archivo is a grotesque sans serif typeface family designed for highlights and headlines. Its sturdy shapes and vintage-inspired geometry offer strong legibility and personality for editorial and branding.
Public Sans is a neutral sans-serif font based on Libre Franklin, designed for interfaces, text, and headings as part of the US Web Design System. It delivers strong legibility and accessible typography across digital products.
A comprehensive Redux course by Dan Abramov that teaches how to manage state in React apps using Redux. Learn core concepts, patterns, and practical implementation.
A comprehensive, open-source checklist for modern front-end development, guiding HTML, CSS, JavaScript, accessibility, performance, SEO, and more to ensure meticulous, best-practice websites.
A type foundry offering a curated collection of display and text fonts, spanning serifs, grotesques, and decorative families. It enables designers to mix personalities—from classic to contemporary—for branding, editorial, and interface design.
Official repository for Vue 2, including code history and issues. Vue 2 has reached End of Life; for Vue 3, see the vuejs/core repository.
The Meek family began as an exploration of the unexpected: oblique stress, an eclectic mix of calligraphic and typographic features, and contrast in lieu of serifs. Meek Display is a display typeface suited for large headlines and is currently available in Medium, Bold, Black, and Super, with ongoing work to expand lighter weights and italics.
Work Sans is a versatile sans-serif typeface family inspired by early grotesques, designed for high readability on screens and in UI contexts. This Google Fonts family offers multiple weights for flexible typography.
A lightweight, customizable Vue UI library for mobile web apps, offering modular components and easy theming to accelerate development and ensure performance.
A collection of in-progress typefaces by Teo Tuominen, centered on licensing options and upcoming releases for designers.
A collection of 400+ Framer and Framer Motion example projects across CodeSandbox, Framer components, and code overrides to help developers learn, prototype, and speed up animation workflows.
A directory and marketplace of open-source and premium Jamstack themes, templates, starters, and UI kits to accelerate modern web projects.
Lavishe is a Vietnamese-inspired glyphic serif font that blends traditional carved Roman letterforms with a contemporary touch. It features a flourish serif and a distinctively curved lowercase terminal to create a calm, organic texture.
An experimental display typeface blending Art Nouveau and Gothic influences with organic seaweed forms and anatomical motifs, resulting in provocative yet elegant letterforms inspired by pasta textures.
An experimental design playground for prototyping fine UI components and interactions. It showcases dynamic widgets, toolbars, and animated cards, with analytics and beta feedback to guide refinement.
A curated collection of libre/open-source fonts, including Terminal Grotesque and Velvetyne, offering freely usable typography for design, web, and print with open licenses suitable for commercial use.
Rotonto is a variable typeface that emphasizes the contrast between rigid square counters and rounded outlines. Rooted in grotesque proportions, it offers versatile performance across display and text contexts for various branding and editorial applications.
A ready-to-use carousel component that supports all Embla Carousel features, with API reference, accessibility, and keyboard navigation for smooth, accessible carousels.
UNCUT.wtf is a free catalogue of contemporary fonts, featuring a curated selection of modern typefaces. It currently features 163 fonts across Sans Serif, Serif, Monospace, and Display categories.
An in-depth learning platform for building modern web interfaces. Courses cover foundational topics, advanced UI techniques, and popular stacks like React Server Components, Remix, Tailwind, and Framer Motion.
GT Walsheim is a friendly yet precise typeface inspired by Otto Baumberger's 1930s Swiss posters. It supports Cyrillic languages and is available as a specimen with licensing options.
16
An advanced Framer course that goes beyond basics. Learn practical techniques to plan, design, and prototype your own ideas in Framer and confidently overcome complexity.
A concise guide detailing eight hosting and deployment options for React apps, including Firebase Hosting, GitHub Pages, Netlify, Heroku, Now by Zeit, Surge, AWS S3, and Roast, with quick-start tips to get apps live fast.
A search tool for freely licensed images, audio, and other media, enabling reuse and remixing across projects. With over 800 million creative works, Openverse helps creators discover openly licensed media easily.
stock_media
Open-source toolkit of beautifully designed plugins and components to help you assemble a customizable rich-text editor, with collaborative and AI-powered editing capabilities.
A gradient tool to generate animated gradients for Framer, Figma, and React. It enables designers and developers to remix and apply colorful interactions across UI components.
Crimson Text is an elegant old-style serif font designed for book production. It offers readability and a timeless, traditional aesthetic for print and editorial design.
The League of Moveable Type is the first open-source font foundry and a learning hub for typography—learn how to use, make, and license type with community guidance.
Shape lets you customize the style, colors, and borders of static and animated icons and illustrations, with export options for React, SVG, and Lottie.
A ready-to-use collection of SVG shapes that you can copy and paste into Framer projects, speeding up rapid prototyping and UI mockups.
An all-in-one, AI-powered workspace for teams, combining search, writing, and note-taking with a Tailwind CSS Handbook as the learning hub.
css_frameworks
A top-tier branding and web design partner for SaaS and Web3 startups, delivering standout brand identities and product websites you’ll be proud of. Trusted by YC founders across fintech, e-commerce, and Web3.
A standalone digital typeface foundry and graphic design studio. We deliver crafted fonts and typographic design services for distinctive branding.
A library of 70 gradient blend objects for logos, apparel, and more, enabling rapid creation of vibrant, adaptable visuals.
A collection of 36 vibrant abstract backgrounds with color-customization options and additional assets (15 AI files, PNG textures, and a paper texture) to elevate your design projects.
A curated collection of TypeScript React components for Next.js, built with Tailwind and shadcn/ui, created by Bridger Tower. Enables rapid assembly of modern, responsive websites using reusable UI blocks.
A versatile Aktiv Grotesk Corp font family for web and Photoshop, available in all styles to support diverse design projects.
A universal visual CSS editor that lets you edit styles on any website with no setup. It automatically generates clean CSS you can reuse across projects.
A library of 30 gradient backgrounds in silk, noise, and rough textures for branding, social media, and web design. Perfect for designers needing quick, on-brand visuals.
PF DIN Text is a versatile typeface family offering webfont and desktop licenses with multiple weights and Pro options, delivering timeless, highly legible DIN typography for UI, print, and digital media.
A flexible, all-in-one workspace with AI-powered search, writing, and note-taking that helps teams prototype and iterate shader workflows efficiently.
An interactive learning resource for CSS Grid that builds a clear mental model of grid layouts, covering grid flow, construction, alignment, areas, and accessibility. It helps you design robust, responsive layouts with practical, lightbulb moments.
24
A free, open-source library of copy-and-paste UI components built with Tailwind CSS and React, designed for rapid app UI assembly. Includes Navbar, Accordion, Dialog, Button, Tabs, and more—ready to drop into your project.
78
