Community

Sign In Sign Up

Community

Discover the best apps, components and starters from the community.

Search

By messaging v0, you agree to our Terms and AI Policy.

Pricing Enterprise FAQ

Privacy Vercel Community Vercel

v0 Community - v0 by Vercel

...

portfolio

Nextjs Saas Landing template.

Nextjs Saas Landing

Paths moving in the background.

Background Paths

This application is a Sales Customer Relationship Management (CRM) tool designed to help users manage their sales processes, track deals, and maintain customer relationships. The app features a modern interface that allows users to navigate through various sections, including a dashboard, deals, contacts, tasks, and integrations.

To use the app, users can log in and access the main dashboard, which provides an overview of key metrics such as monthly revenue, new deals closed, and conversion rates. Users can add new deals, contacts, and tasks through intuitive forms and manage existing entries with options to edit or delete them. The app also includes filtering and searching capabilities to help users quickly find specific deals or contacts.

The application is built using React and TypeScript, leveraging Next.js for server-side rendering and routing. It utilizes various UI components from a custom design system, including cards, buttons, inputs, and modals, to create a cohesive user experience. The app also integrates with third-party services like Slack, Google Calendar, and Zapier to enhance productivity and streamline workflows.

Key features of the app include:
- A responsive dashboard displaying sales metrics and recent activities.
- A deals management section where users can view, add, edit, and delete deals, along with filtering options based on deal stages.
- A contacts management section for maintaining customer information, with similar functionalities for adding, editing, and deleting contacts.
- A tasks management section to track to-dos, with options to mark tasks as complete and filter by status.
- Integration capabilities with popular tools to enhance collaboration and productivity.
- A sidebar for easy navigation between different sections of the app.

Overall, this Sales CRM application aims to provide a comprehensive solution for sales teams to manage their workflows efficiently and effectively.

Sales CRM design

This application is a personal portfolio website designed to showcase the work and skills of Damilare Osofisan, a designer and developer. The app features a smooth scrolling experience, animated transitions, and a custom cursor for enhanced user interaction.

Users can navigate through various sections, including a hero section that introduces Damilare, a work section that highlights selected projects, an about section detailing his background and interests, and a contact section with links to social media and an email address. The app is built using React and Next.js, leveraging TypeScript for type safety. It utilizes Tailwind CSS for styling, ensuring a responsive and visually appealing layout.

Key features of the app include:
- Smooth scrolling and animated transitions between sections, enhancing the user experience.
- A custom cursor that reacts to user interactions, providing a unique visual effect.
- A mobile-friendly design that adapts to different screen sizes, ensuring accessibility on various devices.
- Dynamic content loading with React's Suspense and Framer Motion for animations, creating a modern and engaging interface.
- Integration with social media links and a clipboard functionality for easy email copying.

The application is structured with reusable components, making it easy to maintain and extend. It also includes a robust state management system for handling navigation and section visibility, ensuring a seamless user experience. Overall, this portfolio app effectively showcases Damilare's skills and projects while providing an engaging and interactive experience for visitors.

Portfolio Website

Join Waitlist

Ai Kit Landing

Fermy Landing Page

Fermy Landing Page

ElevenLabs Conversational AI Starter. Use this as a starting point to build advanced voice agents with Next.js.

ElevenLabs Conversational AI Starter

Fashion Brand Hero

Primium Gold Banking Dashboard

Primium Gold Banking Dashboard

tree with da links, code unmessy, first prompt was generated using Grok, rest just random + using the enhancement prompt button here, code messy and not follwoing best practises, it literally took me around 10 min. lol

v0 > ()--❤️

Next.js application

it's a brutal site

Brutalist landing page

A basic blockchain explorer (v0) with minimal features, displaying blocks, transactions, and wallet data. It has a simple UI, basic search, and a static table for recent activity. No real-time updates or advanced analytics yet. Designed for beginners, it’s functional but lacks polish, animations, and deep blockchain insights.

Blockchain Explorer

by tulioportela.com

This application is a dynamic sky visualization tool that allows users to experience different sky themes, including day, night, sunrise, and sunset. The app utilizes HTML5 canvas for rendering animated skies, providing a visually engaging experience.

