From f8bb73557840f425fc3e7057097336a81558485b Mon Sep 17 00:00:00 2001 From: Karol Chudzik Date: Sat, 26 Oct 2024 12:00:15 +0200 Subject: [PATCH] Fixes --- apps/www/app/(app)/docs/[[...slug]]/page.tsx | 20 ---- apps/www/components/mdx-components.tsx | 1 - apps/www/config/docs.ts | 5 - apps/www/content/docs/cli.mdx | 104 ----------------- apps/www/content/docs/index.mdx | 67 ++++++----- apps/www/content/docs/installation/remix.mdx | 111 ------------------- 6 files changed, 38 insertions(+), 270 deletions(-) delete mode 100644 apps/www/content/docs/cli.mdx delete mode 100644 apps/www/content/docs/installation/remix.mdx diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx index 244cad7b..af68051b 100644 --- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx @@ -142,26 +142,6 @@ export default async function DocPage({ params }: DocPageProps) {
{doc.toc && } - -
-
- 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 ( -
- -
- ) -} -``` - -