Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Shadcn ui property 'open' does not exist for Sheet component

I’m following this tutorial for a shadcn ui mobile nav bar, however when I use the code in my own project, I get this error:

Property 'open' does not exist on type 'IntrinsicAttributes & Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>'.

Here’s the code I was using:

// MobileNav.tsx
import { useState } from 'react';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { Menu as MenuIcon } from 'lucide-react';

const mobileItems = ['A', 'B', 'C'];

export default function MobileNav() {
  const [open, setOpen] = useState(false);

  return (
    <Sheet open={open} onOpenChange={setOpen}>

      {/* This button will trigger open the mobile sheet menu */}
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="md:hidden">
          <MenuIcon />
        </Button>
      </SheetTrigger>

      <SheetContent side="left"> 
        <div className="flex flex-col items-start">
          {mobileItems.map((item, index) => (
            <Button
              key={index}
              variant="link"
              onClick={() => {
                setOpen(false);
              }}
            >
              {item}
            </Button>
          ))}
        </div>
      </SheetContent>

    </Sheet>
  );
}

I noticed that in the Shadcn docs there’s no Sheet component, rather the link for the Sheet docs leads to the Dialog component which has an open prop. I haven’t seen anything about this error here or elsewhere on the internet. What’s going on here?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Property ‘open’ does not exist on type ‘IntrinsicAttributes & Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>’.

Note how the error mentions LucideProps and SVGSVGElement?

This error says that Sheet isn’t what you think it is.


You are clearly importing this:

import { Sheet } from 'lucide-react'

See this same error in the playground here


When you meant to import this:

import { Sheet } from '@/components/ui/sheet'
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading