{"repo":"Mesailor/shadcn-chat","free":true,"listed":false,"github":"https://github.com/Mesailor/shadcn-chat","clone":"git clone https://github.com/Mesailor/shadcn-chat.git","description":"A customizable chat window component built with Shadcn UI and React.","language":"TypeScript","stars":26,"topics":["chat","component","react","shadcn-ui","ui","typescript","nextjs","tailwindcss"],"license":"MIT","category":"ui-components","readme_excerpt":"Shadcn Chat Component A customizable chat component built with shadcn/ui and React. Demo Checkout a live demo Quick Start Get a complete, ready-to-use chat page added to your project in one command. This installs a fully wired-up app/chat/page.tsx with sample data and message components. Then visit /chat in your browser to see the result. Installation Prerequisites The chat component is compatible with any environment that supports React and has shadcn/ui configured. This guide assumes you are already familiar with both of these technologies. If you are not, you can review their documentations first. Command Manual 1. Install shadcn/ui: If you haven't already, initialize shadcn/ui in your project by following the official installation guide. 2. Install Dependencies: Ensure you have the necessary primitives installed. 3. Copy the Chat Component: Copy the chat component files from the repository into your project's components directory (e.g., @/components/chat ). 4. Import and Use: Import the component into your page and use it as needed. Usage Examples Chat The root container component that establishes the chat layout structure with container queries and flex column layout for header, messages, and toolbar sections. Responsiveness The Chat component uses container queries (ex. @2xl/chat: ) to adapt its layout based on the available width, ensuring an optimal user experience across different device sizes. Make sure that the Chat component is given a defined height or max-height","default_branch":null,"files":null,"tree":[],"storefront":"/r/Mesailor","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Mesailor/shadcn-chat/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}