Installation

Set up your project to start using Fysk components.

1

Create a Project

Start by creating a new Next.js project using create-next-app.

bash
bash
1
npx create-next-app@latest my-app --typescript --tailwind --eslint
2

Run the CLI Init

Fysk is built on top of the shadcn/ui foundation. Run the init command to set up the base configuration, strict dependencies, and utility files.

bash
bash
1
npx shadcn@latest init

Configuration defaults:

  • Style: New York
  • Base Color: Zinc
  • CSS Variables: Yes
3

Add Components

You can now add components to your project. Browse the Components section to find what you need.

Currently, Fysk does not have a dedicated CLI. However, since we are compatible with the shadcn ecosystem, you can use the standard shadcn command pointing to our registry, or simply copy the code manually.

Option A: Via CLI (Recommended)

On each component page, you will find a CLI command. Run it to install the component and its dependencies automatically.

bash
bash
1
npx shadcn@latest add https://fysk.dev/r/{component_name}.json

Option B: Manual Installation

Copy the code from the "Code" tab on the component page into your project (Preview section contains the original code for component).

4

Install Dependencies

If you are installing components manually or the CLI didn't catch them, make sure to install the core animation and icon dependencies:

bash
bash
1
npm install framer-motion lucide-react

See the Quick Start guide for the provider setup.

Built with 💖 | Created by Yashraj