Quick Start

Get up and running with Fysk in under 2 minutes.

Time: ~2 minutes

Steps: 3 (one is copy-paste)

Result: State-aware components

1

Install Dependencies

Fysk requires framer-motion for its state-aware animations. Install it along with the core library:

bash
bash
1
npm install @fysk/ui framer-motion lucide-react

If you are using the CLI to add components, it will attempt to install these automatically.

2

Add the Provider

Create a providers file and wrap your app. Fysk comes with animations enabled by default:

tsx
tsx
1
// components/providers.tsx
2
"use client"
3


4
import { FyskProvider } from "@fysk/ui"
5


6
export function Providers({ children }: { children: React.ReactNode }) {
7
    // Animations are enabled by default!
8
    return <FyskProvider>{children}</FyskProvider>
9
}

Then wrap your root layout:

tsx
tsx
1
// app/layout.tsx
2
import { Providers } from "@/components/providers"
3


4
export default function RootLayout({ children }) {
5
    return (
6
        <html>
7
            <body>
8
                <Providers>{children}</Providers>
9
            </body>
10
        </html>
11
    )
12
}
3

Use It!

That's it! Now you can use state-aware components:

tsx
tsx
1
import { Button } from "@/components/ui/button"
2


3
export default function MyPage() {
4
    const [state, setState] = useState<"idle" | "loading" | "success">("idle")
5
    
6
    const handleClick = async () => {
7
        setState("loading")
8
        await saveData()
9
        setState("success")
10
    }
11
    
12
    return (
13
        <Button 
14
            state={state} 
15
            loadingText="Saving..."
16
            successText="Saved!"
17
            onClick={handleClick}
18
        >
19
            Save Changes
20
        </Button>
21
    )
22
}

The button automatically shows loading spinners, success icons, and buttery-smooth transitions between states.

Next Steps

Explore Components

Browse all available components with live previews.

Fysk Provider

Learn how to customize global icons and animation settings.

Built with 💖 | Created by Yashraj