Skip to content

Latest commit

 

History

History
243 lines (178 loc) · 22.6 KB

README.md

File metadata and controls

243 lines (178 loc) · 22.6 KB
Raw


logo of awesome-shadcn/ui repository

FarleytheCoder v0 Resources/ui

Here's a list of things to help you get started with v0 Chat the AI powered UI Generator by vercel

Created by: farleythecoder.com

Before You Get Started!

Welcome! For those of you looking to get started with the V0 chat, the AI Component Generator tool, I have compiled this list of resources. I hope you find it helpful!

What is V0 Chat?

V0 Chat is an AI-powered chatbot that generates frontend components for your applications. Just type in what you want to create, and the AI will generate the code for you. It’s that simple!

If you're already comfortable with Tailwind CSS, Next.js, and Shadcn components, V0 Chat will feel like a natural extension of your workflow.

However, if you're new to these technologies, don't worry! I've compiled a list of starter resources to help you get up to speed👇. You’ll also find a curated collection of awesome Shadcn components and community-built resources to inspire you and take your development skills to the next level.

Getting Started Resources

Essential resources to kickstart your journey with v0 chat and Shadcn/ui.

Remember this system is built on the Shadcn, Radix Primitives and tailwinds. In order to really leverage v0 chat, it is highly recommended that you get familiar with these. While you don't need to be an expert in all of them, a basic understanding of how they work will significantly enhance your experience with v0 chat.

What You Can Create

See examples and get inspired by what others have built with Shadcn/ui.

  • Shadcn Examples - A showcase of components and layouts created with Shadcn UI.
  • Shadcn Blocks - Ready-to-use UI blocks for seamless integration into your projects.
  • shadcn Charts - Explore various chart components for visualizing data.
  • shadcn Typography - Discover pre-defined styles for headings, paragraphs, lists, and more.

If you check on the shadcnUI website, there is an option to edit the blocks. Simply click on "Open in V0" and you can now edit these components using the v0 chat.

ShadCN UI Design System

Resources for understanding and working with the Shadcn UI design system.

These design resources are perfect for getting started with shadcnUI. If you're familiar with Figma or have a designer, they’ll be incredibly useful. For those building their own design system, be sure to check out the design-system-template.

Colors and Theme Customizations

Tools and resources for customizing the look and feel of Shadcn/ui.

  • ShadCn Themes - A collection of customizable themes to personalize your Shadcn UI projects.
  • 10000+ Themes for shadcn/ui - Browse an extensive library of pre-made themes for Shadcn UI.
  • dizzy - Effortlessly bootstrap Next.js or Vite projects with customizable Shadcn UI themes.
  • gradient-picker - An advanced tool for selecting and creating gradients, built with Shadcn UI and Radix UI.
  • navnote/rangeen - A color palette creator specifically designed for web projects using Shadcn UI.
  • shadcn-ui-customizer - A proof-of-concept for Shadcn UI themes with interactive color pickers.
  • shadcn theme editor - A user-friendly tool for managing and customizing the colors of your Shadcn UI theme.
  • ui-colorgen - An application that simplifies color configuration in Shadcn UI projects.
  • zippy starter's shadcn/ui theme generator - Generate custom themes from a single color for easy integration with Shadcn UI.

This is a great way to enhance your project. While some see it as a basic component library, the right tools let you craft a unique UI. With extensive customization options, the possibilities are endless—especially when you add animations.

Animations

Resources for adding animation and interactivity to your Shadcn/ui projects.

  • animata - A curated collection of hand-crafted interaction animations for web projects.
  • magicui.design - A large library of open-source React components designed for visually appealing landing pages.
  • motionvariants - Explore a collection of beautiful Framer Motion animations to enhance your user interfaces.
  • Framer Motion. - Use framer motion to add animations to any component.

These resources will provide you with the tools and inspiration to bring your Shadcn/ui components to life with captivating animations and interactive experiences.

Some Great Components

