Developer resources

Recommended pages and tools to lay out, animate and style your sites and apps.

AI UI generators

• 21st.dev AI-generated UI components
• v0 Generate UIs from a prompt (Vercel)
• bolt.new Build full-stack apps with AI
• Lovable Full web apps from text
• Framer AI Websites with AI-assisted design
• Relume AI wireframes & sitemaps
• Refero Styles Design systems from real products, in a format your agent reads

Agent tooling

• autoskills Reads your project, sees what it is built with and installs the skills that fit

Sections & blocks

• Tailwind Plus Official sections & templates
• Magic UI Animated components for landings
• Aceternity UI Flashy effects & sections
• React Bits React animations & components
• Preline Ready-made Tailwind blocks
• Flowbite Tailwind components & sections
• Cruip Modern landing templates

CSS frameworks

• Tailwind CSS Utility-first CSS, today's standard
• Bootstrap Classic components & grid
• Bulma Flexbox-based CSS framework
• Pico.css Minimal classless CSS
• Open Props Ready-to-use CSS variables

UI components

• shadcn/ui Copy-paste components (React)
• daisyUI Components for Tailwind
• Material UI Material Design for React
• Radix UI Unstyled accessible primitives
• HyperUI Free Tailwind components
• Unlumen UI React components with docs and primitives

Buttons & effects

• Uiverse Community buttons & effects
• CSS Buttons Ready-to-copy CSS buttons
• Animista CSS animation generator
• Hover.css Ready hover effects
• Neumorphism.io Soft shadow generator

Animation & motion

• GSAP Pro JS animations
• Framer Motion Animations for React
• Animate.css Ready CSS animations
• Tailwind Animations Ready-made animations as Tailwind classes, zero config
• AOS Animate on scroll
• LottieFiles JSON vector animations
• Three.js Web graphics & 3D
• EZGIF vídeo a JPG Splits a video into frames to scrub it with scroll

Icons

• Lucide Clean open-source SVG icons
• Heroicons Icons by the Tailwind team
• Font Awesome The largest icon library
• Tabler Icons 5000+ SVG icons
• Phosphor Icons Flexible, consistent icons

Color & gradients

• Coolors Color palette generator
• Color Hunt Curated color palettes
• Realtime Colors Test palettes on a real site
• uiGradients Ready-to-copy gradients
• CSS Gradient CSS gradient generator

Backgrounds & shapes

• Haikei SVG background generator
• Hero Patterns Repeatable SVG patterns
• Get Waves SVG wave generator
• Smooth Shadows Smooth layered CSS shadows
• CSSmatic Gradients, shadows & more

Typography

• Google Fonts Free web fonts
• Fontpair Font pairings
• Type Scale Visual type scale
• Fontjoy Pair fonts with AI

Illustrations & images

• unDraw Free SVG illustrations
• Storyset Customizable illustrations
• Unsplash Free high-quality photos
• Pexels Free photos & videos
• DrawKit Illustrations & assets

Inspiration

• Awwwards Award-winning web inspiration
• Dribbble UI design inspiration
• CodePen Front-end demos & experiments
• CollectUI Hand-picked interface designs, daily

Learn

• MDN Web Docs The web reference docs
• CSS-Tricks CSS guides & tricks
• roadmap.sh What to learn and in what order, by role
• AI Hero Courses and tutorials for building with AI
• 100 proyectos de JavaScript A hundred projects to practice, with code and video (Spanish)
• Libros gratis Free programming books, in Spanish
• Aprendiendo React React from scratch, project by project (Spanish)
• JSCamp Free full-stack JavaScript bootcamp, with exercises (Spanish)

Before you ship

• Spamhaus Check if your domain or IP is on a spam blocklist
• MXToolbox Email Health Audits a domain email setup: MX, SPF, DMARC and blocklists (1 free check a day)