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

...

Minimal Crypto Dashboard with realtime updates feature that updates pricing in 2 seconds (The pricing is not accurate - just an assumption for this project)

Crypto Dashboard with Live Updat

An ABC storybook creator generator powered by Google Gemini and the AI SDK

AI Story Book Creator

This application is designed to facilitate the moderation process for educational assessments, specifically for teachers and moderators at The City School. It provides a structured checklist that allows users to input and manage student data, question-wise moderation records, and evaluation criteria.

To use the app, users begin by filling out basic information such as the region, school name, exam and academic year, subject, teacher name, class, and date. Users can then add student ERP (Education Registration Portal) numbers, which are essential for tracking individual student assessments. The app allows for the entry of multiple ERP numbers, ensuring that only valid numeric entries are accepted.

The core functionality includes the ability to add and manage rows for each student's assessment, where users can input details such as question numbers, maximum marks, teacher marks, and moderator marks. Users can duplicate rows for students to streamline the process of entering data for multiple questions. The app also features a section for evaluating moderation criteria, including questions about overwriting in scripts, accuracy of marks, compliance with marking schemes, and overall ratings.

Key features of the app include:
- A user-friendly interface with input validation to ensure data integrity.
- The ability to dynamically add or remove student ERP numbers and moderation rows.
- A structured evaluation section with radio buttons for easy selection of criteria.
- An export function that allows users to download the entered data as a CSV file for further analysis or record-keeping.

The application is built using React, leveraging TypeScript for type safety and Next.js for server-side rendering capabilities. It utilizes various UI components for a consistent and responsive design, ensuring a smooth user experience across devices. The app is designed to enhance the efficiency of the moderation process, making it easier for educators to manage assessments and maintain accurate records.

Excel form from pdf

portfolio

Trading website

Forex Fund Trader

jjj

Event Managemant Website

Luminary Events Landing

Pricing Comparison Page

Pricing Comparison Page

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!

Fintech Landing

Fintech Landing

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

Next JS + Firebase Starter.

Important: the user needs to fill in the environment variables for this to work.

Firebase Starter

Art Gallery

v0-SFCC | Ecommerce Template

v0-SFCC | Ecommerce Template

SkillHub is a web application designed to connect freelancers with clients seeking various services. The platform serves as a marketplace where users can either become freelancers or find the right freelancer for their projects.

To use the app, users can navigate through a user-friendly interface that includes a homepage featuring categories of services, a section for featured gigs, testimonials from users, and a call-to-action for new users. Clients can post jobs, while freelancers can register and showcase their skills. The app also includes a skill verification feature, allowing freelancers to take tests to validate their expertise.

The application is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, and Tailwind CSS for styling. It utilizes components for modular design, ensuring a responsive and visually appealing user experience. The app also incorporates animations using Framer Motion for smooth transitions and interactions.

Key features of SkillHub include:
- A responsive layout with a navigation bar and footer for easy access to different sections of the app.
- A homepage that highlights categories, featured gigs, and user testimonials.
- A job posting feature for clients to find freelancers for their projects.
- A registration form for freelancers to create profiles and showcase their skills.
- A skill verification system that allows freelancers to take tests to earn a verified badge, enhancing their visibility to potential clients.
- A filtering system for browsing gigs based on categories, price, and freelancer levels.
- A mobile-friendly design that adapts to different screen sizes.

Overall, SkillHub aims to streamline the process of connecting freelancers with clients, making it easier for both parties to find opportunities and showcase their skills.

Skill hub marketplace

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

This application is designed to manage and display attachments associated with a blog post. It allows users to view, download, and manage various file types, including documents, images, videos, and audio files. The app is particularly useful for content creators and administrators who need to organize and present supplementary materials alongside their articles.

To use the app, users can navigate to a blog post where attachments are displayed. Each attachment is represented with its name, type, and size, along with options to preview or download the file. If the user has administrative privileges, they can also edit the attachment's label and metadata or delete the attachment entirely. The interface includes a dropdown menu for these actions, and a dialog box for editing attachment details.

The app is built using TypeScript and React, leveraging various UI components for a responsive and user-friendly experience. Key technologies involved include React for component-based architecture, TypeScript for type safety, and a custom UI library for consistent styling and functionality. The app also utilizes Lucide icons for visual representation of file types and actions.

