CODEWITHSUNDEEP
reactjstypescriptshadcnui
Jasperan
Jasperan

Reputation: 3766

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?

Upvotes: 1

Views: 1066

Answers (1)

Alex Wayne
Alex Wayne

Reputation: 187114

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'

Upvotes: 2

Related Questions