Docs
Pill

Pill

A dynamic pill component with tabs built using React and Framer Motion.

Component pill-cards not found in registry.

Installation

Run the following command

It will create a new file pill.tsx inside the components/cards/pill.tsx directory.

mkdir -p components/cards && touch components/cards/pill.tsx && components/cards/check-box.tsx

Paste the code

Open the newly created check-box file and paste the following code:

import React, { Dispatch, SetStateAction, useState } from "react";
import { motion } from "framer-motion";
 
interface CheckboxProps {
  isChecked: boolean;
  setIsChecked: Dispatch<SetStateAction<boolean>>;
}
 
const Checkbox: React.FC<CheckboxProps> = ({ isChecked, setIsChecked }) => {
  const checkboxVariants = {
    checked: {
      backgroundColor: "black",
      borderColor: "black",
      transition: {
        duration: 0.5,
      },
    },
    unchecked: {
      backgroundColor: "#ccc",
      borderColor: "#ccc",
      transition: {
        duration: 0.5,
      },
    },
  };
 
  const checkmarkVariants = {
    checked: {
      pathLength: 1,
      opacity: 1,
      transition: {
        duration: 0.5,
      },
    },
    unchecked: {
      pathLength: 0,
      opacity: 0,
      transition: {
        duration: 0.5,
      },
    },
  };
 
  const spring = {};
 
  return (
    <motion.div
      className="w-6 h-6 border-2 rounded-md flex items-center justify-center cursor-pointer"
      variants={checkboxVariants}
      animate={isChecked ? "checked" : "unchecked"}
      onClick={() => setIsChecked(!isChecked)}
      whileTap={{
        scale: 0.8,
      }}
    >
      <svg width="12" height="10" viewBox="0 0 12 10" className="stroke-white">
        <motion.path
          fill="none"
          strokeWidth="2"
          stroke="white"
          d="M1 5.5L4 8.5L11 1.5"
          variants={checkmarkVariants}
          initial="unchecked"
          transition={spring}
          animate={isChecked ? "checked" : "unchecked"}
        />
      </svg>
    </motion.div>
  );
};
 
export default Checkbox;

Paste the code

Open the newly created file and paste the following code:

import React from "react";
 
const Pill = () => {
  return <div>Pill</div>;
};
 
export default Pill;

Credits

Built by Bossadi Zenith

Edit this page on GitHub
Overview StackedStrike