Key features of the app include:
- Display of attachment details such as name, type, and size.
- Options to download or preview attachments.
- Administrative capabilities for editing and deleting attachments.
- Dynamic rendering of attachments with support for expanding and collapsing the view to manage space effectively.
- Visual indicators for different file types using icons and color-coded badges.

Overall, this application enhances the user experience by providing a straightforward way to manage and interact with attachments related to blog content.

Simple attachment component

The app is a JSON API Visualizer designed to fetch, inspect, and visualize JSON data from any public API endpoint in an interactive tree structure. It allows developers to easily explore and understand complex JSON structures by providing a user-friendly interface.

To use the app, users can enter a public API URL into the input field and click the "Fetch Data" button. The app will then retrieve the JSON data from the specified URL and display it in either a tree or graph format. Users can also upload a JSON file directly for visualization. The app includes features such as search functionality to find specific keys or values within the JSON data, as well as options to export the visualized data in various formats, including JSON, CSV, XML, SVG, and PNG.

The app is built using modern web technologies, including Next.js for server-side rendering and React for building the user interface. It utilizes Tailwind CSS for styling and employs various Radix UI components for accessibility and interactivity. The app is deployed on Vercel, ensuring fast performance and easy scalability.

Key features of the app include:
- Interactive tree and graph visualization of JSON data.
- Real-time API data fetching and error handling.
- Advanced search functionality to locate specific keys, values, or paths.
- Dark and light mode support for user preference.
- Copy-to-clipboard utilities for easy data handling.
- Options to upload JSON files for visualization.
- Export functionality to save visualized data in multiple formats.
- Responsive design for mobile and desktop users.

Overall, the JSON API Visualizer serves as a powerful tool for developers looking to work with and understand JSON data from various APIs.

Live api data explorer

Status badges UI component template for v0.

Magnetic button border effect that's used on v0 :')

Magnetic Buttons

The Earth 3D Explorer app is an interactive visualization tool that allows users to explore a detailed 3D model of Earth. It provides an immersive experience where users can rotate, zoom, and pan around the planet, gaining insights into its features and statistics.

To use the app, users can interact with the 3D model using mouse controls: left-clicking to rotate the view, scrolling to zoom in and out, and right-clicking to pan. The app includes a control panel at the bottom of the screen, featuring buttons to toggle auto-rotation, reset the view, and zoom in or out. An information panel can be displayed to provide key facts about Earth, such as its diameter, surface area, population, age, and rotation period.

The app is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Three.js for rendering the 3D graphics. The React Three Fiber library is utilized to integrate Three.js with React, allowing for a declarative approach to building 3D scenes. The Drei library enhances the experience with additional components like orbit controls and stars. The app also employs CSS for styling and layout, ensuring a visually appealing interface.

Key features of the Earth 3D Explorer app include:
- Interactive 3D model of Earth with realistic textures and atmospheric effects.
- Control panel for easy navigation and interaction.
- Auto-rotation feature for a dynamic viewing experience.
- Information panel providing educational content about Earth.
- Responsive design that adapts to different screen sizes.

Overall, the Earth 3D Explorer app serves as an engaging educational tool for users interested in learning more about our planet through an interactive 3D experience.

3D Earth View Demo

This application is a chat interface designed to facilitate intelligent conversations powered by advanced AI technology. It allows users to engage in real-time discussions, share images, and manage chat histories effectively.

To use the app, users can type messages into a text input area and submit them to receive AI-generated responses. The interface supports image uploads, enabling users to share visual content during conversations. Users can also edit their messages, regenerate responses, and manage their chat history through a sidebar that provides access to previous conversations.

The app is built using modern web technologies, including TypeScript and React for the frontend, with a focus on responsive design to ensure usability across devices. It utilizes libraries such as Tailwind CSS for styling, Lucide for icons, and Sonner for toast notifications. The application also incorporates state management hooks to handle chat history and user interactions seamlessly.

Key features of the app include:
- Real-time chat functionality with AI-generated responses.
- Image upload capability for sharing visual content.
- Editable messages and the option to regenerate responses.
- A sidebar for managing chat history, including options to delete, rename, and favorite chats.
- Responsive design for optimal use on both desktop and mobile devices.
- Toast notifications for user feedback on actions such as saving chats or sharing content.

