Cookies | With Tailwind

Project Setup and Configurations

In order to use the components and cookies you must have the following dependencies and configs in your project. Here's a step-by-step setup guide.

Have a basic NextJS + Typescript + Tailwind project setup

The setup is going to require a NextJS app with Typescript & Tailwind. Make sure you have a simple project setup, If you have it already, you can go to the next step.

# using npm 
npx create-next-app app-name 

# using yarn 
yarn create next-app app-name

Installing dependencies

All the cookies, components and required utilities are using various npm dependencies. Install them as your first step to get started.

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

Add configuration for animations

The configurations are going to provide basic animations to your components. You can customize and add custom animations in this code.

components/configs/animation-config.ts

export type ComponentAnimationType =
  | 'none'
  | 'from-top'
  | 'from-bottom'
  | 'from-left'
  | 'from-right';

export type ComponentAnimationFramerConfigType = {
  opacity?: number;
  y?: number;
  x?: number;
  scale?: number;
  zoom?: number;
  width?: number;
  height?: number;
};

export const ComponentAnimation: Record<
  ComponentAnimationType,
  {
    initial: ComponentAnimationFramerConfigType;
    animate: ComponentAnimationFramerConfigType;
  }
> = {
  none: {
    initial: {},
    animate: {},
  },
  'from-bottom': {
    initial: {
      opacity: 0,
      y: 12,
    },
    animate: {
      opacity: 1,
      y: 0,
    },
  },
  'from-top': {
    initial: {
      opacity: 0,
      y: -12,
    },
    animate: {
      opacity: 1,
      y: 0,
    },
  },
  'from-left': {
    initial: {
      opacity: 0,
      x: -12,
    },
    animate: {
      opacity: 1,
      x: 0,
    },
  },
  'from-right': {
    initial: {
      opacity: 0,
      x: 12,
    },
    animate: {
      opacity: 1,
      x: 0,
    },
  },
};

Add cn() as to helpers

Components are using cn() to combine the classNames, supporting tailwind-merge. All thanks to shadcn for writing this.

helpers/utils.ts

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

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