shadcn-chat

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

Preview

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

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
shadcn-preview.png		shadcn-preview.png
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json