Components
Loading preview...
Enhanced shadcn/ui button
npx shadcn@latest add https://21st.dev/r/originui/button"use client";
import { Button } from "@/components/ui/button";
import { ChevronDown, ChevronUp } from "lucide-react";
import { useState } from "react";
function Component() {
const [isExpanded, setIsExpanded] = useState<boolean>(false);
const toggleExpand = () => {
setIsExpanded((prevState) => !prevState);
};
return (
<Button
variant="ghost"
onClick={toggleExpand}
aria-expanded={isExpanded}
aria-controls="expandable-content"
>
{isExpanded ? "Show less" : "Show more"}
{isExpanded ? (
<ChevronUp className="-me-1 ms-1" size={16} strokeWidth={2} aria-hidden="true" />
) : (
<ChevronDown className="-me-1 ms-1" size={16} strokeWidth={2} aria-hidden="true" />
)}
</Button>
);
}
export { Component };