Overall, this chat application provides a comprehensive platform for engaging in intelligent conversations while offering a user-friendly interface and robust features for managing chat interactions.

Chat UI with Vibration

This application is a mini e-commerce management system designed for administrators to manage product listings. It allows users to create, read, update, and delete products, as well as manage user authentication and image uploads.

To use the app, users must first sign up or log in using their email and password. Once authenticated, they can access the product management interface where they can view a list of products, add new products, edit existing ones, and delete products as needed. The application also supports image uploads for products, allowing users to provide visual representations of their items.

The app is built using several technologies, including React for the frontend, TypeScript for type safety, and Supabase as the backend service for database management and authentication. The application utilizes PostgreSQL for data storage, with Row Level Security (RLS) policies to ensure that only authenticated users can perform actions on the product data.

Key features of the app include:
- User authentication with sign-up and login functionality.
- A product management interface that allows users to view, add, edit, and delete products.
- Image upload functionality for product images, with support for manual URL input.
- Real-time notifications for user actions, such as successful product creation or errors.
- Form validation to ensure that product data meets specified criteria before submission.
- A responsive design that adapts to different screen sizes for usability on various devices.

Overall, this application provides a comprehensive solution for managing an e-commerce product catalog, with a focus on user experience and data integrity.

Supabase Mini Ecommerce

The HealthCare Clinic app is a comprehensive web application designed to facilitate healthcare services for patients, doctors, and administrative staff. It provides a user-friendly interface for managing appointments, accessing medical records, and obtaining health-related information.

Users can navigate through various sections of the app, including a home page that highlights the clinic's services, a blog for health tips and articles, and a contact page for inquiries. The app also features a patient portal where users can book appointments, view their medical history, and communicate with healthcare providers.

For healthcare professionals, the app includes a doctor dashboard that allows physicians to manage their schedules, view patient appointments, and access medical records. Administrative users have access to an admin dashboard for managing staff, appointments, and clinic analytics.

Key features of the app include:
- User authentication for patients, doctors, and administrators, ensuring secure access to personal information.
- Appointment booking functionality, allowing patients to select doctors, dates, and times for their visits.
- A blog section that provides informative articles on various health topics.
- A contact form for patients to reach out to the clinic with questions or concerns.
- A responsive design that adapts to different screen sizes, ensuring usability on both desktop and mobile devices.

The app is built using modern web technologies, including TypeScript, React, and Next.js, which provide a robust framework for developing interactive user interfaces. The application also utilizes a context API for managing authentication state and a variety of UI components for a consistent user experience.

Overall, the HealthCare Clinic app aims to enhance the patient experience while streamlining operations for healthcare providers, making it a valuable tool in the healthcare industry.

Patient portal features

Tabs animations with smooth transition

Animated tabs switcher

by tulioportela.com
This application is a web-based interactive tool that utilizes physics simulation to create a dynamic and visually engaging experience with tags representing various topics. The tags can be clicked and are affected by gravity and other physical forces, providing a playful interaction model.

To use the app, users can simply click on the tags displayed on the canvas. The tags are designed to float and bounce around the screen, simulating a physics environment powered by the Matter.js library. The application is responsive and adjusts to different screen sizes, ensuring a consistent experience across devices.

The app is built using React and TypeScript, leveraging Next.js for server-side rendering and routing. It incorporates various UI components styled with Tailwind CSS, ensuring a modern and clean design. The physics simulation is handled by Matter.js, which is loaded dynamically to optimize performance.

Key features of the app include:
- Interactive tags that respond to user clicks and physics forces.
- A visually appealing canvas that showcases the tags in a playful manner.
- Responsive design that adapts to different screen sizes.
- Integration with Matter.js for realistic physics simulation.
- Clean and modern UI components built with React and styled using Tailwind CSS.

Overall, this application serves as an engaging way to explore topics through a fun and interactive interface, making it suitable for educational purposes or as a creative tool.

Tags Gravity Animation

The AI Travel Assistant app is designed to enhance travel planning by providing users with AI-powered voice assistance. It helps users discover attractions, hotels, and restaurants that fit their budget and preferences. The app features a user-friendly interface that allows for both voice and manual input, making it accessible to a wide range of users.

