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

...

...

This is made for graphyn.xyz just for fun

AI SaaS Landing Hero with Video

Vis Timeline Gantt

Vis Timeline Gantt

The LinkedIn Connections Analyzer is a web application designed to help users analyze their professional network by processing their LinkedIn connections data. The app allows users to upload a CSV file containing their LinkedIn connections, which is then parsed and analyzed to provide insights about their network.

To use the app, users simply need to upload their "Connections.csv" file, which can be obtained from LinkedIn's data export feature. Once the file is uploaded, the app processes the data and displays the number of contacts loaded. Users can then interact with the application by asking questions about their network, and the app will provide responses based on the analyzed data.

The application is built using TypeScript and React, leveraging various technologies such as the csv-parse library for CSV parsing, Vercel KV for data storage, and the OpenAI SDK for generating AI-driven responses. The app features robust error handling to manage issues related to file uploads and parsing, ensuring a smooth user experience.

Key features of the LinkedIn Connections Analyzer include:
- CSV file upload functionality with validation to ensure the correct file type is submitted.
- A robust parser that handles various CSV formatting issues, such as missing newlines and extra commas.
- In-memory and KV storage options for managing user data and session information.
- An interactive chat interface that allows users to ask questions about their network, with AI-generated responses based on their connections.
- Detailed error messages and sample data display to assist users in troubleshooting any issues with their uploaded files.

Overall, the LinkedIn Connections Analyzer provides a user-friendly interface for individuals looking to gain insights into their professional relationships and optimize their networking strategies.

Project with chat API

This application is a Batching Demo designed to showcase the efficiency of message batching in a messaging system. It allows users to configure batch parameters, send messages, and visualize the impact of different batching strategies on message processing and cost savings.

To use the app, users can adjust settings such as the maximum batch size and message price through a settings modal. They can then send individual messages or bulk messages to see how the system handles them under different batching strategies: No Batching, Regular Batching, and Leading Debounce. The app provides real-time feedback on the status of messages, including whether they are sending, waiting, successful, or failed.

The application is built using TypeScript and React, leveraging libraries such as Framer Motion for animations and Lucide React for icons. It features a user-friendly interface with components for displaying message tracks, batch indicators, and savings information. Key features include:

1. **Settings Modal**: Users can configure batch settings, including maximum batch size and message cost.
2. **Message Tracking**: Visual representation of messages in different states, allowing users to see how messages are processed over time.
3. **Batch Savings Information**: Detailed statistics on the effectiveness of different batching strategies, including potential cost savings.
4. **Real-time Feedback**: Users receive immediate visual feedback on the status of messages as they are sent and processed.
5. **Bulk Messaging**: The ability to send multiple messages at once, simulating real-world usage scenarios.

Overall, this app serves as an interactive demonstration of message batching, providing insights into its benefits and operational mechanics.

The Device Mockup Generator is a web application designed to create professional mockups of various devices, including smartphones, tablets, and laptops. Users can upload screenshots, customize device types and styles, and download or share the generated mockups.

To use the app, users start by uploading an image file, which can be in PNG, JPG, or WEBP format. They can then select the type of device they want to use for the mockup, choose a frame color, and adjust the scale and rotation of the mockup. The app also allows users to customize the background with solid colors, gradients, or images, and to add watermarks if desired. Additionally, users can apply animations to the mockup, such as floating or rotating effects.

The application is built using TypeScript and React, leveraging libraries such as html-to-image for image generation and Lucide for icons. It employs a responsive design to ensure usability across different devices, and it includes a theme toggle feature for light and dark modes.

Key features of the Device Mockup Generator include:
- Uploading and previewing screenshots.
- Selection of device types (iPhone, iPad, MacBook) and models.
- Customization options for frame color, scale, rotation, and perspective.
- Background customization with color, gradient, or image options.
- Watermark addition with adjustable opacity and position.
- Animation effects for dynamic mockups.
- Download functionality for generated mockups in various formats (PNG, JPG).
- Social media sharing options for generated mockups.

Overall, the Device Mockup Generator provides a comprehensive tool for designers and developers to create visually appealing device mockups for presentations, portfolios, or marketing materials.

Device mockup generator

A template for v0 using React Three FIber.

React Three Fiber Ray Marching

Image Dither

Exemplo básico de um funil de vendas

Trading website

Forex Fund Trader

BetterTracker

This app is a decentralized NFT marketplace designed to facilitate the creation, buying, and selling of non-fungible tokens (NFTs). Users can explore various digital artworks, create their own NFTs, and engage with a vibrant community of digital artists and collectors.