Discover a selection of high-quality components built with or for Shadcn/ui.

  • shadcn-ui-sidebar - A visually stunning, functional, and responsive retractable sidebar built on top of shadcn/ui.
  • auto-form - A React component that automatically generates a Shadcn/ui form based on a Zod schema.
  • capture-photo - A versatile, browser-based React component for integrating camera functionalities into your web applications.
  • confirm-dialog - A confirmation dialog component built with Shadcn/ui.
  • country-state-dropdown - A dropdown component for selecting countries and states, built with Next.js, Tailwind CSS, Shadcn/ui, and Zustand.
  • credenza - A ready-made responsive modal component for Shadcn/ui.
  • date-range-picker-for-shadcn - A date range picker with features like multi-month views, text entry, preset ranges, and responsive design.
  • date-time-picker-shadcn - A beautifully crafted datetime picker for your Shadcn/ui projects.
  • downshift-shadcn-combobox - A combobox/autocomplete component built with Shadcn/ui and Downshift.
  • emblor - A highly customizable, accessible, and feature-rich tag input component built with Shadcn/ui.
  • enhanced-button - An enhanced version of the default Shadcn button component.
  • fancy-switch - A visually appealing switch component built with Shadcn/ui.
  • file-uploader - A file uploader component built with Shadcn/ui and react-dropzone.
  • file-vault - A file upload component for React applications.
  • image-upload-shadcn - An image upload component specifically designed for Shadcn/ui.
  • lingua-time - A smart datetime picker that understands natural language input.
  • minimal-tiptap - A minimal WYSIWYG editor built with Shadcn/ui and Tiptap.
  • password-input - A custom password input component for Shadcn/ui.
  • phone-input-shadcn-ui - A custom phone number input component built with Shadcn/ui.
  • planner - A highly adaptable scheduling component for React applications.
  • progress-button - An extension of the Shadcn/ui button component that includes progress state management.
  • search-address - A flexible address search interface utilizing OpenStreetMap's Nominatim service.
  • shadcn-address-autocomplete - An address autocomplete component that uses the Google Places API and Shadcn components.
  • shadcn-calendar-component - A calendar date picker component designed with Shadcn/ui.
  • shadcn-chat - A customizable and reusable chat component for Shadcn/ui projects.
  • shadcn-date-picker - An advanced date picker with features like range selection, year and month selection, built for Shadcn/ui.
  • shadcn-image-cropper - A minimal image cropper UI built with Shadcn and the react-image-crop library.
  • shadcn-linear-combobox - A replica of Linear's task priority combobox using Shadcn/ui.
  • shadcn-multi-select-component - A multi-select component designed with Shadcn/ui.
  • shadcn-phone-input-2 - A simple, formatted phone input component using Shadcn/ui and libphonenumber-js.
  • shadcn-phone-input - A customizable phone input component with country-specific validation for Shadcn/ui.
  • shadcn-stepper - A complete stepper component built with Shadcn/ui.
  • shadcn-timeline - A customizable and reusable timeline component built on top of Shadcn/ui.
  • time-picker - A simple time picker component for Shadcn/ui projects.

These components showcase the versatility and extensibility of Shadcn/ui, providing ready-made solutions and inspiration for your own projects.

Full Component Libraries For Shadcn

Feast your eyes on these complete component libraries built upon or inspired by Shadcn/ui.

  • aceternity-ui - A collection of trending React components with pre-built styling and animations.
  • cult-ui - A curated set of animated Shadcn-style React components for specific use cases.
  • farmui - A Shadcn and Tailwind-based component library with its own npm package for easy installation.
  • edil-ozi - React components that integrate GSAP and Framer Motion for advanced animations.
  • fusion-ui - A UI library that combines features of Shadcn/ui and MagicUI for enhanced functionality.
  • lukacho-ui - Next-generation UI components for modern web development projects.
  • magicui - React components for building beautiful landing pages using Tailwind, Framer Motion, and Shadcn UI.
  • mixcnui - A collection of animated and reusable components specifically designed for Next.js projects.
  • mynaui - A comprehensive UI Kit for Figma and React, built with Tailwind CSS and Shadcn UI.
  • nextjs-components - An extensive collection of Next.js components built with TypeScript, React, Shadcn UI, and Tailwind CSS.
  • shadcn-ui-expansions - Additional useful components that extend the functionality of Shadcn UI.

These libraries are packed with beautiful and versatile components, giving you a consistent look and feel across your projects while saving you tons of development time. They build on the awesomeness of Shadcn/ui, offering even more pre-built elements and cool features to supercharge your apps.

Fullstack Templates/Boilerplates from Shadcn

Ready-to-use fullstack templates and boilerplates to jumpstart your Shadcn/ui projects.

  • create.t3.gg - The optimal way to start a full-stack, typesafe Next.js application.
  • create-t3-turbo - A clean and simple starter repository using the T3 Stack along with Expo React Native.
  • next-saas-start - A brand new Next.js starter template featuring UI components built with Tailwind and Shadcn/ui.
  • cloudflare-saas-stack - An opinionated, batteries-included starter kit for rapidly building and deploying SaaS products on Cloudflare.
  • Taxonomy - An example application built using Next.js 13 server components.
  • next-shadcn-dashboard-starter - An admin dashboard starter built with Next.js 14 and Shadcn/ui.
  • nextjs-mdx-blog - A starter template for building blogs with Contentlayer, MDX, Shadcn/ui, and Tailwind CSS.
  • supabase-next-shad-auth - A fully responsive, type-safe, and secure starter project with server actions and a customizable UI. Utilizes Next.js, Supabase, TypeScript, Server Actions, Zod, and Shadcn/ui.
  • turborepo-shadcn-ui-tailwindcss - A Turborepo starter pre-configured with Shadcn/ui and Tailwind CSS for shared UI components.
  • chadnext - A quick starter template that includes Next.js 14 App Router, Shadcn/ui, Lucia Auth, Prisma, Server Actions, Stripe, Internationalization, and more.
  • magicui-startup-templates - A Magic UI startup template built using Shadcn/ui, Tailwind CSS, and Framer Motion.
  • shadcn-vue-landing-page - A landing page template built with Vue, Shadcn-Vue, TypeScript, and Tailwind CSS.
  • electron-shadcn - An Electron app template featuring Shadcn/ui and a variety of other libraries and tools ready for use.