To use the app, users can select their desired sky theme from a theme selector interface. The app will then transition to the selected theme, displaying a corresponding animated sky. The transition between themes is smooth, with a fade effect that enhances the user experience.

The application is built using React, a popular JavaScript library for building user interfaces, and TypeScript, which adds static typing to JavaScript. It also leverages the Framer Motion library for animations, allowing for smooth transitions and interactive elements.

Key features of the app include:
- Animated sky backgrounds that change based on the selected theme, with unique visual styles for each theme.
- A responsive design that adjusts the canvas size based on the window dimensions, ensuring a consistent experience across different devices.
- A theme selector that allows users to switch between different sky themes easily, with visual feedback indicating the current selection.
- Custom animations for clouds, stars, and celestial bodies, creating a lively and immersive atmosphere.

Overall, this app serves as a creative and interactive way to explore different sky aesthetics, making it suitable for users interested in visual design and animation.

Theme Animation - Sunrise, Day, Sunset & Night

This application is a bookmark management tool designed to help users organize, track, and analyze their web bookmarks efficiently. It allows users to add, edit, and delete bookmarks while providing detailed insights into their usage patterns.

To use the app, users can navigate through a sidebar that offers various functionalities, including a dashboard, analytics, favorites, and settings. Users can search for bookmarks using a search bar, filter them by categories, priorities, and statuses, and sort them based on different criteria such as last visited, title, or visit count. The bookmarks can be displayed in multiple view modes, including grid, list, compact, kanban, and timeline.

The app is built using modern web technologies, including TypeScript and React, with a focus on a responsive design. It utilizes components from a UI library for consistent styling and functionality, such as buttons, cards, dialogs, and forms. The application also incorporates state management using React hooks to handle user interactions and data updates.

Key features of the app include:
- A sidebar for easy navigation and access to different sections.
- A search functionality to quickly find bookmarks by title, description, or tags.
- Filtering options to narrow down bookmarks by category, priority, and status.
- Multiple view modes for displaying bookmarks, allowing users to choose their preferred layout.
- Detailed bookmark information, including visit counts, time spent, and related sites.
- Analytics to track user engagement with bookmarks over time.
- The ability to mark bookmarks as favorites and categorize them for better organization.
- A modal for adding new bookmarks with fields for title, URL, description, category, priority, tags, and notes.
- Bulk actions for managing multiple bookmarks at once, including deletion and export options.

Overall, this app serves as a comprehensive solution for users looking to manage their bookmarks effectively while gaining insights into their browsing habits.

Homepage dashboard design

This application is a portfolio website designed for showcasing a product designer's work and skills. It allows users to present their projects, experience, and credentials in a visually appealing and organized manner. The app is built using Next.js, a React framework, and utilizes TypeScript for type safety. It leverages various libraries and technologies, including Tailwind CSS for styling, Lucide icons for UI elements, and React Hook Form for form handling.

To use the app, users can navigate through different sections such as Home, Experience, Credentials, Skills, and Projects. Each section is dynamically populated with data sourced from a JSON file, making it easy to update content without modifying the codebase. Users can also view detailed project pages that include descriptions, features, technologies used, and related projects.

Key features of the app include:
- A responsive design that adapts to different screen sizes.
- Smooth scrolling and animated transitions for a modern user experience.
- A contact form that allows visitors to reach out directly to the designer.
- A scroll progress indicator that visually represents the user's position on the page.
- Dynamic project cards that link to detailed project descriptions.
- A customizable JSON data structure that allows for easy content management.

Overall, this portfolio website serves as a comprehensive platform for a product designer to display their work, connect with potential clients, and manage their online presence effectively.

Portfolio Website

Chat Management Dashboard

Chat Management Dashboard

v0-SFCC | Ecommerce Template

v0-SFCC | Ecommerce Template

The app is a web-based platform called HoverHug, designed to assist startups and founders in launching their Minimum Viable Products (MVPs) with a focus on impactful design. It provides a streamlined process for creating high-quality product designs without the need for full-time hiring or extensive recruitment, thereby reducing overhead costs and accelerating time to market.