To use the app, users can navigate through a user-friendly interface that includes options to explore NFTs, create new ones, access the marketplace, learn more about the platform, and seek support. The app features a visually appealing design with animations and transitions that enhance the user experience.

The app is built using modern web technologies, including React for the user interface, Next.js for server-side rendering and routing, and Tailwind CSS for styling. The application also utilizes HTML5 canvas for particle animations that create an engaging background effect, enhancing the overall aesthetic of the marketplace.

Key features of the app include:
- A dynamic NFT gallery showcasing various digital artworks with hover effects.
- A responsive layout that adapts to different screen sizes.
- Smooth animations for page transitions and element interactions.
- A particle animation effect that adds visual interest to the background.
- Scroll position tracking to enhance user engagement.
- A navigation menu that provides easy access to different sections of the app.

Overall, this app aims to provide a seamless and immersive experience for users interested in the world of digital art and NFTs, leveraging the security and transparency of blockchain technology.

Landing NFT Hero Section

The Inspiration Canvas app is designed to provide users with a visually appealing platform to discover and share inspirational quotes. The app generates random quotes from a diverse collection, allowing users to refresh their experience and receive new quotes with a simple click. Each quote is presented with dynamic styling, including customizable color schemes, typography, and layouts, enhancing the overall aesthetic and user engagement.

To use the app, users can navigate through the interface to view quotes, refresh for new ones, and utilize various sharing options. The app features buttons for copying quotes to the clipboard, downloading them as images, and creating thumbnail images for social media sharing. Users can also open a modal to generate a thumbnail image of the current quote, which can be downloaded or copied to the clipboard.

The app is built using modern web technologies, including TypeScript, React, and Next.js, with additional libraries such as Framer Motion for animations and React Three Fiber for 3D rendering. The styling is managed with Tailwind CSS, ensuring a responsive and visually consistent design across different devices.

Key features of the Inspiration Canvas app include:
- Random quote generation from a curated collection.
- Dynamic styling options for color schemes, typography, and layouts.
- Copying quotes to the clipboard for easy sharing.
- Downloading quotes as images for social media use.
- Thumbnail generation for creating shareable images of quotes.
- Responsive design that adapts to various screen sizes.

Overall, the Inspiration Canvas app combines functionality with aesthetic appeal, making it a valuable tool for anyone seeking daily inspiration through quotes.

Interactive Quote App

This application is a web-based platform designed to assist businesses in implementing artificial intelligence (AI) solutions through automated agents. It provides a user-friendly interface where users can learn about AI agents, their functionalities, and how they can be integrated into various business processes.

To use the app, users can navigate through different sections that explain the capabilities of AI agents, including areas such as sales automation, customer support, scheduling, and operations. The app features a chat interface where users can interact with TARS, an AI assistant that provides guidance and answers questions related to AI implementation. Users can also schedule consultations and simulate demos of the agents.

The application is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, and Tailwind CSS for styling. It utilizes various libraries such as Framer Motion for animations, Lucide React for icons, and AI SDK for chat functionalities. The app is responsive, adapting to both desktop and mobile devices, and includes a smooth scrolling experience.

Key features of the app include:
- A dynamic homepage with a hero section that introduces AI agents.
- Informative sections detailing what AI agents are and their application areas.
- A chat interface for real-time interaction with the AI assistant, TARS.
- A calendar modal for scheduling consultations.
- Responsive design that adjusts to different screen sizes.
- Background animations and visual effects to enhance user engagement.

Overall, this application serves as a comprehensive resource for businesses looking to leverage AI technology to improve efficiency and productivity.

Redirect whatsapp api

The app is a dashboard interface designed for monitoring and managing system performance and status. It provides users with real-time insights into various system metrics, including CPU usage, memory allocation, network status, and security levels. The dashboard is built using React and TypeScript, leveraging the Tailwind CSS framework for styling and layout.

To use the app, users can navigate through a sidebar menu that includes options for diagnostics, data center management, network monitoring, security settings, and more. The main dashboard displays key performance indicators in visually appealing cards, along with a live performance chart that updates periodically. Users can toggle between light and dark themes, and the interface includes interactive elements such as buttons, sliders, and tooltips for enhanced usability.

Key features of the app include:
- Real-time monitoring of system metrics with dynamic updates.
- A visually engaging performance chart that displays CPU, memory, and network usage.
- A sidebar navigation menu for easy access to different sections of the dashboard.
- Notifications and alerts for system events, such as security scans and bandwidth spikes.
- User-friendly components like badges, avatars, and action buttons for quick interactions.
- Customizable themes to suit user preferences.

