diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx index b3d7161..7611d31 100644 --- a/apps/www/content/docs/cli.mdx +++ b/apps/www/content/docs/cli.mdx @@ -5,10 +5,18 @@ description: The CLI is a command-line interface that allows you to add componen import { Tabs, Tab } from "fumadocs-ui/components/tabs"; -## init +## Introduction -Use the `init` command to initialize dependencies for a new project. +The Ruru UI CLI is a command-line tool designed to help you initialize projects and add UI components with ease. +## Getting Started + +### Initialization (`init`) +Use the init command to set up the necessary dependencies for a new project. + +### Example: + +Run the following command based on your package manager: The `init`, and CSS variables for the project. @@ -34,6 +42,20 @@ bunx --bun ruru-ui-cli@latest init +#### Configuration Options: + +During initialization, you’ll be prompted to configure the project: + +- TypeScript (recommended) +- Global CSS file +- Tailwind configuration +- CSS variables +- Custom Tailwind prefix (if any) +- Import aliases for components, utils, provider, and interfaces + +These configurations will be saved to ruru.json. + +#### Command Options: ```txt // [!code word:Yes] @@ -59,7 +81,7 @@ bunx --bun ruru-ui-cli@latest init ``` -### Options +#### Options The `init` command supports the following options: @@ -78,11 +100,13 @@ Options: ``` -## add +### Adding Components (`add`) + +The `add` command allows you to quickly add UI components to your project. -Use the `add` command to add components to your project. +#### Example: -The `add` command adds a component to your project and installs all required dependencies. +Use the following commands depending on your package manager: @@ -107,7 +131,7 @@ bunx --bun ruru-ui-cli@latest add [component] -### Options +#### Options The `add` command supports the following options: diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx index 3c67eed..d0e043b 100644 --- a/apps/www/content/docs/index.mdx +++ b/apps/www/content/docs/index.mdx @@ -5,11 +5,31 @@ description: Getting Started with Ruru-UI. import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'; import Link from 'fumadocs-core/link'; +import { Callout } from 'fumadocs-ui/components/callout'; ## Introduction Welcome to **ruru UI**, a comprehensive UI library and a set of reusable components designed to help you build beautiful and consistent user interfaces with ease. + +## How is it different from ShadCN? (Frequently asked question) + +##### NO, it’s not ShadCN! + +- Use it as a `dependency` with ease. +- Enjoy ready-to-use `hooks` for seamless integration. +- Manage themes and components effortlessly with built-in `context`. +- Experience smooth, `animated` components. +- Tailor the design with highly `customizable` options. +- Benefit from a `responsive` design that adapts to any device. +- Ensure `accessibility` with features that cater to everyone. +- Delight users with a `friendly` and intuitive interface. +- Embrace a `modern` and sleek design aesthetic. + +Elevate your project with components that are visually stunning. + + + ## Terminology - **Component**: A reusable piece of UI that can be used across different parts of your application. diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation.mdx index c3ac520..6f99e2b 100644 --- a/apps/www/content/docs/installation.mdx +++ b/apps/www/content/docs/installation.mdx @@ -7,8 +7,8 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; import { Tabs, Tab } from "fumadocs-ui/components/tabs"; import { Step, Steps } from "fumadocs-ui/components/steps"; - - + +