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

First Person Starter

First Person Starter

Real-time physics-based sandpainter with built-in earthquake

Real-time sand painter

The app is a furniture e-commerce platform called Dilavia, designed to provide users with a seamless shopping experience for high-quality furniture, including beds, sofas, and armchairs. The app features a modern and responsive design, built using Next.js and TypeScript, with a focus on performance and user experience.

Users can browse through various categories of furniture, view detailed product information, and add items to their cart or favorites. The app includes a dynamic filtering system that allows users to refine their searches based on categories, subcategories, styles, colors, and price ranges. Additionally, users can sort products by popularity or price.

Key features of the app include:

1. **Product Catalog**: A comprehensive catalog displaying various furniture items with images, descriptions, prices, and availability status.

2. **Quick View**: Users can quickly view product details in a modal without navigating away from the catalog page.

3. **Favorites and Cart Management**: Users can add products to their favorites for later reference and manage their shopping cart, including updating quantities and removing items.

4. **Responsive Design**: The app is optimized for both desktop and mobile devices, ensuring a consistent experience across different screen sizes.

5. **Search Functionality**: A search dialog allows users to find specific products quickly.

6. **User Authentication**: The app supports user authentication for managing favorites and cart items.

7. **Delivery and Payment Information**: Detailed information about delivery options, payment methods, and warranty policies is provided to users.

8. **Customer Reviews**: Users can read reviews from other customers to help inform their purchasing decisions.

The app leverages various technologies, including React for the frontend, TypeScript for type safety, and Tailwind CSS for styling. It also utilizes Swiper for image carousels and Lucide for icons. The backend is powered by a RESTful API that handles data fetching for products, ensuring that users have access to the latest information.

To use the app, users can navigate through the catalog, apply filters, and view product details. They can add items to their cart or favorites and proceed to checkout when ready. The app also provides a user-friendly interface for managing their account and preferences.

Minimal SignUp Page Design

Minimal SignUp Page Design

A nebulous golden ratio loading screen.

Golden Ratio Loading Screen

Card Hover Effect Demo

Card Hover Effect Demo

Motopagina

tooltip smootly moves to item being hovered

This application is a two-player pong game titled "PING VS PONG," designed with a retro aesthetic. The game allows two players to control their paddles and compete against each other, with the objective of scoring points by preventing their ball from going out of bounds. The first player to reach 10 points wins the game.

To use the app, players start by setting up their profiles, including their names and paddle colors. They can also customize the controls for moving their paddles left and right. Once the setup is complete, players can start the game, where they will see their scores and the game canvas displaying the action. The game features a countdown before each round and provides visual feedback through glowing effects and scanlines, enhancing the retro feel.

The app is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Tailwind CSS for styling. The game logic is implemented in JavaScript, utilizing the HTML5 canvas for rendering the game graphics. The application also employs hooks for managing state and effects, ensuring a responsive and interactive experience.

Key features of the app include:
- Customizable player profiles with name and color selection.
- Adjustable ball speed for varying game difficulty.
- Real-time score tracking and display.
- A visually appealing retro design with animations and effects.
- Responsive layout that adapts to different screen sizes.
- A countdown timer before each round starts, adding to the excitement.

Overall, "PING VS PONG" combines nostalgic design with engaging gameplay, making it a fun experience for players looking to relive classic arcade action.

OleyArcade is a web application that offers a collection of family-built, AI-powered games designed to challenge users' minds and spark their imaginations. The app features a variety of games, each with unique gameplay mechanics and themes, such as "WordIsles," "Emoji Grid," "CatMazes," and "Break the Ice." Users can explore these games through an engaging interface that highlights each game's title, short description, and a link to play.

To use the app, users can navigate through the homepage, which includes a hero section that introduces OleyArcade and a grid layout displaying the available games. Each game card provides a screenshot, a brief description, and a button to play the game. The app is designed to be visually appealing, with animations and a responsive layout that adapts to different screen sizes.

The application is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Tailwind CSS for styling. The Monaco Editor is integrated for any code editing features, allowing for a rich text editing experience. The app also utilizes Vercel for deployment, ensuring fast load times and scalability.

Key features of OleyArcade include:
- A collection of AI-powered games that are family-friendly and engaging.
- A visually appealing design with animations and responsive layouts.
- Game cards that provide essential information and direct links to play.
- Integration of the Monaco Editor for enhanced code editing capabilities.
- A dark mode theme that can be toggled based on user preferences.

Overall, OleyArcade aims to provide a fun and interactive platform for users to enjoy games while fostering creativity and strategic thinking.

The app is a web-based game titled "Loke I Jörn," where players navigate through a village, collecting beers and bags while avoiding various obstacles. The game is designed to be engaging and interactive, providing a fun experience for users of all ages.

To use the app, players start by clicking the "Start Game" button on the main screen. Once the game begins, they control a character that can move left, right, jump, and duck using keyboard controls or on-screen buttons for mobile devices. The objective is to collect as many items as possible while avoiding obstacles that appear randomly on the screen. The game tracks the player's score, beer count, and bag count, displaying this information prominently during gameplay.

The app is built using TypeScript and React, leveraging modern web technologies to create a responsive and dynamic user interface. Key features include:

- A visually appealing game environment with a gradient background and animated character movements.
- Various collectible items (beers and bags) that players can gather to increase their score.
- Different types of obstacles (rocks, fences, trees, and cows) that players must avoid to prevent game over.
- A mobile-friendly design that adapts to different screen sizes, providing touch controls for mobile users.
- Real-time score tracking and game state management, including idle, playing, and game over states.
- Collision detection to manage interactions between the character, collectibles, and obstacles.

Overall, "Loke I Jörn" offers an engaging gaming experience that combines simple mechanics with increasing difficulty, making it suitable for casual gamers looking for a fun challenge.

Next.js infinite runner

This application is a web-based chess game that allows users to play chess against another player in real-time. The app features a fully interactive chessboard where players can select and move pieces according to the rules of chess. The game tracks the current player's turn, displays the game status, and maintains a history of moves made during the game.

To use the app, users simply click on the chess pieces to select them and then click on valid squares to move them. The app highlights valid moves for the selected piece, and players can reset the game at any time using the provided controls. The game also indicates when a player is in check, checkmate, or stalemate.

The application is built using TypeScript and React, leveraging modern web technologies to create a responsive and interactive user interface. Key components include a chessboard, game controls, and game information displays, all of which are designed to provide a seamless user experience.

Key features of the app include:
- An interactive chessboard that visually represents the game state.
- Real-time validation of moves based on chess rules, including checks for check, checkmate, and stalemate conditions.
- A move history that logs all actions taken during the game.
- A reset functionality to start a new game at any time.
- Visual indicators for the current player's turn and game status updates.

Overall, this chess game app provides a comprehensive and engaging platform for chess enthusiasts to enjoy the game online.

...

...

A login page with a muted background color

BrewHaven is a web application designed for coffee enthusiasts to explore, purchase, and enjoy premium coffee products. The app features a user-friendly interface that allows users to browse a variety of coffee beans and equipment, view detailed product descriptions, and manage their shopping cart seamlessly.

To use BrewHaven, users can navigate through the homepage to discover featured products and access different sections such as the shop, about, and contact pages. The app includes a hero section that highlights the unique selling points of BrewHaven, such as ethically sourced beans and fast delivery. Users can add products to their cart, adjust quantities, and proceed to checkout where they can enter shipping and payment information.

The application is built using Next.js, a React framework that enables server-side rendering and static site generation for optimal performance. It utilizes TypeScript for type safety and improved developer experience. The UI components are styled with Tailwind CSS, providing a responsive and modern design. The app also incorporates Lucide icons for visual elements and toast notifications for user feedback.

Key features of BrewHaven include:
- A responsive layout that adapts to different screen sizes.
- A product listing page with filtering options based on categories, roast levels, and origins.
- Detailed product pages that showcase images, descriptions, and customer reviews.
- A shopping cart that allows users to view selected items, adjust quantities, and calculate totals including shipping and tax.
- A secure checkout process with multiple payment options.
- A newsletter subscription feature for users to receive updates on new products and promotions.

Overall, BrewHaven aims to provide a comprehensive and enjoyable shopping experience for coffee lovers, ensuring they can easily find and purchase their favorite brews.

Simple website clone

A template for v0 using React Three FIber.

React Three Fiber Ray Marching

Raining Characters

Raining Characters

Interactive 3D Cube that reflects 360 HDR scenes. These presets are part of the `@react-three/drei` library and are loaded from a CDN when used.

Interactive 3D Cube with Environments

A file tree similar to the file tree in next js documentation

NextJS doc like file tree

Thanks to @chalda-pnuzig for providing complete list of emojis!
Please check out that wonderful repo: https://github.com/chalda-pnuzig/emojis.json