The app utilizes various technologies, including React for component-based architecture, TypeScript for type safety, and Tailwind CSS for responsive design and styling. The use of hooks like useEffect and useState allows for efficient state management and side effects handling, ensuring a smooth user experience.

Futuristic Dashboard

The Somerton man code converted to rail routes between Melbourne and Adelaide.

Somerton Man Train Routes

Travel Partner App

Travel Partner App

FAQ Section Shopify

FAQ Section Shopify

Animated Toolbar

Animated Toolbar

Retro Studio

Animated Clean Toast Carousel

Animated Clean Toast Carousel

FIle upload made by KokonutUI designed for web applications, allowing users to easily upload files through a drag-and-drop interface or by selecting files from their device. It is built using React and TypeScript, leveraging the motion library for animations and the Lucide React icon library for visual elements.

To use the app, developers can integrate the FileUpload component into their React applications. The component accepts several props, including callbacks for handling successful uploads and errors, accepted file types, maximum file size limits, and a current file state. Users can interact with the component by dragging files into a designated drop zone or clicking to open a file selection dialog. The component provides visual feedback during the upload process, including progress indicators and success/error messages.

Key features of the app include:
- Drag-and-drop functionality for file uploads.
- Support for validating file types and sizes, with customizable error messages.
- Visual feedback during the upload process, including progress bars and success/error animations.
- A preview of the uploaded file, if applicable, along with its details such as name, size, and type.
- Options to replace or remove the uploaded file.
- Responsive design that adapts to different screen sizes and themes.

Overall, this file upload component enhances user experience by providing a modern, interactive interface for file management within web applications.

This app is an interactive step-by-step guide designed to assist users in transforming their websites and deploying them on GitHub. It provides a structured approach to reimagining a website by guiding users through a series of steps, from entering a site URL to deploying the final project.

To use the app, users start by entering their website URL or selecting an example site. The app then presents a series of steps, each accompanied by a title, description, and an illustrative image. Users can navigate through the steps using "Next" and "Previous" buttons, and they can also jump to specific steps using visual indicators. The app tracks completed steps and provides visual feedback on progress.

The app is built using TypeScript and React, leveraging the Framer Motion library for animations and transitions, and Next.js for server-side rendering and image optimization. It utilizes a responsive design to ensure usability across different devices.

Key features of the app include:
- An interactive guide with clear instructions for each step.
- Visual indicators for tracking progress and completed steps.
- Responsive design that adapts to various screen sizes.
- Smooth animations for transitions between steps.
- Integration with GitHub for managing repositories and deploying projects.

Overall, this app serves as a comprehensive tool for users looking to modernize their websites and streamline the deployment process.

Modern Step Guide Component

This app is a user interface component designed for selecting programming frameworks and languages, featuring a custom select dropdown with search functionality. It allows users to easily choose from a predefined list of frameworks and languages, enhancing the user experience by providing a searchable interface.

To use the app, users can interact with the dropdown menus to select their preferred framework and programming language. The app includes a custom select component that allows users to search for frameworks by typing in a search box, making it easier to find specific options among a long list. Additionally, users can open a dialog form to configure their project settings, where they can select a framework, a programming language, and even specify a custom framework using the custom select component.

The app is built using TypeScript and React, leveraging various libraries and components such as Lucide for icons, React Hook Form for form management, and Zod for schema validation. The UI components are styled using a utility-first CSS approach, ensuring a responsive and visually appealing design.

Key features of the app include:
- A searchable dropdown for selecting frameworks, allowing users to quickly find their desired option.
- A dialog form that facilitates the selection of both frameworks and programming languages, with validation to ensure required fields are filled.
- The ability to specify a custom framework through a dedicated select component.
- User feedback through toast notifications upon form submission, displaying the selected values in a structured format.

Overall, this app provides a streamlined and efficient way for developers to configure their project settings with a focus on usability and accessibility.

Shadcn dialog form

POC-ef

Art Gallery

Spotify-like web user interface

The Tea Tree Lawn Care app is a web-based platform designed to provide professional lawn care services through an easy-to-use subscription model. The app allows users to access a variety of lawn care services, including lawn mowing, landscaping, lawn treatment, yard cleanup, and equipment repair, all at affordable prices. New customers can take advantage of a promotional offer of 70% off their first month.

To use the app, users can navigate through a clean and responsive interface that includes a home page, service descriptions, pricing information, a FAQ section, and a contact page. Users can easily sign up for services, manage their subscriptions, and contact customer support through a dedicated contact form. The app is built using modern web technologies, including TypeScript, React, and Next.js, ensuring a smooth and efficient user experience.

