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

Glow menu component

Glow menu component

Background Paths

Background Paths

The Orb

File Manager

Build charts using shadcn/ui charts.

Next.js + Charts

This application is an ASCII Art Converter that allows users to transform images into ASCII art representations. Users can upload images either by dragging and dropping them into the application or by using a file input. The app supports various character sets for ASCII art, including standard, detailed, block characters, and minimal options.

To use the app, users can adjust the resolution of the ASCII art using a slider, toggle options for color inversion and grayscale mode, and select their preferred character set from a dropdown menu. Once an image is loaded, the app automatically converts it into ASCII art based on the selected settings. The resulting ASCII art is displayed in a preview area, where users can also see colored ASCII art if the grayscale option is disabled.

Key features of the app include:
- Image upload via drag-and-drop or file selection.
- Adjustable resolution for ASCII art output.
- Multiple character set options for different styles of ASCII art.
- Options to invert colors and switch to grayscale mode.
- Copy to clipboard functionality for easy sharing of the generated ASCII art.
- Download option to save the ASCII art as a text file.

The application is built using React and TypeScript, leveraging hooks for state management and effects. It utilizes a canvas element for image processing and rendering, and it incorporates UI components for sliders, buttons, and select menus. The app is designed to be responsive, adapting its layout for both desktop and mobile users.

An engaging animation of a toast notification featuring a loading state, seamlessly transitioning into a success state. Perfect for UI feedback interactions!

Action Search Bar

Action Search Bar

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

A template for v0.

Cuisine Selector Chips

1 2 3 4 5

Follow me on www.raheelmaqsood.com

This application is a visual workflow builder that allows users to create, configure, and execute workflows using a drag-and-drop interface. Users can design workflows by connecting various types of nodes, each representing different functionalities such as input, output, processing, conditional logic, and custom code execution.

To use the app, users can drag nodes from a library onto a canvas, connect them to define the workflow, and configure each node's properties through a dedicated configuration panel. Users can save their workflows to local storage, load previously saved workflows, and execute them to simulate the workflow's operation.

The application is built using React and TypeScript, leveraging the React Flow library for the visual representation of nodes and edges. It incorporates various UI components for user interaction, including buttons, inputs, and text areas. The app also utilizes local storage for saving and loading workflows and includes toast notifications to provide feedback on user actions.

Key features of the app include:
- A node library with different types of nodes: input, output, process, conditional, and code nodes.
- A drag-and-drop interface for building workflows visually.
- A configuration panel for customizing node properties.
- Functionality to save and load workflows from local storage.
- Execution simulation of workflows with feedback notifications.
- Customizable node types with specific properties and behaviors.

Overall, this app provides a user-friendly environment for designing and testing workflows, making it suitable for developers and users looking to automate processes visually.

React Flow Builder

Currency Transfer Animation

Currency Transfer Animation

Floating Bubbles

Floating Bubbles

recreated vercel tabs entirely with prompts

Animated Background with Beams

Beams Background

Animated Toolbar

Animated Toolbar

The AlgoSensei app is a no-code platform designed for building, backtesting, and deploying algorithmic trading strategies. It provides users with an intuitive interface to create trading algorithms without requiring any programming knowledge. The app leverages advanced technologies such as React, TypeScript, and Three.js to deliver a visually engaging experience.

To use the app, users can start by logging in or creating an account. Once logged in, they can access various features including a strategy builder, backtesting engine, and trading dashboard. The strategy builder allows users to drag and drop components like indicators, conditions, and actions to create their trading strategies. Users can also utilize AI-powered advice to enhance their strategies based on current market conditions.

Key features of the app include:
- A visually rich 3D environment powered by React Three Fiber, providing an immersive experience while building and testing strategies.
- A no-code strategy builder that allows users to create complex trading algorithms through a simple drag-and-drop interface.
- Real-time market data integration from Binance, enabling users to monitor cryptocurrency prices and trading volumes.
- An AI assistant that offers strategy recommendations based on user-defined market conditions, enhancing the decision-making process.
- A backtesting engine that allows users to test their strategies against historical data, providing insights into potential performance metrics.
- A community hub where users can share and discover trading strategies, fostering collaboration and learning among traders.

The app is built using modern web technologies, including Next.js for server-side rendering, Tailwind CSS for styling, and various libraries for UI components and 3D rendering. Overall, AlgoSensei aims to simplify the process of algorithmic trading, making it accessible to a broader audience.

Algo trading platform

Signup page - Dark Modern

Signup page - Dark Modern

Pick a date, start, and end time. Starter for some kind of scheduling widget.

Scheduling Component

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 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

This application is a visually dynamic web-based experience that utilizes animated graphics to create an engaging background. It features a full-screen canvas that displays animated spheres and gradient effects, providing an interactive and immersive user interface.

Users can interact with the application by moving their mouse, which influences the animation and visual effects on the screen. The app is designed to be responsive, automatically adjusting to different screen sizes and orientations.

