Customizable and re-usable chat component for you to use in your projects. Built on top of shadcn.

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