Skip to content

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

License

Notifications You must be signed in to change notification settings

jakobhoeg/shadcn-chat

Repository files navigation

shadcn-chat

GitHub Repo stars

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

Preview

shadcn-chat-Original.MOV

Usage

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

Installation

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!

Tech stack

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages