Components
SidePanel

SidePanel

A flexible and composable animated panel for showing large content in a small place.

Loading...

Installation

Copy and paste the following code into your project.

Join the cult to for the code

Update the import paths to match your project setup.

Usage

import React, { useState } from "react";
import { ArrowDownRight, ArrowUpLeft } from "lucide-react";
 
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { PanelContainer } from "@/components/cult/side-panel";
function PanelExample() {
  const [openPanel, setOpenPanel] = useState(false);
 
  const handleVideoOpen = () => {
    setOpenPanel(!openPanel);
  };
 
  // Custom button to toggle the panel
  const renderToggleButton = (handleToggle) => (
    <div
      className={cn(
        "flex items-center gap-3 w-full justify-end pr-4 md:pl-4 py-1 md:py-1",
        openPanel ? "pr-3" : ""
      )}
    >
      <p className="text-xl font-black tracking-tight text-white sm:text-3xl">
        <span className="bg-gradient-to-t from-stone-800 to-neutral-800 bg-clip-text font-brand text-xl font-bold text-transparent sm:text-6xl">
          {openPanel ? "close" : "open"}
        </span>
      </p>
 
      <Button
        variant="outline"
        className="rounded-full py-8"
        onClick={handleToggle}
      >
        {openPanel ? (
          <ArrowUpLeft className="h-8 w-8" />
        ) : (
          <ArrowDownRight className="h-8 w-8" />
        )}
      </Button>
    </div>
  );
 
  return (
    <div className="w-full bg-neutral-800 py-24">
      <PanelContainer
        className="bg-neutral-100"
        panelOpen={openPanel}
        handlePanelOpen={handleVideoOpen}
        renderButton={renderToggleButton}
      >
        // Content here
      </PanelContainer>
    </div>
  );
}