Key features of the app include:
- A responsive design that adapts to both desktop and mobile devices.
- A navigation bar that provides quick access to different sections of the app, including Home, Services, Pricing, FAQ, and Contact.
- Detailed service descriptions that outline the features and benefits of each service offered.
- A pricing page that clearly presents subscription options and includes a FAQ section to address common customer inquiries.
- A contact form that allows users to submit questions or requests directly to the service team.
- Customer testimonials that highlight the quality and reliability of the services provided.

Overall, the Tea Tree Lawn Care app aims to simplify the lawn care process for users, making it easy to maintain a beautiful yard without the hassle of traditional lawn care management.

Tea Tree website redesign

This application is an interactive 3D visualization tool designed to showcase key features of blockchain technology, particularly in the context of logistics and supply chain management. Users can explore various blockchain features through a visually engaging interface that utilizes 3D graphics and animations.

To use the app, users can click on any of the hexagonal feature icons displayed in a rotating 3D prism. Each hexagon represents a specific feature, such as Traceability, Security, Efficiency, Integration, Automation, and Data. When a hexagon is clicked, a modal dialog appears, providing detailed information about the selected feature, including its description and associated icon. Users can also click and drag the prism to rotate it, creating a dynamic viewing experience enhanced by cosmic trails and particle effects.

The app is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Three.js for rendering 3D graphics. It leverages the React Three Fiber library to integrate Three.js with React, allowing for a seamless development experience. The user interface components are styled using Tailwind CSS, providing a responsive and visually appealing design. Additionally, Framer Motion is used for animations, enhancing the interactivity of the application.

Key features of the app include:
- Interactive 3D visualization of blockchain features.
- Clickable hexagonal icons that reveal detailed information about each feature.
- Dynamic animations and effects, including cosmic trails and pulsating lights.
- Responsive design that adapts to different screen sizes.
- Modal dialogs for displaying feature descriptions.
- Integration with existing systems through seamless connections.

Overall, this application serves as an educational tool, helping users understand the benefits and functionalities of blockchain technology in logistics and supply chain management through an engaging and interactive format.

Interactive-3D-Infographic

Dynamic Table with filer and group by

This application, titled "中国旅游攻略" (China Travel Guide), is designed to assist users in exploring the rich landscapes and cultural experiences of China. It provides a comprehensive platform for planning trips, including features for searching tours, hotels, and flights, as well as offering travel tips and testimonials from previous travelers.

Users can navigate the app through a sticky header that includes links to various sections such as destinations, travel tips, testimonials, and a contact form. The main page features a hero section with an engaging image and a call-to-action for users to start planning their trips. The search section allows users to input their travel preferences, including destination, dates, and number of travelers, to find suitable options.

The app showcases popular destinations in China, providing images and descriptions to entice users. It also includes a section for travel tips, offering practical advice to enhance the travel experience. Testimonials from past travelers are displayed to build trust and provide insights into the services offered.

Key features of the app include a newsletter subscription form for users to receive updates on travel deals and destination guides, as well as a contact form for inquiries or custom travel plans. The app is built using React and Next.js, leveraging TypeScript for type safety and Tailwind CSS for styling, ensuring a responsive and visually appealing user interface.

Overall, "中国旅游攻略" serves as a valuable resource for anyone looking to explore China, providing essential information and tools to facilitate travel planning.

China Travel Guide

A card to invite team members with roles in a combobox.

Team Member Invites

The Enterprise Dashboard is a web application designed to provide a comprehensive interface for managing various aspects of an enterprise system. It allows users to log in, access a dashboard, and navigate through different sections such as communications, reports, users, and analytics.

To use the app, users start by accessing the login page where they can enter their email and password. Upon successful authentication, they are directed to the dashboard, which features a sidebar navigation for easy access to different functionalities. The dashboard displays key metrics such as total users, active communications, and pending tasks, providing a quick overview of the system's status.

The application is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, and Tailwind CSS for styling. The use of Tailwind CSS allows for a responsive and customizable design, while the integration of various React components facilitates a modular and maintainable codebase.

Key features of the Enterprise Dashboard include:
- A responsive layout that adapts to different screen sizes.
- A sidebar navigation for easy access to different sections of the application.
- A login form for user authentication.
- A dashboard that displays important metrics and statistics.
- A communications section where users can view and manage communications, including a data table for tracking communication status.
- A dialog component for creating new communications, allowing users to input titles, messages, and optional attachments.

Overall, the Enterprise Dashboard serves as a centralized platform for enterprise management, enhancing productivity and streamlining communication within the organization.

Recreate Figma UI

This is a re-creation of the moving ball UX on https://linear.app/method/product-direction.

