Quickstart

This guide will help you get started with our React components and hooks in your Next.js project. We'll cover installation, basic setup, and show you how to use your first component.

These components are designed for Next.js App Router projects. Make sure you're using Next.js 13+ with the App Router before getting started.

Prerequisites

Before you begin, ensure you have:

A Next.js project (version 13 or higher) with the App Router
Node.js 18+ installed
A package manager (npm, yarn, pnpm, or bun)

Installation

Most components require common dependencies. Install them using your preferred package manager:

npm install clsx motion

Note: Some components may require additional dependencies or assets. Check the individual component documentation for specific requirements. Hooks like useQueryParamsState only use Next.js built-ins and don't require any additional packages.

Using components

To use any component from this library:

Copy the component code from the component's documentation page into your project
Place it in your components directory (e.g., src/components)
Import and use it in your pages or components

Here's a general example:

import MyComponent from '@/components/MyComponent'

export default function Page() {
  return (
    <div>
      <MyComponent />
    </div>
  )
}

Some components may require additional assets (like images or sound files). Check each component's documentation for specific setup instructions.

Available components

Browse our collection of React components and hooks:

3D Button — Interactive 3D-styled button with sound effects
Playing Card — Animated playing card component with flip transitions
Wheel — Interactive spinning wheel component
useQueryParamsState — React hook for managing URL query parameters

Each component includes full documentation with examples, props, and usage instructions.

Project structure

We recommend organizing your components and hooks like this:

src/
  components/
    [ComponentName].tsx
  hooks/
    [hookName].ts
  app/
    your-page/
      page.tsx

Feel free to adapt this structure to match your project's conventions.

What's next?

Now that you're set up, explore our components and hooks:

3D Button Component — Interactive button with sound effects
Playing Card Component — Animated card with flip transitions
useQueryParamsState Hook — Manage URL query parameters
Wheel Component — Interactive spinning wheel