> ## Documentation Index
> Fetch the complete documentation index at: https://docs.weventures.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# UI Components & Resources
> Comprehensive library of UI components, tools, and inspiration sources
This is your complete resource library for building beautiful, interactive user interfaces. From component libraries to 3D tools and design inspiration — everything you need in one place.
## Component Libraries
### Primary Stack
**Beautifully designed, customizable components**
Copy-paste component library built with Radix UI and Tailwind CSS. Full control over your code — not a dependency, you own the components.
✨ React • TypeScript • Tailwind • Radix UI
**Production-ready animation library for React**
The industry standard for React animations. Simple declarative API for complex animations, gestures, and layout transitions.
🎨 Animations • Gestures • Layout • SVG
### Modern Component Collections
**Trending animated components**
Free library of animated, copy-paste UI components built with Next.js, React, Tailwind, and Framer Motion. Perfect for modern, eye-catching interfaces.
🚀 Next.js • Framer Motion • Free
**Fully animated component library**
Open-source animated components built with React, TypeScript, Tailwind, and Motion. Browse, install, and customize with Shadcn CLI.
⚡ TypeScript • Motion • Shadcn Compatible
**Beautiful, fast, modern React UI library**
Comprehensive component library with automatic dark mode, TypeScript support, and easy theming. Built for accessible, customizable web apps.
🌙 Dark Mode • TypeScript • Accessible
**Modern React component library**
Focused on intuitive interactions and seamless UX. Pre-built components like SwipeRow, Discussion, and SpinningCircle for interactive experiences.
🎯 Interactions • Modern • React
### Creative & Experimental
**Make the web fun again**
Creative, ready-to-use React components with unique microinteractions. Categories include Text, Carousel, Background, Physics, Image, Filter, and Blocks.
🎪 Creative • Microinteractions • Fun
**High-quality animated components**
Open-source collection of fully customizable, animated React components for building stunning, memorable user interfaces.
💫 Animated • Customizable • Open Source
**Design system for Next.js**
Open-source toolkit for indie creators with flexible style system, functional components, and deployment-ready products. Launch projects quickly.
🛠️ Next.js • Indie Friendly • Complete System
**Vibe-crafting tool**
Discover UI inspiration, create mood boards, and generate design variants with AI. Perfect for rapid prototyping and creative exploration.
🤖 AI-Powered • Inspiration • Prototyping
## Design Resources & Galleries
### Component Galleries
**Curated navigation design inspiration**
Dedicated showcase of the best website navigation patterns. Find the perfect navbar design for your project with hundreds of examples.
🧭 Navigation • Curated • Design Patterns
**Call-to-action design library**
Collection of high-converting CTA designs. Perfect for landing pages, marketing sites, and conversion optimization.
🎯 CTAs • Conversion • Marketing
**8,782+ one-page websites**
Founded in 2008, the ultimate collection of single-page website inspiration, templates, and resources across all categories and platforms.
📄 Single Page • Templates • Resources
**Framer page templates & UI kits**
Ready-to-use page sections and UI elements for Framer. Speed up your design process with pre-built, customizable blocks.
🎨 Framer • Templates • UI Kits
### Premium Design Assets
**Abstract 3D backgrounds & graphics**
Premium abstract visuals, gradients, and 3D elements for modern web design. High-quality assets for professional projects.
**Design assets & templates**
Curated catalog of free and paid design resources including illustrations, icons, UI kits, and website templates.
**Web3 & crypto design resources**
Specialized design resources and inspiration for cryptocurrency and blockchain projects.
**Open-source UI elements**
Community-driven collection of beautiful, copy-paste UI elements and components created by designers worldwide.
### Hero Section Inspiration
**Premium hero section examples**
Curated collection of stunning hero sections from top websites. Perfect for landing page inspiration and conversion-focused designs.
🦸 Heroes • Landing Pages • Premium Examples
## Tools for 3D & Interactive Experiences
Create immersive, interactive experiences that set your projects apart. These tools require no code or minimal coding knowledge.
**Real-time 3D design tool**
Web-based collaborative 3D design platform. Create 3D objects, animations, and interactive experiences that export to web, mobile, and more.
🎨 3D Modeling • Animation • Collaboration • No Code
**Interactive graphics & animations**
Create state machine-powered animations and interactive graphics that run anywhere. Perfect for UI animations and micro-interactions.
⚡ State Machines • Cross-Platform • Interactive
**Motion design made simple**
Create professional animated content and videos for your web projects. Intuitive interface for designers who aren't animators.
🎬 Motion Design • Video • Easy to Use
**No-code WebGL tool**
Create stunning web graphics and interactive 3D experiences without coding. Perfect for landing pages and immersive web experiences.
✨ No Code • WebGL • 3D Graphics
**AI-powered 3D visuals**
All-in-one web tool for creating striking 3D visuals, animations, and effects. AI-powered object creation with no heavy software or coding needed.
🤖 AI-Powered • 3D • Visual Effects • Animations
**Interactive content creation**
Platform for creating engaging, interactive content experiences. Build immersive stories and dynamic web experiences.
📱 Interactive • Content • Experiences
## Design Inspiration
Stay current with design trends and discover cutting-edge work from the best designers and studios worldwide.
**Award-winning web design**
The most prestigious awards for design, creativity, and innovation on the internet. Daily showcase of the world's best websites.
🏆 Awards • Best of Web • Industry Standard
**Astronomically good web design**
Curated showcase of the best web designs across e-commerce, portfolios, tech, and more. Video previews and categorized inspiration.
✨ Curated • Categories • Video Previews
**Designer community & inspiration**
The world's leading community for designers to share work, find inspiration, and connect with clients. Millions of design shots across all categories.
🎨 Community • Portfolio • Jobs • Inspiration
## How to Use This Library
Begin with **shadcn/ui** as your base component library. It's customizable, accessible, and integrates perfectly with our stack.
Use **Framer Motion** for animations and micro-interactions. Start simple with basic transitions, then explore advanced gestures and layouts.
Check **Aceternity UI**, **Animate UI**, and **Fancy Components** for pre-built animated components you can copy-paste.
When you need 3D elements or complex interactions, use **Spline** or **Rive**. They integrate seamlessly with React.
Visit **Awwwards**, **Godly**, and **Dribbble** regularly to stay current with design trends and discover new patterns.
Use component-specific galleries (**Navbar Gallery**, **CTA Gallery**, **One Page Love**) when designing specific sections.
## Quick Start Templates
### Basic Setup: shadcn/ui + Framer Motion
```bash theme={null}
# Initialize shadcn/ui
npx shadcn-ui@latest init
# Add components
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog
# Install Framer Motion
pnpm add framer-motion
```
```tsx theme={null}
// Animated component example
import { motion } from 'framer-motion'
import { Button } from '@/components/ui/button'
export function AnimatedCard() {
return (
Animated Card
)
}
```
### Advanced: 3D with Spline + React
```tsx theme={null}
import Spline from '@splinetool/react-spline'
export function Hero3D() {
return (
)
}
```
### Interactive: Rive Animations
```bash theme={null}
# Install Rive
pnpm add @rive-app/react-canvas
```
```tsx theme={null}
import { useRive } from '@rive-app/react-canvas'
export function RiveAnimation() {
const { RiveComponent } = useRive({
src: 'animation.riv',
stateMachines: 'State Machine 1',
autoplay: true,
})
return
}
```
## Resource Categories
**Component Libraries (Start Here)**
* shadcn/ui → Base components, forms, dialogs
* Aceternity/Animate UI → Eye-catching sections, landing pages
* Hero UI/Molecule UI → Complete UI systems
**Animation Libraries**
* Framer Motion → General React animations
* Rive → Complex state-based animations
* GSAP → Advanced timeline animations
**3D & Interactive**
* Spline → 3D models and scenes
* Unicorn Studio → WebGL effects
* Endless Tools → Quick 3D graphics
**Inspiration & Research**
* Awwwards → Industry trends, best practices
* Dribbble → Visual design, UI patterns
* Godly → Web design inspiration
* Component Galleries → Specific UI patterns
**Development Tools**
* Jitter → Motion graphics for marketing
* Content Core → Interactive experiences
* 21st.dev → AI-assisted design variants
## Community & Learning
* shadcn/ui Discord
* Framer Discord
* Spline Community
* Fireship (Quick tutorials)
* DesignCourse (UI/UX)
* Online Tutorials (Animations)
* @shadcn (Components)
* @framer (Motion design)
* @splinetool (3D)
* @buildspace (Web3 design)
* Frontend Focus
* React Status
* CSS Weekly
**Performance Considerations:**
* Heavy animations can impact performance — use sparingly
* 3D elements increase bundle size — lazy load when possible
* Test on low-end devices before shipping
* Use React DevTools Profiler to measure impact
**Pro Workflow:**
1. Find inspiration (Awwwards/Godly)
2. Identify patterns (Component Galleries)
3. Check if pre-built exists (shadcn/Aceternity)
4. Build custom if needed (Framer Motion)
5. Add 3D/interactive elements (Spline/Rive)
6. Test and optimize
## Contribution
Found an amazing resource? Add it to this library:
1. Verify it's production-ready and well-maintained
2. Test integration with our stack (Next.js + React + TypeScript)
3. Add to the appropriate category above
4. Include description and tech stack tags
5. Submit PR or notify the team
***
Last updated: October 2025 • Maintained by the Weventures team
**Beautifully designed, customizable components**
Copy-paste component library built with Radix UI and Tailwind CSS. Full control over your code — not a dependency, you own the components.
✨ React • TypeScript • Tailwind • Radix UI
**Production-ready animation library for React**
The industry standard for React animations. Simple declarative API for complex animations, gestures, and layout transitions.
🎨 Animations • Gestures • Layout • SVG
**Trending animated components**
Free library of animated, copy-paste UI components built with Next.js, React, Tailwind, and Framer Motion. Perfect for modern, eye-catching interfaces.
🚀 Next.js • Framer Motion • Free
**Fully animated component library**
Open-source animated components built with React, TypeScript, Tailwind, and Motion. Browse, install, and customize with Shadcn CLI.
⚡ TypeScript • Motion • Shadcn Compatible
**Beautiful, fast, modern React UI library**
Comprehensive component library with automatic dark mode, TypeScript support, and easy theming. Built for accessible, customizable web apps.
🌙 Dark Mode • TypeScript • Accessible
**Modern React component library**
Focused on intuitive interactions and seamless UX. Pre-built components like SwipeRow, Discussion, and SpinningCircle for interactive experiences.
🎯 Interactions • Modern • React
**Make the web fun again**
Creative, ready-to-use React components with unique microinteractions. Categories include Text, Carousel, Background, Physics, Image, Filter, and Blocks.
🎪 Creative • Microinteractions • Fun
**High-quality animated components**
Open-source collection of fully customizable, animated React components for building stunning, memorable user interfaces.
💫 Animated • Customizable • Open Source
**Design system for Next.js**
Open-source toolkit for indie creators with flexible style system, functional components, and deployment-ready products. Launch projects quickly.
🛠️ Next.js • Indie Friendly • Complete System
**Vibe-crafting tool**
Discover UI inspiration, create mood boards, and generate design variants with AI. Perfect for rapid prototyping and creative exploration.
🤖 AI-Powered • Inspiration • Prototyping
**Curated navigation design inspiration**
Dedicated showcase of the best website navigation patterns. Find the perfect navbar design for your project with hundreds of examples.
🧭 Navigation • Curated • Design Patterns
**Call-to-action design library**
Collection of high-converting CTA designs. Perfect for landing pages, marketing sites, and conversion optimization.
🎯 CTAs • Conversion • Marketing
**8,782+ one-page websites**
Founded in 2008, the ultimate collection of single-page website inspiration, templates, and resources across all categories and platforms.
📄 Single Page • Templates • Resources
**Framer page templates & UI kits**
Ready-to-use page sections and UI elements for Framer. Speed up your design process with pre-built, customizable blocks.
🎨 Framer • Templates • UI Kits
**Abstract 3D backgrounds & graphics**
Premium abstract visuals, gradients, and 3D elements for modern web design. High-quality assets for professional projects.
**Design assets & templates**
Curated catalog of free and paid design resources including illustrations, icons, UI kits, and website templates.
**Web3 & crypto design resources**
Specialized design resources and inspiration for cryptocurrency and blockchain projects.
**Open-source UI elements**
Community-driven collection of beautiful, copy-paste UI elements and components created by designers worldwide.
**Premium hero section examples**
Curated collection of stunning hero sections from top websites. Perfect for landing page inspiration and conversion-focused designs.
🦸 Heroes • Landing Pages • Premium Examples
**Real-time 3D design tool**
Web-based collaborative 3D design platform. Create 3D objects, animations, and interactive experiences that export to web, mobile, and more.
🎨 3D Modeling • Animation • Collaboration • No Code
**Interactive graphics & animations**
Create state machine-powered animations and interactive graphics that run anywhere. Perfect for UI animations and micro-interactions.
⚡ State Machines • Cross-Platform • Interactive
**Motion design made simple**
Create professional animated content and videos for your web projects. Intuitive interface for designers who aren't animators.
🎬 Motion Design • Video • Easy to Use
**No-code WebGL tool**
Create stunning web graphics and interactive 3D experiences without coding. Perfect for landing pages and immersive web experiences.
✨ No Code • WebGL • 3D Graphics
**AI-powered 3D visuals**
All-in-one web tool for creating striking 3D visuals, animations, and effects. AI-powered object creation with no heavy software or coding needed.
🤖 AI-Powered • 3D • Visual Effects • Animations
**Interactive content creation**
Platform for creating engaging, interactive content experiences. Build immersive stories and dynamic web experiences.
📱 Interactive • Content • Experiences
**Award-winning web design**
The most prestigious awards for design, creativity, and innovation on the internet. Daily showcase of the world's best websites.
🏆 Awards • Best of Web • Industry Standard
**Astronomically good web design**
Curated showcase of the best web designs across e-commerce, portfolios, tech, and more. Video previews and categorized inspiration.
✨ Curated • Categories • Video Previews
**Designer community & inspiration**
The world's leading community for designers to share work, find inspiration, and connect with clients. Millions of design shots across all categories.
🎨 Community • Portfolio • Jobs • Inspiration