Skiper UI

https://skiper-ui.com/docs
Admin
Skiper UI is a collection of high-quality, customizable UI components built on shadcn/ui, designed...
Tokens:1,022
Snippets:25
Trust Score:6.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### CLI installation output

Source: https://skiper-ui.com/docs/quick-start

Example of the terminal output after running the add command.

```text
-> npx shadcn add @skiper-ui/skiper40
✔ Checking registry.
✔ Created 1 file:
  - src/components/ui/skiper-ui/skiper40.tsx
```

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

### Install project dependencies

Source: https://skiper-ui.com/docs/quick-start

Install the required packages for Skiper-UI components.

```bash
pnpm add clsx framer-motion lucide-react tailwind-merge
```

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

### Install Pro component via CLI

Source: https://skiper-ui.com/docs/quick-start

Install a Pro component after configuring the registry and license key.

```bash
npx shadcn add @skiper-ui/skiper20
```

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

### Import a component

Source: https://skiper-ui.com/docs/quick-start

Import the installed component into your application code.

```typescript
import { Skiper40 } from '@/components/v1/skiper40';
```

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

### Install a component via CLI

Source: https://skiper-ui.com/docs/quick-start

Use the shadcn CLI to add a specific component to your project.

```bash
npx shadcn add @skiper-ui/skiper40
```

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

### Setup utility function

Source: https://skiper-ui.com/docs/quick-start

Configure the cn utility function in lib/utils.ts for class merging.

```typescript
// lib/utils.ts
import clsx, { ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

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

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

### Configure Pro license key

Source: https://skiper-ui.com/docs/quick-start

Add your license key to the .env.local file for Pro component access.

```bash
SKIPER_LICENSE_KEY=your_license_key_here
```

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

### Configure registry in components.json

Source: https://skiper-ui.com/docs/quick-start

Update your components.json file to include the Skiper-UI registry with authorization headers.

```json
{
  "registries": {
    "@skiper-ui": {
      "url": "https://skiper-ui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${SKIPER_LICENSE_KEY}"
      }
    }
  }
}
```
Tokens:
Raw