Users can navigate the app through a clean and modern interface, which includes sections for services, process, and contact information. The app features a hero section that highlights the core value proposition, emphasizing the speed and efficiency of the design services offered. Users can explore various design services, including UI/UX design, product strategy, and design consultation, each accompanied by detailed descriptions and key features.

The app is built using modern web technologies, including TypeScript and React, with styling managed through Tailwind CSS. This allows for a responsive and visually appealing user experience. The design incorporates custom animations and effects, such as hover states and transitions, to enhance interactivity.

Key features of the app include:
- A visually striking landing page that captures user attention with bold typography and dynamic elements.
- Detailed service descriptions that outline the benefits and features of each offering.
- A clear and concise process section that guides users through the steps of working with HoverHug, from discovery calls to final design delivery.
- Contact options that facilitate easy communication, including email and social media links.
- A footer that provides additional navigation and legal information.

Overall, HoverHug aims to empower startups by providing them with the design resources they need to succeed in a competitive market, all while maintaining a focus on efficiency and cost-effectiveness.

Hoverhug landing page

Server actions and Zod validation.

Next.js + Forms

Dynamic Form Builder

Dynamic Form Builder

A login page with form and image.

An OpenAI-style circles pattern drawn dynamically and in realtime over your webcam input

Play the classic game of 2048 recreated in v0. Use the arrow keys to slide tiles in any direction and combine matching tiles until you reach 2048—or go beyond for an even higher score!

Two column login screen

The Digital Agency app is designed to facilitate the purchase of internet packages, specifically targeting users of Ethio Telecom. The app allows users to select from various internet packages, view pricing details, and make purchases directly through the interface. It is built using modern web technologies, including React, TypeScript, and Next.js, and is deployed on Vercel.

To use the app, users can navigate through the main interface where they can view different internet package options, each accompanied by details such as data allowance, pricing, and savings. Users can select a package and proceed to purchase it by clicking the "Buy Now" button. The app also features an email collection form, allowing users to subscribe for updates and exclusive offers.

Key features of the app include:
- A responsive design that adapts to different screen sizes, ensuring a seamless experience on both desktop and mobile devices.
- Dynamic pricing cards that display various internet packages, including daily and monthly options, with clear pricing and savings information.
- Integration with Supabase for managing email subscriptions, allowing users to sign up for updates and promotions.
- Analytics tracking using PostHog to monitor user interactions and improve the app's performance and user experience.
- A dark mode toggle for enhanced accessibility and user preference.

The app is structured to automatically sync with deployments made through the v0.dev platform, ensuring that any changes made in the development environment are reflected in the live application. Overall, the Digital Agency app provides a user-friendly interface for purchasing internet packages while leveraging modern web development practices and tools.

Animated Toolbar

Animated Toolbar

This application is a podcast platform designed to allow users to discover, listen to, and manage their favorite podcasts. It features a user-friendly interface that enables users to browse trending podcasts, view detailed information about individual podcasts, and listen to episodes seamlessly.

To use the app, users can navigate through various sections such as "Home," "Discover," and "Categories" using a responsive header and sidebar. They can search for specific podcasts using a search bar, and upon selecting a podcast, they can view its details, including the host, description, and a list of episodes. Users can play episodes directly from the podcast page or from a list of trending and recently played podcasts.

The app is built using modern web technologies, including TypeScript and React for the frontend, with Next.js as the framework. It utilizes a context API for managing audio playback state, allowing for features like play, pause, skip, and volume control. The UI components are styled using Tailwind CSS, ensuring a responsive and visually appealing design.

Key features of the app include:
- A podcast player that supports play, pause, skip forward, skip backward, and volume control.
- A detailed podcast information page that includes the podcast's cover image, host, description, and social media links.
- A list of episodes for each podcast, with the ability to play episodes directly from the list.
- A persistent mini-player that remains accessible while users navigate through the app.
- A subscription form for users to sign up for updates or newsletters.
- A sidebar and right sidebar for easy navigation and access to top podcasters and quick search functionality.

Overall, this podcast application provides a comprehensive platform for podcast enthusiasts to explore and enjoy audio content.

Fluid Particles Background

Fluid Particles Background