This application is an emoji picker tool designed to allow users to select emojis from a categorized list. The app features a user-friendly interface that displays a card with a title and description, along with a visual representation of the currently selected emoji. Users can interact with the emoji picker to choose their desired emoji, which will then be displayed prominently on the screen.

To use the app, users simply click on the emoji picker, which opens a popover containing a search input and a grid of emojis organized by categories. Users can search for specific emojis using the search bar, and the results will dynamically filter based on the input. The emojis are displayed in a grid format, and users can click on any emoji to select it, which updates the displayed emoji on the main card.

The application is built using React and TypeScript, leveraging various components from a UI library for styling and functionality. Key technologies involved include React for the component structure, TypeScript for type safety, and a JSON file containing emoji data categorized for easy access. The app also utilizes hooks such as useState and useEffect to manage state and side effects.

Key features of the app include:
- A visually appealing card layout for displaying the selected emoji.
- A searchable emoji picker that allows users to find emojis quickly.
- Categorization of emojis for better organization and user experience.
- Dynamic updates to the selected emoji based on user interaction.
- Responsive design that adapts to different screen sizes.

Overall, this emoji picker app provides a simple yet effective way for users to select and display emojis in their applications or messages.

Emoji picker component

Shadcn multi select combo box with fixed width and selected count

Multi Select Combobox

Spotted a delightful animation on the @vercel website and wondered: Can we recreate this in @v0? The answer is a resounding yes—check out this seamless implementation!

https://vercel.com/ai

Animated Music Player

This application is a comprehensive doctor appointment booking platform designed to facilitate the scheduling of medical appointments with various healthcare professionals. Users can search for doctors based on specialty, location, and availability, and manage their appointments through a user-friendly interface.

To use the app, users can create an account or log in to access their appointment history and book new appointments. The app features a search function that allows users to filter doctors by specialty, view detailed profiles of each doctor, and check their availability. Users can also manage their upcoming, completed, and cancelled appointments, with options to cancel or rebook as necessary.

The application is built using modern web technologies, including TypeScript and React for the frontend, and utilizes Next.js for server-side rendering and routing. It incorporates various UI components for a responsive design, including buttons, cards, and forms, and leverages a context API for managing language preferences and authentication states.

Key features of the app include:
- A searchable directory of doctors with detailed profiles, including specialties, ratings, and availability.
- An appointment management system that allows users to view, cancel, and reschedule appointments.
- A multi-step booking form that collects patient information and appointment details.
- Payment processing capabilities for booking appointments, with options for credit card and PayPal payments.
- Language support to cater to a diverse user base.
- A responsive design that ensures usability across different devices.

Overall, this application aims to streamline the process of finding and booking medical appointments, enhancing the user experience in managing healthcare needs.

Doctor appointment app

HTML code editor

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

Simple high-end landing page only needs the sata and the photos

Sample Landing Page

Design Tool

Compartmentalise saving within a single page whilst improving visibility of changes.

Settings page saving pattern

A chatbot built with the AI SDK that includes a generative UI tool call.

Generative UI Chatbot

Random Shapes Grid

Random Shapes Grid

lukmansk's Next.js landing page

lukmansk's Next.js landing page

Crypto Trading Interface

Crypto Trading Interface

This app is a dashboard application designed to provide users with an overview of key metrics and activities related to their projects and business performance. It features a responsive layout that includes a sidebar for navigation and a main content area for displaying various statistics and charts.

To use the app, users can navigate through the sidebar, which includes options such as Home, Analytics, Projects, Calendar, Payments, and Settings. The sidebar can be toggled between an expanded and collapsed state for better usability. The main content area displays an overview of the dashboard, including statistics like Total Revenue, Subscriptions, Active Users, and Conversion Rate, presented in card format. Users can also view charts that illustrate revenue over time and traffic sources.

The app is built using TypeScript and React, leveraging various UI components from a library that includes cards, buttons, avatars, inputs, and dropdown menus. It utilizes state management with React's useState hook to control the sidebar's visibility. The app also incorporates icons from the Lucide React library for visual representation of different features.

Key features of the app include:
- A collapsible sidebar for easy navigation.
- A search input for quick access to specific information.
- Dynamic cards displaying important metrics with visual indicators of performance changes.
- Tabs for viewing data over different time frames (day, week, month).
- Charts for visualizing revenue trends and traffic sources.
- A recent activity section that lists the latest actions taken by team members, enhancing collaboration and awareness.