These templates and boilerplates provide a solid foundation for building fullstack applications with Shadcn/ui, allowing you to focus on your core features rather than setting up the basics. They offer a great way to kickstart your projects and explore different tech stacks.

ShadCN Plugins and Extensions

Enhance your development workflow with these plugins and extensions for Shadcn/ui.

  • raycast-shadcn - A Raycast extension for browsing Shadcn/ui documentation, components, and examples.
  • shadcn-hsl-preview - A Visual Studio Code extension for previewing Shadcn HSL colors.
  • shadcn-ui - Add components from Shadcn/ui directly within Visual Studio Code.
  • shadcn/ui Components Manager - A plugin for JetBrains IDEs that simplifies managing Shadcn/ui components across Svelte, React, Vue, and Solid frameworks.
  • vscode-shadcn-svelte - A Visual Studio Code extension for working with Shadcn/ui components in Svelte projects.
  • vscode-shadcn-ui-snippets - Easily import and use Shadcn/ui components with snippets in Visual Studio Code.
  • vscode-shadcn-vue - An extension for integrating Shadcn/ui components into Vue.js projects.

These plugins and extensions streamline your Shadcn/ui development workflow, providing handy features like component browsing, color previews, code snippets, and more, directly within your favorite IDE.

Ports

Explore adaptations of Shadcn/ui for various frameworks and languages.

  • Angular - An Angular port of Shadcn/ui.
  • Flutter - A Flutter port of Shadcn/ui.
  • Franken UI - HTML-first, framework-agnostic components inspired by Shadcn/ui.
  • JollyUI - React Aria components compatible with Shadcn/ui.
  • Kotlin - A Kotlin port of Shadcn/ui.
  • Phoenix Liveview - A Phoenix Liveview port of Shadcn/ui.
  • React Native - A React Native port of Shadcn/ui.
  • React Native - A recommended React Native port of Shadcn/ui.
  • Ruby - A Ruby port of Shadcn/ui.
  • Solid - A Solid port of Shadcn/ui.
  • Svelte - A Svelte port of Shadcn/ui.
  • Swift - A Swift port of Shadcn/ui.
  • Sysinfocus simple/ui - A Razor component library for Blazor, inspired by Shadcn/ui.
  • Vue - A Vue port of Shadcn/ui.

Initially focused on Next.js and React, it's rapidly expanding to support other frameworks like Vue.js, with more on the horizon.

Communities For Discussing ShadCnUI and V0

Connect with other developers and enthusiasts in these communities.

Join these vibrant communities to connect with fellow developers, share your Shadcn/ui and v0 chat experiences, ask questions, and stay up-to-date on the latest news and developments.

Twitter Handles to Follow

Stay informed about the latest developments by following these Twitter accounts.

  • shadcn: shadcn - Stay up-to-date with the latest developments from Shadcn/ui.

Stay in the loop and get insights from the creators and experts in the Shadcn/ui and v0 chat ecosystem by following these Twitter accounts.

Other Resources

Additional resources to further your understanding of Shadcn/ui.

Mentions

A huge thanks to @birobirobiro for creating the original resource list that inspired this guide. It has been a huge help in learning and implementing shadCN! I've built upon their excellent work by simplifying the format, adding resources specifically relevant to v0 chat, and (hopefully) tailoring it to be even more beginner-friendly.

A huge shoutout to the incredible team behind the T3 Stack! This stack is an absolute game-changer, and working with it over the past year has been a pure joy. Their dedication to creating a developer-friendly and productive experience is truly appreciated.

Massive thanks to Vercel for creating v0 chat and pushing the boundaries of machine learning in frontend and fullstack development! This tool has the potential to revolutionize the way we build user interfaces, and I'm excited to see its continued evolution.

Blogs and videos on how to build an app with v0 chat and Shadcn/ui will be added to this list in the future. Stay tuned for more resources and updates!