- Get your AI application built by Next.js experts
-
-
- Blazity is a team of extremely skilled Next.js engineers and
- open-source contributors. We help companies build and ship
- enterprise-ready web solutions.
-
-
-
-
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 5a7b954a..273a6e54 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -16,7 +16,6 @@ import { ComponentPreview } from "@/components/component-preview"
import { ComponentSource } from "@/components/component-source"
import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button"
import { FrameworkDocs } from "@/components/framework-docs"
-import { StyleWrapper } from "@/components/style-wrapper"
import {
Accordion,
AccordionContent,
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index cde73c6c..495090dc 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -34,11 +34,6 @@ export const docsConfig: DocsConfig = {
href: "/docs/installation",
items: [],
},
- {
- title: "CLI",
- href: "/docs/cli",
- items: [],
- },
],
},
{
diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
deleted file mode 100644
index ce60871c..00000000
--- a/apps/www/content/docs/cli.mdx
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: CLI
-description: Use the CLI to add components to your project.
----
-
-
-
-**Note:** We just released a new `shadcn` CLI. See the [changelog](/docs/changelog) for more information.
-
-
-
-## init
-
-Use the `init` command to initialize configuration and dependencies for a new project.
-
-The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
-
-```bash
-npx shadcn@latest init
-```
-
-You will be asked a few questions to configure `components.json`:
-
-```txt showLineNumbers
-Which style would you like to use? › New York
-Which color would you like to use as base color? › Zinc
-Do you want to use CSS variables for colors? › no / yes
-```
-
-### Options
-
-```txt
-Usage: shadcn init [options] [components...]
-
-initialize your project and install dependencies
-
-Arguments:
- components the components to add or a url to the component.
-
-Options:
- -d, --defaults use default values i.e new-york, zinc and css variables. (default: false)
- -f, --force force overwrite of existing components.json. (default: false)
- -y, --yes skip confirmation prompt. (default: false)
- -c, --cwd the working directory. defaults to the current directory.
- -h, --help display help for command
-```
-
-## add
-
-Use the `add` command to add components and dependencies to your project.
-
-```bash
-npx shadcn@latest add [component]
-```
-
-You will be presented with a list of components to choose from:
-
-```txt
-Which components would you like to add? › Space to select. A to toggle all.
-Enter to submit.
-
-◯ accordion
-◯ alert
-◯ alert-dialog
-◯ aspect-ratio
-◯ avatar
-◯ badge
-◯ button
-◯ calendar
-◯ card
-◯ checkbox
-```
-
-### Options
-
-```txt
-Usage: shadcn add [options] [components...]
-
-add a component to your project
-
-Arguments:
- components the components to add or a url to the component.
-
-Options:
- -y, --yes skip confirmation prompt. (default: false)
- -o, --overwrite overwrite existing files. (default: false)
- -c, --cwd the working directory. defaults to the current directory.
- -p, --path the path to add the component to.
- -h, --help display help for command
-```
-
-## Monorepo
-
-In a monorepo, you can specify the path to your workspace with the `-c` or `--cwd` option.
-
-```bash
-npx shadcn@latest init -c ./apps/www
-```
-
-or
-
-```bash
-npx shadcn@latest add alert-dialog -c ./apps/www
-```
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index 826f0bcc..f4ec4844 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -1,66 +1,75 @@
---
title: Introduction
-description: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
+description: A comprehensive chatbot component kit built on top of shadcn/ui ecosystem.
---
-This is **NOT** a component library. It's a collection of re-usable components that you can copy and paste into your apps.
+If you're not familiar with [shadcn/ui](https://ui.shadcn.com/), we encourage you to take a look at its docs to learn more about it.
-**What do you mean by not a component library?**
-
-I mean you do not install it as a dependency. It is not available or distributed via npm.
-
-Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.
-
-_Use this as a reference to build your own component libraries._
+This collection of components is heavily inspired by `shadcn/ui` and uses its CLI to aid with automatically installing components.
## FAQ
-
- Why copy/paste and not packaged as a dependency?
-
-
-The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.
-
-Start with some sensible defaults, then customize the components to your needs.
-
-One of the drawbacks of packaging the components in an npm package is that the style is coupled with the implementation. _The design of your components should be separate from their implementation._
-
-
+ Is this an official shadcn project?
+
+ No, this is not an official shadcn/ui project. This is a component kit built
+ by Blazity, that follows shadcn/ui's design philosophy and methodology.
+ We've built it to be fully compatible with the shadcn/ui ecosystem, allowing
+ you to seamlessly integrate it with existing shadcn/ui components while
+ maintaining the same level of customization and control over your code.
+
- Do you plan to publish it as an npm package?
+ How does the AI integration work?
- No. I have no plans to publish it as an npm package.
+ The kit is designed to work seamlessly with the Vercel AI SDK out of the box, making it easy to integrate with popular AI providers. Simply use the `useChat` hook from the Vercel AI SDK, and pass the returned properties to our Chat component.
+
+ However, you're not limited to the Vercel AI SDK. The components are built to be provider-agnostic, allowing you to implement your own custom AI integration.
+
-Which frameworks are supported?
+What features are included out of the box?
-
-You can use any framework that supports React. [Next.js](https://ui.shadcn.com/docs/installation/next), [Astro](https://ui.shadcn.com/docs/installation/astro), [Remix](https://ui.shadcn.com/docs/installation/remix), [Gatsby](https://ui.shadcn.com/docs/installation/gatsby) etc.
+The kit includes several key features:
+- Auto-scroll message area with smart scrolling behavior
+- Auto-resize message input with file upload support
+- Built-in prompt suggestions
+- Message actions (copy, rate response, etc.)
+- Elegant loading states and transitions
+- Markdown support and code syntax highlighting in messages
+- File attachments and image preview
+- Dark mode support
+- TypeScript support
+
+All components can be used as-is or customized to match your specific requirements.
- Can I use this in my project?
+ How do I get started?
-Yes. Free to use for personal and commercial projects. No attribution required.
+Getting started is straightforward:
-But hey, let me know if you do. I'd love to see what you build.
+1. First, set up shadcn/ui in your project following their installation guide
+2. Use the modern `shadcn` CLI to install our components
+3. If you're using Vercel AI SDK, import the `useChat` hook and pass it to our Chat component
+4. If you're using a custom implementation, follow our interface guide to integrate your AI service
-
+The components are tree-shakeable and work with any framework that supports React 18 or higher, including Next.js, Remix, Astro, and Gatsby.
+
+
diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx
deleted file mode 100644
index 170d20a8..00000000
--- a/apps/www/content/docs/installation/remix.mdx
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Remix
-description: Install and configure Remix.
----
-
-
-
-### Create project
-
-Start by creating a new Remix project using `create-remix`:
-
-```bash
-npx create-remix@latest my-app
-```
-
-### Run the CLI
-
-Run the `shadcn-ui` init command to setup your project:
-
-```bash
-npx shadcn@latest init
-```
-
-### Configure components.json
-
-You will be asked a few questions to configure `components.json`:
-
-```txt showLineNumbers
-Which style would you like to use? › New York
-Which color would you like to use as base color? › Zinc
-Do you want to use CSS variables for colors? › no / yes
-```
-
-### App structure
-
-
-
-**Note**: This app structure is only a suggestion. You can place the files wherever you want.
-
-
-
-- Place the UI components in the `app/components/ui` folder.
-- Your own components can be placed in the `app/components` folder.
-- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where we define the `cn` helper.
-- The `app/tailwind.css` file contains the global CSS.
-
-### Install Tailwind CSS
-
-```bash
-npm add -D tailwindcss@latest autoprefixer@latest
-```
-
-Then we create a `postcss.config.js` file:
-
-```js
-export default {
- plugins: {
- tailwindcss: {},
- autoprefixer: {},
- },
-}
-```
-
-And finally we add the following to our `remix.config.js` file:
-
-```js {4-5}
-/** @type {import('@remix-run/dev').AppConfig} */
-export default {
- ...
- tailwind: true,
- postcss: true,
- ...
-};
-```
-
-### Add `tailwind.css` to your app
-
-In your `app/root.tsx` file, import the `tailwind.css` file:
-
-```js {1, 4}
-import styles from "./tailwind.css?url"
-
-export const links: LinksFunction = () => [
- { rel: "stylesheet", href: styles },
- ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-]
-```
-
-### That's it
-
-You can now start adding components to your project.
-
-```bash
-npx shadcn@latest add button
-```
-
-The command above will add the `Button` component to your project. You can then import it like this:
-
-```tsx {1,6} showLineNumbers
-import { Button } from "~/components/ui/button"
-
-export default function Home() {
- return (
-