Vengeance UI

https://www.vengenceui.com/docs
Admin
Vengeance UI is a UI framework designed to streamline the development of modern web applications by...
Tokens:1,938
Snippets:33
Trust Score:4.3
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://www.vengenceui.com/docs/add-utilities

Install `clsx`, `tailwind-merge`, and `framer-motion` using npm.

```bash
npm install clsx tailwind-merge framer-motion
```

--------------------------------

### Start Next.js Development Server

Source: https://www.vengenceui.com/docs/install-tailwind

Run this command to start the development server and see your changes.

```bash
npm run dev
```

--------------------------------

### Start the Next.js Development Server

Source: https://www.vengenceui.com/docs/install-nextjs

Navigate into your new project directory and run the development server.

```bash
cd my-app
npm run dev
```

--------------------------------

### Initialize Project with shadcn CLI

Source: https://www.vengenceui.com/docs/cli

Use the `init` command to set up a new project before adding registry components. This command guides you through style, color, and CSS variable configurations.

```bash
npx shadcn@latest init
```

--------------------------------

### Next.js Installation Prompts

Source: https://www.vengenceui.com/docs/install-nextjs

These are the prompts you will encounter during Next.js installation. It is recommended to use the default settings for TypeScript, ESLint, Tailwind CSS, and App Router.

```bash
What is your project named? my-app
Would you like to use the recommended Next.js defaults?
  Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md
  No, reuse previous settings
  No, customize settings - Choose your own preferences

If you customize settings:
Would you like to use TypeScript? No / Yes
Which linter would you like to use? ESLint / Biome / None
Would you like to use React Compiler? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a src/ directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the import alias (@/* by default)? No / Yes
```

--------------------------------

### Install Tailwind CSS Dependencies

Source: https://www.vengenceui.com/docs/install-tailwind

Install Tailwind CSS and its PostCSS plugin using npm.

```bash
npm install tailwindcss @tailwindcss/postcss
```

--------------------------------

### Add Component in Monorepo

Source: https://www.vengenceui.com/docs/cli

For monorepo setups, use the `-c` or `--cwd` flag with the `add` command to specify the workspace path where the component should be added.

```bash
npx shadcn@latest add https://www.vengenceui.com/r/animated-rays.json -c ./apps/web
```

--------------------------------

### Add Tailwind Import to Global CSS

Source: https://www.vengenceui.com/docs/install-tailwind

Import Tailwind CSS into your project's global CSS file. This example also shows custom variants and inline theme configuration.

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-mono: "Geist Mono", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}
```

--------------------------------

### Create a New Next.js Project

Source: https://www.vengenceui.com/docs/install-nextjs

Use this command to initialize a new Next.js project with Create Next App.

```bash
npx create-next-app@latest my-app
```

--------------------------------

### Create Next.js Project

Source: https://www.vengenceui.com/docs/install-tailwind

Use this command to create a new Next.js project with TypeScript and ESLint.

```bash
npx create-next-app@latest my-project --typescript --eslint --app
```

--------------------------------

### shadcn add Command Usage

Source: https://www.vengenceui.com/docs/cli

This snippet outlines the usage and options for the `shadcn add` command. It details arguments for components or URLs and options like skipping prompts, overwriting files, specifying the working directory, and setting the path for added components.

```bash
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
  -o, --overwrite   overwrite existing files
  -c, --cwd <cwd>   the working directory
  -p, --path <path> the path to add the component to
  -h, --help        display help for command
```

--------------------------------

### Add Component using shadcn CLI

Source: https://www.vengenceui.com/docs/cli

Add components to your project by providing the Vengeance UI registry URL to the `add` command. This command allows specifying components to add or a URL to the component.

```bash
npx shadcn@latest add https://www.vengenceui.com/r/animated-rays.json
```

--------------------------------

### Add Utility File

Source: https://www.vengenceui.com/docs/add-utilities

Create a `lib/utils.ts` file to define the `cn` utility function for merging class names.

```typescript
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

--------------------------------

### Configure PostCSS for Tailwind

Source: https://www.vengenceui.com/docs/install-tailwind

Set up the PostCSS configuration file to include the Tailwind CSS plugin.

```javascript
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;
```

--------------------------------

### Add Component using Namespaced Registry

Source: https://www.vengenceui.com/docs/cli

After configuring a namespaced registry, you can add components using the defined alias and the component name, simplifying the command.

```bash
npx shadcn@latest add @vengeanceui/animated-rays
```

--------------------------------

### Configure Namespaced Registry

Source: https://www.vengenceui.com/docs/cli

Define registry aliases in `components.json` to use short component names. This allows you to reference components using a custom alias, like `@vengeanceui`.

```json
{
  "registries": {
    "@vengeanceui": "https://www.vengenceui.com/r/{name}.json"
  }
}
```

--------------------------------

### Use the Utility in a Component

Source: https://www.vengenceui.com/docs/add-utilities

Utilize the `cn` function in your React components to conditionally apply Tailwind CSS classes while merging conflicts.

```typescript
import { cn } from "@/lib/utils";

export function Example({ active }: { active: boolean }) {
  return (
    <div
      className={cn(
        "rounded-md border px-4 py-2 text-sm",
        active && "border-neutral-950 bg-neutral-950 text-white"
      )}
    >
      Vengeance UI
    </div>
  );
}
```

--------------------------------

### Use Tailwind CSS in a React Component

Source: https://www.vengenceui.com/docs/install-tailwind

Apply Tailwind CSS classes to HTML elements within your Next.js components.

```typescript
export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}
```
Tokens:
Raw