Quick Start Guide

It's pretty simple to use - just copy your favorite shadcn CLI command and paste it in your terminal, and the component is all yours. Modify as you need and build crazy stuff!

initialize shacn

npx shadcn init

setup @Skiper-ui for shadcn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }

Now just paste this code in your terminal

npx shadcn add @skiper-ui/skiper40

OR with old shadcncli

npx shadcn@latest add http://skiper-ui.com/registry/skiper40.json

after the cli you'll see this output

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

Now you can use the component

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

Using the Pro Components

Buy the pro membership and click on the

source code button on top right of every component. copy the code and paste it in your project or download the .tsx file

Walk through the website

When you visit skiper-ui.com, you will see various symbols throughout the interface. To be crystal clear, below are the meanings of each symbol

Symbol	Meaning
	Scroll trigger
	Source code
	Minimize view
	Maximize view
	Open in new tab
	Premium Component
	Copy
	Theme Toggle
	Mail

free paid components

Now some of the components are free and some are paid. you can see the premium symbol next to the paid components /components in this page

Manually install

Install dependencies using pnpm, npm, or yarn
Set up clsx and tailwind-merge in lib/utils.ts
Import components from our registry

Prerequisites

framer-motion tailwindcss react clsx lucide-react react-use-measure gsap

install dependencies

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

Setup lib

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

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

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to

Drop a dm.

License & Usage:

Free to use and modify in both personal and commercial projects.
Attribution to Skiper UI is required when using the free version.
No attribution required with Skiper UI Pro.

Enjoy building!

Build crazy projects and tag us on x.com/skiperUi peace out