The application is built using TypeScript and React, leveraging the capabilities of the HTML5 canvas for rendering graphics. It employs hooks such as useEffect and useRef to manage the animation lifecycle and canvas references. The animation is achieved through a combination of radial gradients, noise effects, and smooth transitions, creating a visually appealing background that can be used in various web applications.

Key features of the app include:
- Full-screen canvas that adapts to window resizing.
- Animated spheres that move and bounce within the canvas.
- Interactive mouse tracking that alters the visual effects based on user input.
- Customizable color schemes and blending modes for the gradients.
- A halftone pattern overlay that adds texture to the background.
- Noise effects that enhance the visual complexity of the canvas.

Overall, this application serves as a creative tool for developers looking to implement dynamic and interactive backgrounds in their web projects.

Dynamic Visual Representation

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

The app is an interactive technical documentation platform designed for the aviation industry, specifically for the GaiaAir aircraft systems. It provides comprehensive access to various technical documents, maintenance procedures, and system information organized by ATA chapters and aircraft zones.

Users can navigate through the app to explore detailed information about different aircraft systems, including air conditioning, landing gear, electrical power, and more. The app features a user-friendly interface with a search function, allowing users to quickly find specific documents or topics.

Key technologies used in the app include TypeScript and React for building the user interface, along with Next.js for server-side rendering and routing. The app also utilizes a modular design, allowing for easy updates and maintenance of the documentation.

Key features of the app include:
- A structured layout that organizes information by ATA chapters and aircraft zones.
- Interactive elements such as tabs for easy navigation between different sections, including maintenance procedures, safety precautions, and technical publications.
- A mind map visualization that provides a holistic view of the aircraft's systems and their interrelationships.
- A component distribution matrix that shows how various components are distributed across different aircraft zones.
- S1000D-compliant documentation for the Aerospace Modular Programming Ethical Language (AMPEL) system, integrated with GaiaAir.
- Quick links to related resources and documentation, enhancing user experience and accessibility.

Overall, the app serves as a comprehensive resource for aviation professionals, providing essential information for aircraft maintenance, operations, and compliance with industry standards.

GaiaAir schema format

AI Input made by kokonut/ui

Simple Markdown Editor with its live preview

Markdown Editor

This app is a messaging interface that allows users to send text messages along with file and image attachments. It is designed to provide a user-friendly experience for composing and sending messages, making it suitable for chat applications or collaborative platforms.

To use the app, users can type their message in a text input field. They can also attach files and images by clicking on the respective buttons, which open file selection dialogs. Once the files or images are selected, they are displayed as previews, allowing users to review their attachments before sending. Users can remove any unwanted attachments by clicking the remove button next to each preview. The message, along with any attached files and images, can be sent by pressing the send button or by hitting the Enter key.

The app is built using TypeScript and React, leveraging Next.js for server-side rendering and routing. It utilizes various components for input handling, file previews, and image previews, ensuring a modular and maintainable codebase. The user interface is styled with a clean and modern design, using utility classes for layout and responsiveness.

Key features of the app include:
- Text input for composing messages.
- Support for attaching multiple files and images.
- Preview of attached files and images with the option to remove them.
- Keyboard support for sending messages using the Enter key.
- Responsive design that adapts to different screen sizes.

Overall, this app provides a comprehensive solution for messaging with attachments, enhancing communication in digital environments.

Custom Input Component

apple inspired form

This app is designed to provide users with a visually engaging experience when they encounter unauthorized or forbidden access to certain resources. It features animated alerts that inform users of their access status, enhancing user interaction through dynamic visual feedback.

The app utilizes React and TypeScript for its development, leveraging the Framer Motion library to create smooth animations. The core component, AnimatedAlertCircle, is an SVG-based animation that visually represents alerts with customizable properties such as size, stroke width, icon color, and circle color. This component is used in both the Unauthorized and Forbidden pages to indicate access issues.

To use the app, users simply navigate to restricted areas, where they will be presented with either an "Unauthorized Access" or "Access Forbidden" message, accompanied by an animated alert icon. Each page features a prominent title and a subtitle explaining the access issue, along with a button that allows users to return to the home page.

Key features of the app include:
- Animated alert icons that provide visual cues for access issues.
- Customizable alert properties to fit different design requirements.
- Smooth animations for text and buttons, enhancing the overall user experience.
- Responsive design that ensures accessibility across various devices.

Overall, this app combines user-friendly design with effective communication of access restrictions, making it a valuable tool for managing user permissions in web applications.

Animated unauthorized page

Vis Timeline Gantt

Vis Timeline Gantt

Server actions and Zod validation.

Next.js + Forms

This app is a dynamic user interface designed to simulate an interactive Apple Watch experience. It features a circular layout with various app icons that users can interact with through touch or mouse gestures. The primary function of the app is to provide a visually engaging way to access different functionalities, such as a clock, messaging, music, and more, by allowing users to scroll and select icons.

To use the app, users can drag their finger or mouse across the screen to scroll through the icons arranged in a circular pattern. The icons respond to user interactions by enlarging when they are centered in the viewport, providing a clear visual cue of selection. Users can tap on icons to activate them, which briefly highlights the selected icon before returning it to its original state.

The app is built using React, leveraging TypeScript for type safety and clarity. It utilizes the Lucide React library for iconography, providing a modern and clean aesthetic. The app also incorporates the Framer Motion library for smooth animations and transitions, enhancing the user experience.

Key features of the app include:
- A circular layout of app icons that users can scroll through.
- Dynamic resizing of icons based on their proximity to the center of the viewport, creating an engaging interaction model.
- Touch and mouse event handling to support both mobile and desktop environments.
- A clock display that updates in real-time, providing users with the current time.
- Visual feedback for icon selection, enhancing usability and interaction.

Overall, this app combines modern web technologies with an intuitive design to create a unique and interactive user experience reminiscent of an Apple Watch interface.

This application is a minimal connection testing tool designed to verify the functionality of an API endpoint. It provides a user-friendly interface where users can initiate a connection test and receive feedback on the status of that connection.

To use the app, users simply click the "Test Connection" button. Upon clicking, the app will display a status message indicating whether the connection test is in progress, successful, or if an error has occurred. The status updates dynamically based on the response from the API.

The application is built using TypeScript and React, leveraging the Next.js framework for server-side rendering and API route handling. It utilizes Tailwind CSS for styling, ensuring a responsive and modern design. The app's layout is structured to provide a clean and straightforward user experience, with a card component displaying the connection status and button.

Key features of the app include:
- A simple interface for testing API connections.
- Real-time status updates based on the connection test results.
- Error handling to inform users of any issues encountered during the test.
- Responsive design that adapts to different screen sizes.

Overall, this app serves as a practical tool for developers to quickly verify the operational status of their API endpoints in a minimalistic and efficient manner.

Image Generator

Dynamic Island Todo app

Dynamic Island Todo app

Fluid Particles Background

Fluid Particles Background

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

Team Member Invites

This application is a project management tool designed to facilitate task organization and tracking using a Kanban board interface. Users can create, edit, and manage tasks across different columns representing various stages of a project, such as "To Do," "In Progress," and "Done."

To use the app, users can add new tasks by clicking the "Add Task" button, which opens a modal for entering task details, including title, description, status, priority, due date, and assignee. Tasks can be dragged and dropped between columns to reflect their current status. Users can also create new columns or edit existing ones through a similar modal interface. The app provides options to save and load project data, allowing users to persist their work.

The application is built using TypeScript and React, leveraging libraries such as @dnd-kit for drag-and-drop functionality and react-hot-toast for notifications. The UI is styled with Tailwind CSS, ensuring a responsive and modern design.

Key features of the app include:
- A Kanban board layout for visual task management.
- Modals for creating and editing tasks and columns.
- Drag-and-drop functionality for moving tasks between columns.
- Task attributes such as priority, due date, and assignee.
- Local storage support for saving and loading project data.
- Notifications for user actions, such as adding or deleting tasks and columns.

Overall, this app provides a comprehensive solution for managing projects and tasks in a collaborative environment.

A CSS perspective demo with shadcn/ui

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

Wavey Background

Wavey Background

Minimal SignUp Page Design

Minimal SignUp Page Design

Random Shapes Grid

Random Shapes Grid

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.

Motopagina

tooltip smootly moves to item being hovered

A nebulous golden ratio loading screen.

Golden Ratio Loading Screen

Card Hover Effect Demo

Card Hover Effect Demo

This application is an icon picker tool that allows users to select icons from the Lucide icon library. It provides a user-friendly interface where users can browse, search, and select icons for use in their projects.

To use the app, users simply navigate to the icon picker interface, where they will see a default icon displayed. They can click on the icon to open a popover that contains a searchable list of icons. Users can type in the search bar to filter icons based on their names. The icons are displayed in a grid format, and users can navigate through multiple pages of icons if there are more than can fit on a single page. When an icon is selected, it is highlighted, and the selection is reflected in the main interface.

The app is built using TypeScript and React, leveraging several libraries and components for its functionality. Key technologies include the Lucide icon library for dynamic icon rendering, and custom UI components for cards, popovers, and commands. The application also utilizes React hooks for state management, allowing for a responsive and interactive user experience.

Key features of the app include:
- A searchable icon list that allows users to quickly find icons by name.
- Pagination support to navigate through large sets of icons.
- Dynamic rendering of selected icons, providing immediate visual feedback.
- A clean and modern user interface designed for ease of use.

Overall, this icon picker app serves as a practical tool for developers and designers looking to incorporate icons into their applications or websites efficiently.

Icon picker component