ShadCN-Chat
Demo • Preview • Usage • Installation • Tech stack • Example Project
title: ## Contents
style: nestedList # TOC style (nestedList|inlineFirstLevel)
minLevel: 1 # Include headings from the specified level
maxLevel: 4 # Include headings up to the specified level
includeLinks: true # Make headings clickable
debugInConsole: false # Print debug info in Obsidian consoleOverview
INFO
- Customizable and re-usable chat component for you to use in your projects.
- Built on top of shadcn.
Sources:
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, 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
Appendix
Note created on 2024-04-29 and last modified on 2024-04-29.
See Also
Backlinks
LIST FROM [[Tool - ShadCN-Chat]] AND -"CHANGELOG" AND -"04-RESOURCES/Tools/Tool - ShadCN-Chat"(c) No Clocks, LLC | 2024