To use the app, users can either speak their travel preferences or type them into a search bar. The voice assistant guides users through a conversation, asking for their desired destination, budget, and interests. Based on the input, the app generates tailored recommendations for attractions, hotels, and restaurants. Users can also view a map of their chosen destination.

The app is built using modern web technologies, including TypeScript and React, ensuring a responsive and interactive user experience. It utilizes various UI components for buttons, sliders, and tabs, enhancing the overall design and functionality. The app also incorporates speech synthesis for voice responses, allowing for a more engaging interaction.

Key features of the AI Travel Assistant include:
- Voice and manual input options for user preferences.
- A conversation history that tracks user interactions with the assistant.
- Dynamic recommendations for attractions, hotels, and restaurants based on user input.
- A budget slider to help users set their spending limits.
- A language selector to accommodate users in English, French, and Spanish.
- An interactive map view that displays the selected destination.

Overall, the AI Travel Assistant app aims to simplify the travel planning process by leveraging AI technology to provide personalized recommendations and a seamless user experience.

Voice assistance ui

FAQ Section

Design system inspired by Bauhaus and Brutalism

Bauhaus Brutalism Design System

An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

Flappy Bird, but rebuilt entirely with v0! The same addictive game we had growing up. Click space to flap, dodge the pipes, and hear those iconic flapping sounds as you try to beat your high score.

Wavey Background

Wavey Background

Hoodie Store

The app is a comprehensive sales management solution designed to help businesses manage their sales, inventory, customers, and reports efficiently. It provides a user-friendly interface for tracking sales, managing customer information, and generating reports on sales performance and inventory status.

To use the app, users can log in with their credentials. Once logged in, they can navigate through various sections such as Sales, Inventory, Customers, and Reports. Users can add new sales, manage existing sales, and view detailed reports on sales and inventory. The app also supports barcode scanning for quick product addition and checkout processes.

The app is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, and utilizes local storage and IndexedDB for data persistence. It employs libraries such as Recharts for data visualization, Lucide for icons, and Tailwind CSS for styling.

Key features of the app include:
- User authentication and role-based access control, allowing different permissions for Admin, Sales, and Inventory roles.
- A dashboard that provides an overview of total sales, active customers, and inventory status.
- Sales management capabilities, including the ability to create, edit, and delete sales, as well as process payments.
- Inventory management features that allow users to add, edit, and track products, including low stock and out-of-stock alerts.
- Customer management functionalities to add, edit, and view customer details and purchase history.
- Reporting tools that generate insights on sales performance, customer distribution, and inventory value.
- Data import and export capabilities for bulk management of products and expenses using Excel or CSV files.
- A responsive design that adapts to different screen sizes, ensuring usability on both desktop and mobile devices.

Overall, the app aims to streamline sales operations and provide valuable insights to help businesses make informed decisions.

Swiss design website v1

This application is a dynamic portfolio website designed to showcase the skills, education, projects, and contact information of an individual, specifically tailored for a graduate in AI and Data Science. The app utilizes modern web technologies, including Next.js for server-side rendering and React for building user interfaces, along with Three.js for 3D graphics and animations.

Users can navigate through various sections of the portfolio, including Home, About, Education, Skills, Experience, Projects, and Contact. Each section is animated and responds to user interactions, enhancing the overall user experience. The app features a welcome screen that displays greetings in multiple languages, creating an engaging entry point for visitors.

Key features of the app include:

1. **Dynamic Content**: The portfolio data is structured in a way that allows easy updates and modifications, ensuring that the information remains current and relevant.

2. **3D Visuals**: The application incorporates 3D elements using Three.js, including interactive orbs, particle fields, and morphing geometries, which provide a visually appealing background and enhance the aesthetic of the portfolio.

3. **Responsive Design**: The layout is responsive, adapting to different screen sizes and devices, ensuring a seamless experience for users on mobile, tablet, and desktop.

4. **Smooth Scrolling and Navigation**: The app features smooth scrolling and a navigation bar that highlights the current section, allowing users to easily explore the content.

5. **Interactive Elements**: Various sections include interactive components, such as hover effects on skills and projects, which provide additional information and enhance user engagement.

6. **Contact Form**: A contact section allows visitors to reach out directly through a form, facilitating communication and networking opportunities.

7. **Animation and Transition Effects**: Each section includes animations that trigger as the user scrolls, creating a lively and engaging experience.

The application is built using TypeScript for type safety, ensuring a robust codebase. It also employs Tailwind CSS for styling, allowing for rapid development of responsive and visually appealing components. The use of libraries such as Framer Motion for animations and Lucide React for icons further enhances the user interface.

Overall, this portfolio application serves as a comprehensive showcase of the individual's qualifications and projects, leveraging modern web technologies to create an engaging and interactive experience for visitors.

This app is an OTP (One-Time Password) verification tool designed to enhance user authentication processes. It allows users to enter a 6-digit verification code sent to their email address, ensuring secure access to their accounts or services.

To use the app, users will receive a verification code via email, which they need to input into the provided fields. The app features six individual input fields for each digit of the OTP, allowing users to enter the code easily. Users can navigate through the fields using keyboard inputs, and the app supports pasting the entire code into the first field. Once all digits are entered, users can click the "Verify Code" button to submit their input. If the entered code matches the expected value, the app confirms successful verification; otherwise, it displays an error message.

The app is built using TypeScript and React, leveraging the Tailwind CSS framework for styling and layout. It incorporates animations using the Framer Motion library to enhance user experience during interactions, such as input transitions and verification feedback.

Key features of the app include:
- A user-friendly interface with clear input fields for OTP entry.
- Real-time validation and error handling, providing immediate feedback for incorrect inputs.
- A countdown timer for resending the OTP, ensuring users can request a new code after a specified duration.
- Visual feedback for successful verification, including animations and confirmation messages.
- Responsive design that adapts to various screen sizes, ensuring accessibility on different devices.

Overall, this app provides a secure and efficient method for OTP verification, enhancing the authentication process for users.

1.7K Forks

600 Forks

6.3K Forks

Sales app design

194 Forks

3D portfolio website

Beautiful OTP page

Project Management System

Project Management System

Health App

Policy Process Flow

Policy Process Flow

v0 Blocks

Tradewise is your go-to trading app designed for all traders. Experience seamless trading with real-time market data, advanced charting tools, and secure transactions. Personalize your alerts and explore educational resources to enhance your trading skills. Join the Tradewise community and trade with confidence today!

Marketplace

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 Game Card Generator that allows users to create and customize their own game card assets. It provides a user-friendly interface for designing cards by adjusting various settings and content elements.

To use the app, users can start by selecting text elements to edit, such as the title, subtitle, and bottom text. Each text element can be customized in terms of font size, font family, font weight, color, and alignment. Users can also upload images to be included on the card, adjusting their scale and position as needed. The card's overall appearance can be modified by changing the outer and inner border colors, border radius, and body color. Additional effects like shadows and gradients can also be applied to enhance the card's design.

The app is built using React and TypeScript, leveraging various UI components for a responsive and interactive experience. It utilizes Tailwind CSS for styling, ensuring a modern and clean design. Key features include a color picker for selecting colors, sliders for adjusting sizes and positions, and a dialog for editing text elements. Users can export their final designs as PNG images for easy sharing or printing.

Overall, the Game Card Generator provides a comprehensive set of tools for creating personalized game cards, making it suitable for game developers, designers, and hobbyists alike.

Custom Game Card Maker

This application is a React-based UI Builder designed to facilitate the creation of user interfaces through a drag-and-drop interface. Users can visually construct layouts by adding various components such as buttons, inputs, text, images, and divs into a grid layout. The app allows for the customization of component properties and the arrangement of these components within a responsive grid system.

To use the app, users can select components from a palette and drag them into designated columns within the layout editor. Each component can be configured through a properties panel, where users can modify attributes such as text, size, and styles. The layout can be adjusted by adding or removing columns, and users can also rearrange components and columns through drag-and-drop functionality. Once the layout is complete, users can generate and preview the corresponding React code, which can be copied or downloaded for use in their projects.

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

- A component palette for easy access to UI elements.
- A layout editor that supports nested columns and responsive design.
- A properties panel for editing component attributes.
- Code generation that outputs the React code for the created layout.
- A preview panel that allows users to see their layout in real-time.
- State persistence using local storage, enabling users to save and restore their layouts.

Overall, this UI Builder provides a user-friendly interface for developers to create and customize React components without needing to write code manually, streamlining the development process.

React ui builder

GencyAI landing page