MsgGPT is an AI chat assistant application inspired by ChatGPT, designed to facilitate interactive conversations with users. The app allows users to engage in chat sessions, save chat histories, and manage multiple conversations seamlessly.

To use MsgGPT, users can start a new chat session, type their messages in the input field, and receive responses from the AI. The application features a sidebar that displays the chat history, allowing users to select previous conversations or initiate new ones. Users can also save titles for their chats, which helps in organizing and retrieving past discussions.

The app is built using modern web technologies, including TypeScript, React, and Next.js, ensuring a responsive and dynamic user experience. It utilizes the OpenAI API for generating chat responses, enabling real-time interaction. The user interface is styled with Tailwind CSS, providing a clean and customizable design.

Key features of MsgGPT include:
- A responsive chat interface that supports multiple chat sessions.
- A sidebar for easy navigation through chat history.
- The ability to save and title chat sessions for future reference.
- Real-time AI responses powered by the OpenAI API.
- Theme toggle functionality, allowing users to switch between light and dark modes.
- A welcoming screen that introduces users to the app's capabilities.

Overall, MsgGPT serves as a versatile tool for users seeking assistance, information, or simply engaging conversations with an AI assistant.

This application is a particle system visualization tool that allows users to create and manipulate a dynamic particle animation, referred to as the "Corona Particle System." The app provides an interactive canvas where particles are emitted and animated based on user-defined parameters, creating visually appealing effects.

To use the app, users can adjust various settings through a control panel that includes sliders and input fields. Key parameters include particle size, birth rate, lifetime, speed, gravity, and noise characteristics. Users can also modify the sphere boundary that defines the area in which particles are generated and interact with mouse movements to influence particle behavior.

The application is built using TypeScript and React, leveraging hooks for state management and effects. It utilizes a custom particle physics engine to simulate realistic particle behavior, including gravity, magnetic fields, and noise effects. The rendering is done on an HTML canvas, allowing for smooth animations and visual effects.

Key features of the app include:
- Real-time particle generation and animation based on user-defined configurations.
- Interactive controls for adjusting particle properties and visual effects.
- Mouse interaction that influences particle movement and behavior.
- A visual representation of particles with depth sorting and glowing effects.
- JSON output of the current configuration, allowing users to copy and share their settings.

Overall, this app serves as a powerful tool for visualizing particle systems, making it suitable for developers and artists interested in generative art and interactive simulations.

Minimalist X card with gradient.

X (Twitter) Card

This app is a user interface component library designed to showcase a set of animated buttons with a modern neumorphic design. It allows developers to easily integrate visually appealing buttons into their applications, enhancing user interaction through animations and responsive design.

To use the app, developers can import the button components into their React applications. The buttons are built using React and TypeScript, and they leverage the Framer Motion library for animations. The app is styled using Tailwind CSS, which provides utility-first CSS classes for rapid UI development. The layout is structured with a responsive design that adapts to different screen sizes.

Key features of the app include:
- A variety of button types, including primary action buttons, icon-only buttons, and floating action buttons, each with unique animations and hover effects.
- Support for state management, allowing buttons to reflect user interactions such as liking, bookmarking, and playing/pausing actions.
- A neumorphic design aesthetic that provides a modern look and feel, with subtle shadows and glowing effects to enhance the visual experience.
- Customizable button styles and animations, enabling developers to tailor the components to fit their application's branding and user experience needs.

Overall, this app serves as a comprehensive toolkit for developers looking to implement stylish and interactive buttons in their web applications.

A hero video dialog component for landing pages

Hero Video Dialog

Basic Sign-in with credentials or google.

Sign-in with Google

Raining Characters

Raining Characters

This application is a Point of Sale (POS) system designed for managing sales transactions, inventory, and customer interactions in a retail environment. It provides a user-friendly interface for both sales staff and administrators to efficiently handle various aspects of retail operations.

To use the app, users can navigate through different sections such as product management, order processing, customer management, and analytics. The main features include:

1. **Product Management**: Users can view, add, edit, and delete products. Each product has attributes such as name, price, category, stock quantity, and supplier information. The app allows filtering and searching for products based on various criteria.

2. **Order Processing**: Sales staff can add products to a cart, apply discounts, and manage customer information during checkout. The app calculates totals, taxes, and discounts automatically, providing a seamless checkout experience.

