repository·main·Indexed 19 days ago
https://github.com/olliethedev/dnd-dashboardA performant dashboard demo featuring drag-and-drop layout customization built with Next.js, shadcn/ui, and the Swapy library.
app/page.tsx. Because this project uses Next.js, the page will automatically update in your browser as you make changes to this file.To start the project locally for development, use one of the following package manager commands. Once running, the dashboard will be available at http://localhost:3000.
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devThe cn utility function is used to conditionally merge Tailwind CSS classes. It combines clsx for conditional logic and tailwind-merge to ensure that conflicting Tailwind classes are resolved correctly (e.g., ensuring the last class passed takes precedence).
Use this function whenever you need to apply dynamic or conditional styles to a component while maintaining Tailwind CSS compatibility.
import { cn } from "@/lib/utils";
// Example usage with conditional classes
const className = cn("base-class", isTrue && "conditional-class", "override-class");