Customizable and re-usable chat component for you to use in your projects. Built on top of shadcn.
Demo • Preview • Usage • Installation • Tech stack • Example Project
shadcn-chat-Original.MOV
You can use the source code and copy paste components into your NextJS project.
These components in particular:
/src/app/components/chat/chat-layout.tsx, chat.tsx, chat-topbar.tsx, chat-list.tsx & chat-bottombar.tsx
If you'd like to spin up a local environment similar to the demo, follow these instructions:
1. Clone the repository to a directory on your pc via command prompt:
git clone https://github.com/jakobhoeg/shadcn-chat
2. Open the folder:
cd shadcn-chat
3. Install dependencies:
npm install
4. Start the development server:
npm run dev
5. Go to localhost and start playing around!
NextJS - React Framework for the Web
TailwindCSS - Utility-first CSS framework
shadcn-ui - UI component built using Radix UI and Tailwind CSS
Emoji Mart - Customizable emoji picker for the web
Framer Motion - Motion/animation library for React
Lucide Icons - Icon library