3. **Customer Management**: Users can manage customer information, including loyalty points and purchase history. The app allows for easy selection of customers during transactions and provides insights into customer behavior.

4. **Inventory Management**: The app tracks inventory levels and alerts users when stock is low. It allows for restocking items and managing supplier information.

5. **Analytics and Reporting**: Administrators can access sales reports, customer insights, and inventory statistics. The app provides visual representations of data, such as sales trends and top-selling products, to help in decision-making.

6. **Discount Management**: Users can apply predefined or custom discounts to transactions, enhancing customer satisfaction and promoting sales.

The application is built using modern web technologies, including TypeScript and React for the frontend, and utilizes a context API for state management. It also employs a modular architecture, allowing for easy maintenance and scalability.

Key features include a responsive design, intuitive user interface, and real-time updates to ensure that users have the most current information at their fingertips. The app is designed to streamline retail operations, improve customer service, and provide valuable insights into business performance.

138 Forks

Logo playground

1K Forks

1.1K Forks

904 Forks

306 Forks

Next.js podcast site

921 Forks

Next.js Flight Website

Corona Particle System

12 Forks

Framer Design Concept

409 Forks

172 Forks

1.2K Forks

HeroUI POS Design

Dynamic Island Todo app

Dynamic Island Todo app

First Person Starter

First Person Starter

Tetrahedron Physics is an interactive 3D physics simulation that showcases a wireframe tetrahedron filled with multiple bouncing balls. The application serves as a demonstration of fundamental physics concepts such as collision detection, gravity, and momentum, all presented in a minimalist visual style.

To use the app, simply load it in a web browser, and the simulation will start automatically. Users can observe the balls as they bounce and collide within the rotating tetrahedron, with the wireframe rendering allowing for a clear view of all interactions. The simulation provides an engaging way to visualize how the balls interact with each other and the tetrahedron's faces.

The app is built using several modern web technologies, including React and Next.js for the application framework, Three.js for 3D rendering, and React Three Fiber for integrating Three.js with React. Physics simulation is handled by React Three Rapier, while post-processing effects enhance the visual experience with wireframe rendering. Tailwind CSS is utilized for styling the application.

Key features of Tetrahedron Physics include wireframe rendering of 3D objects, real-time physics simulation, multiple colored balls with collision detection, a rotating tetrahedron container, post-processing outline effects, and a responsive design that adapts to different screen sizes. This combination of features makes the app not only visually appealing but also educational, providing insights into basic physics principles.

Tetrahedron Physics

Fitness App

Rollout Strategy

Rollout Strategy

Excel Spreadsheet with AI. Enter a prompt with the data that you want to input and see the magic happening.

NOTE: You must provide your own OpenAI API key

This application is a comprehensive content creation platform designed for users to create, edit, and manage various types of media, including audio, video, images, and text. The app provides a user-friendly interface that integrates AI tools to assist users in enhancing their content.

To use the app, users can navigate to different studios for audio, video, image, and text creation. Each studio offers specific tools and features tailored to the type of content being created. Users can upload their media files, apply various editing options, and utilize AI assistance for tasks such as improving audio quality, generating text, or applying filters to images.

The app is built using React and TypeScript, leveraging Tailwind CSS for styling. It incorporates various UI components such as cards, buttons, sliders, and tabs to create an intuitive user experience. The application also utilizes Lucide icons for visual elements and includes responsive design features for mobile and desktop users.

Key features of the app include:
- Audio Studio: Users can upload audio files, visualize waveforms, adjust volume and playback speed, and utilize AI tools for audio enhancement.
- Video Studio: Users can upload video files, edit timelines, apply effects, and generate captions using AI assistance.
- Image Studio: Users can upload images, apply filters, and utilize AI tools for image enhancement and generation.
- Text Studio: Users can create and edit text content, receive AI-generated suggestions, and analyze text statistics such as word count and reading time.
- Social Media Integration: Users can connect their social media accounts and manage their online presence directly from the app.

Overall, this application serves as a versatile tool for content creators, providing them with the necessary resources to produce high-quality media efficiently.

Neobrutalist UI design