Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jakobhoeg/shadcn-chat
Customizable and re-usable chat component for you to use in your projects. Built on top of shadcn.
https://github.com/jakobhoeg/shadcn-chat
nextjs nextjs14 react react-component shadcn shadcn-ui ui-library
Last synced: 28 days ago
JSON representation
Customizable and re-usable chat component for you to use in your projects. Built on top of shadcn.
- Host: GitHub
- URL: https://github.com/jakobhoeg/shadcn-chat
- Owner: jakobhoeg
- License: mit
- Created: 2024-01-21T10:09:57.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-02-15T14:33:55.000Z (5 months ago)
- Last Synced: 2024-05-18T03:44:53.999Z (about 2 months ago)
- Topics: nextjs, nextjs14, react, react-component, shadcn, shadcn-ui, ui-library
- Language: TypeScript
- Homepage: https://shadcn-chat.vercel.app
- Size: 752 KB
- Stars: 419
- Watchers: 1
- Forks: 41
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-shadcn-ui - shadcn-chat - Customizable and reusable chat component for you to use in your projects. (Libs and Components)
README
[
](https://shadcn-chat.vercel.app/)
shadcn-chat
[](https://github.com/jakobhoeg/shadcn-chat/stargazers)
Customizable and re-usable chat component for you to use in your projects. Built on top of shadcn.
[Demo](https://shadcn-chat.vercel.app/) • [Preview](#Preview) • [Usage](#Usage) • [Installation](#Installation) • [Tech stack](#Tech-stack) • [Example Project](https://github.com/jakobhoeg/nextjs-ollama-llm-ui)
# Preview
https://github.com/jakobhoeg/shadcn-chat/assets/114422072/a934f80f-1662-46f2-83bc-bdca45982ce6
# 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](https://shadcn-chat.vercel.app/), 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](http://localhost:3000) and start playing around!**
# Tech stack
[NextJS](https://nextjs.org/) - React Framework for the Web
[TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
[shadcn-ui](https://ui.shadcn.com/) - UI component built using Radix UI and Tailwind CSS
[Emoji Mart](https://github.com/missive/emoji-mart) - Customizable emoji picker for the web
[Framer Motion](https://www.framer.com/motion/) - Motion/animation library for React
[Lucide Icons](https://lucide.dev/) - Icon library