Home
Get Started
Toggle Menu
make toggleable side menu using shadcn ui with expandable menu items | A shadcn/ui and v0 generation - v0
Link to shamil-gk's v0.app Profile
use this code as base "use client" import * as React from "react" import Link from "next/link" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function SidebarDemo() { const [open, setOpen] = React.useState(false) return ( <div className="flex"> <div className={` ${ open ? "w-40" : "w-60 " } flex flex-col h-screen p-3 bg-black shadow duration-300`} > <div className="space-y-3"> <div className="flex items-center justify-between"> <h2 className="text-xl font-bold text-white">Dashboard</h2> <button onClick={() => setOpen(!open)}> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-white" > <path strokeLinecap="round
Add
component
to project
Learn more
npx v0 add
a1B2c3d4
component.jsx
(read-only)
Log In to Copy Code
To enable copying code, saving to favorites, forking, and other features, please sign up or log in.
Authenticate
Copy Code
Copy CLI command
Link to shamil-gk's v0.app Profile
use this code as base "use client" import * as React from "react" import Link from "next/link" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function SidebarDemo() { const [open, setOpen] = React.useState(false) return ( <div className="flex"> <div className={` ${ open ? "w-40" : "w-60 " } flex flex-col h-screen p-3 bg-black shadow duration-300`} > <div className="space-y-3"> <div className="flex items-center justify-between"> <h2 className="text-xl font-bold text-white">Dashboard</h2> <button onClick={() => setOpen(!open)}> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-white" > <path strokeLinecap="round
History
Toggle
v0
v1
v2
Desktop
Tablet
Mobile
Full Screen
History
Code