Linear canvas ball animation

It's a normal and simple Tetris game.

Sumbios Landing Page

Sumbios Landing Page

The app is called ArtFusion, a digital platform designed to connect artists and art enthusiasts. It serves as a marketplace where artists can showcase their artwork, and buyers can discover and purchase pieces that resonate with them. The app aims to create a vibrant community where creativity thrives and transactions are seamless.

To use the app, users can navigate through various sections including an art gallery, community features, pricing plans, and more. The homepage features a navigation bar for easy access to different parts of the app, a hero section that highlights the app's purpose, and an art gallery showcasing various artworks. Users can also explore features that enhance their experience, learn about the community, and view pricing options for membership plans.

The app is built using modern web technologies, including TypeScript and React for the frontend, with a focus on responsive design and user experience. It utilizes the Framer Motion library for animations and transitions, enhancing the visual appeal and interactivity of the app. Tailwind CSS is employed for styling, allowing for a customizable and efficient design process.

Key features of ArtFusion include:
- An interactive art gallery where users can view and purchase artworks.
- A community section that fosters connections between artists and buyers.
- A pricing model with different membership plans, offering various benefits such as access to exclusive content and early access to new collections.
- A responsive design that ensures a smooth experience across devices.
- Dynamic animations that enhance user engagement and provide a modern feel to the interface.

Overall, ArtFusion is designed to be a comprehensive platform for artists and art lovers, facilitating the sharing and acquisition of art in a user-friendly environment.

Art Marketplace

Event Managemant Website

Luminary Events Landing

Swiss design website v1

Background Circles

Background Circles

Design kit modeled after SF MOMA

SF MOMA Design Kit

Github inspired activity dashboard

Analytics Dashboard

Join Waitlist

A simple email-only login page.

Copystreet Hero

Copystreet Hero

This application is a personal portfolio website designed to showcase the skills, projects, and contact information of a full-stack developer named Gagan Varshney. The primary function of the app is to provide an interactive platform where visitors can learn about the developer's background, view their resume, explore projects, and get in touch through a contact form.

To use the app, visitors can navigate through various sections including "About", "Resume", "Education", "Projects", "Skills", and "Contact". Each section is accessible via a navigation menu, which is responsive for mobile devices. Users can fill out a contact form to send messages directly to the developer, and they can also download the developer's resume in text format.

The app is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, and it utilizes Tailwind CSS for styling. The backend is powered by a serverless database solution, Neon, which handles the storage of contact messages. The form validation is managed using React Hook Form in conjunction with Zod for schema validation, ensuring that user inputs are correctly formatted before submission.

Key features of the app include:
- A responsive design that adapts to different screen sizes, providing a seamless experience on both desktop and mobile devices.
- A contact form that validates user input and provides feedback upon successful submission or error.
- Dynamic sections that showcase the developer's skills, projects, and educational background, allowing for easy updates and maintenance.
- Integration with social media links for GitHub and LinkedIn, enabling visitors to connect with the developer on professional platforms.
- Smooth scrolling and navigation enhancements to improve user experience.

Overall, this portfolio app serves as a comprehensive introduction to Gagan Varshney's professional capabilities and projects, while also facilitating communication with potential clients or employers.

Gagan Varshney Portfolio

This app is an interactive audio visualizer designed to create dynamic visual representations of sound in real-time. Users can start listening to audio through their device's microphone, and the app will generate various visual effects based on the audio input. The visualizer supports multiple styles, including waveform, bars, circular, and more, allowing users to customize their experience.

To use the app, users simply click a button to start or stop listening to audio. They can select different visualizer types and color schemes from a dropdown menu, adjust sensitivity and trail effects using sliders, and apply preset configurations for quick setup. The app also features fullscreen mode for an immersive experience, which can be toggled with a button or by double-tapping the visualizer.

The app is built using React and TypeScript, leveraging Next.js for server-side rendering and routing. It utilizes Tailwind CSS for styling, providing a responsive and modern user interface. The audio processing is handled through the Web Audio API, allowing for real-time audio analysis and visualization.

Key features of the app include:
- Real-time audio visualization based on microphone input.
- Multiple visualizer types and customizable color schemes.
- Adjustable settings for sensitivity, trail effects, and particle counts.
- Preset configurations for quick access to popular visual styles.
- Fullscreen mode for an enhanced viewing experience.
- Responsive design suitable for both desktop and mobile devices.

Overall, this app provides a unique and engaging way to experience audio through visual art, making it suitable for music enthusiasts, artists, and anyone interested in audio-visual interactions.

Audio VIsualiser

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