Overall, this dashboard app serves as a comprehensive tool for users to monitor their business activities and make informed decisions based on real-time data.

Simple dashboard

Dynamic Table with filer and group by

Shopify Product Page Design

Shopify Product Page Design

This application is a Kanban board designed to help users manage tasks visually through a drag-and-drop interface. It allows users to create, update, and organize tasks across different columns representing various stages of a workflow, such as "To Do," "In Progress," "Blocked," and "Completed."

To use the app, users can add new columns and tasks, move tasks between columns, and edit task details, including titles, descriptions, due dates, subtasks, and custom fields. Users can also set up automation rules that automatically move tasks based on specific conditions, such as due dates or completion of subtasks.

The app is built using TypeScript and React, leveraging libraries such as @hello-pangea/dnd for drag-and-drop functionality and Tailwind CSS for styling. Key features include:

- A responsive Kanban board layout that allows for easy task management.
- The ability to create and delete columns and tasks.
- Drag-and-drop functionality for moving tasks between columns.
- Task details sidebar for editing task information, including subtasks and custom fields.
- Automation rules that can be configured to move tasks automatically based on defined conditions.
- A user-friendly interface with modals and popovers for adding and editing tasks and rules.

Overall, this Kanban board application provides a comprehensive solution for task management, enhancing productivity through visual organization and automation.

This application is a comprehensive earthquake monitoring system designed to track seismic activity both in Turkey and globally. It provides users with real-time data on earthquakes, alerts, and monitoring station statuses, making it a valuable tool for researchers, emergency responders, and the general public.

To use the app, users can navigate through various sections, including a dashboard that displays recent seismic activity, alerts, and monitoring station information. The app features a user-friendly interface with tabs for different functionalities, such as viewing recent earthquakes, global seismic alerts, and detailed reports. Users can also customize their notification settings and view statistics related to seismic activity.

The application is built using modern web technologies, including TypeScript and React for the frontend, with Tailwind CSS for styling. It utilizes a responsive design to ensure usability across different devices. The app fetches data from simulated APIs to provide users with up-to-date information on seismic events, including magnitude, depth, and location.

Key features of the app include:
- Real-time monitoring of earthquakes with detailed information on each event.
- A dashboard that summarizes recent seismic activity and alerts.
- Interactive maps displaying earthquake locations and monitoring stations.
- Customizable notification settings for alerts based on user preferences.
- Comprehensive reports and statistics on seismic activity over various timeframes.
- A console for system logs and monitoring station statuses.

Overall, this app serves as a vital resource for understanding and responding to seismic events, enhancing public awareness and safety regarding earthquakes.

Futuristic Dashboard

Language Learning App

Language Learning App

This application, named MediHomeTz, is designed to provide users with access to medical personnel services directly at their homes in Tanzania. It connects patients with qualified healthcare professionals, including doctors, nurses, physiotherapists, and caregivers, facilitating a convenient and personalized healthcare experience.

To use the app, users can navigate through various sections, including Home, Services, Booking, About, and Contact. The Home page features a hero section that highlights the service offerings and provides quick access to booking appointments. Users can select the type of service they need, schedule an appointment, and choose their preferred payment method, which includes options like mobile money, credit/debit cards, and cash on arrival.

The app is built using modern web technologies, including TypeScript, React, and Next.js, which enable server-side rendering and dynamic routing. It utilizes a middleware function to handle locale preferences, ensuring that users receive content in their preferred language, either English or Swahili. The application also employs a dictionary system to manage translations and content for different languages.

Key features of the app include:
- A responsive design that adapts to various screen sizes, ensuring usability on both desktop and mobile devices.
- A booking form that allows users to input their details, select services, and schedule appointments with ease.
- A testimonials section that showcases user experiences, enhancing trust and credibility.
- A services section that outlines the various healthcare services offered, complete with descriptions and features.
- A contact page that provides users with essential information, including company details, operating hours, and a map to the service area.
- A feedback form that allows users to share their experiences and suggestions for improvement.

Overall, MediHomeTz aims to revolutionize healthcare delivery in Tanzania by leveraging technology to make quality medical services accessible and convenient for everyone.

Gokul's Terminal simpl Portfolio

Gokul's Terminal simpl Portfolio

Medik Center

fgfg

The PaperMind app is designed to enhance the research experience for academic professionals by providing an intelligent memory system and AI-powered insights. It allows users to upload research papers, visualize connections between ideas, and access advanced reading features.

To use the app, users can upload PDF files or provide URLs to research papers. Once uploaded, the app processes the documents and enables users to interact with the content through a memory graph that visualizes relationships between key highlights and concepts. Users can search for specific highlights, filter results, and select nodes in the graph to view detailed information about the associated research.

The app is built using modern web technologies, including TypeScript and React, with a focus on responsive design to accommodate both desktop and mobile users. It utilizes the Next.js framework for server-side rendering and routing, and employs Tailwind CSS for styling, ensuring a clean and user-friendly interface.

Key features of the PaperMind app include:
- A memory graph that visually represents connections between research highlights.
- The ability to upload papers directly or import them via URLs.
- AI-powered explanations for selected text, enhancing understanding of complex concepts.
- A search function to quickly find specific highlights or papers.
- Responsive design that adapts to different screen sizes, making it accessible on both desktop and mobile devices.
- Integration with a toast notification system to provide feedback on user actions, such as successful uploads or saved highlights.

Overall, PaperMind aims to streamline the research process, making it easier for users to read, understand, and connect various academic papers.

Research paper app

Web design gallery

Audio Analysis Platform

Audio Analysis Platform

This application is designed to facilitate the learning of the Japanese language, focusing on writing, vocabulary, translation, and progress tracking. It provides users with interactive tools to practice writing Japanese characters, learn vocabulary, translate between French and Japanese, and monitor their learning progress.

To use the app, users can navigate through various sections, including a writing practice area for Hiragana and Katakana, a vocabulary section categorized by difficulty levels, a translation tool for converting phrases between French and Japanese, and a progress tracking feature that displays completed lessons and overall learning statistics. Users can engage with the app by entering text, drawing characters on a canvas, or selecting vocabulary words to learn.

The app is built using modern web technologies, including TypeScript and React, with Next.js as the framework for server-side rendering and routing. It utilizes a variety of UI components for a responsive and user-friendly interface, including buttons, cards, tabs, and input fields. The application also incorporates animations and visual elements, such as cherry blossom petals, to enhance the user experience.

Key features of the app include:
- A writing practice tool that allows users to draw Japanese characters on a canvas and receive feedback on their pronunciation.
- A vocabulary section that categorizes words into beginner, intermediate, phrases, and insults, with the ability to search and flip cards for translations.
- A translation tool that enables users to translate phrases between French and Japanese, with a built-in dictionary for reference.
- A progress tracking feature that displays users' learning statistics, including completed lessons and vocabulary mastery.
- An engaging and visually appealing design that incorporates animations and responsive layouts.

Overall, this app serves as a comprehensive platform for anyone looking to learn Japanese, providing a variety of interactive tools and resources to support their language learning journey.

Japanese learning site

The Lean app is a virtual sales and operations agency designed to assist purpose-driven businesses in simplifying, automating, and scaling their operations. The app provides a platform for users to access various services, including business strategy development, systems and automation implementation, sales enablement, and technical implementation of CRM and automation platforms.

To use the app, users can navigate through different sections, including Home, About, Services, Pricing, and Contact. Each section provides detailed information about the services offered, client success stories, and transparent pricing options. Users can also book free consultations directly through the app to discuss their specific needs and how Lean can assist them.

The app is built using modern web technologies, including TypeScript, React, and Tailwind CSS, ensuring a responsive and visually appealing user interface. It leverages Next.js for server-side rendering and routing, enhancing performance and SEO capabilities. The app also incorporates a theme provider for consistent styling and supports dark mode.

Key features of the Lean app include:
- A user-friendly interface with easy navigation across various sections.
- Detailed service descriptions and pricing plans tailored for different business needs.
- Client success stories showcasing measurable results achieved through Lean's services.
- A booking system for free consultations, allowing potential clients to engage with Lean's team.
- Responsive design that adapts to different screen sizes, ensuring accessibility on both desktop and mobile devices.

Overall, the Lean app serves as a comprehensive resource for businesses looking to enhance their operations through strategic consulting and technical implementation.

Consulting website

Hey, check out Glamour Salon! It’s a unisex salon that offers everything from haircuts and beard grooming to bridal makeup and spa facials. They’ve got a super skilled team, amazing services, and a relaxing vibe. You can browse their gallery for ideas, see what clients are saying, and even book appointments online. Perfect for anyone looking to pamper themselves or get ready for a special occasion!

focus, gotta lock in dawg.