Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ); } `,children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dark",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Button,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Sheet,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetClose,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetContent,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetDescription,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetFooter,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetHeader,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetTitle,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetTrigger,"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Component"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"JSX"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Element"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Sheet"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"modal"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetTrigger"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"asChild"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Open Sheet"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetContent"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"noOverlay"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"m-3 h-[calc(100%-1.5rem)] w-[calc(100%-1.5rem)] rounded-[1rem] bg-white p-0 lg:w-[512px] sm:max-w-[auto] flex flex-col"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetHeader"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"p-6 text-left"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetTitle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Sheet Title"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-sm text-gray-900"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Lorem ipsum dolor sit amet, consectetur adipiscing elit."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetDescription"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"px-6 py-4 text-copy-14"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" minim veniam, quis nostrud exercitation ullamco laboris nisi ut"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" aliquip ex ea commodo consequat."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetFooter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"p-6 gap-2 flex-row justify-end mt-auto"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetClose"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"asChild"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"secondary"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Close"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Next"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,l.jsxs)(e.div,{className:"component-preview",children:[(0,l.jsx)(e.h2,{children:"With Side"}),` `,(0,l.jsxs)(e.p,{children:["Use the ",(0,l.jsx)(e.code,{children:"side"})," prop to control which edge the sheet slides in from."]}),` `,(0,l.jsx)(s,{name:"sheet-with-side",children:(0,l.jsxs)(e.div,{"data-rehype-pretty-code-fragment":"",children:[(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"light",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"light",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" Button,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" Sheet,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" SheetContent,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" SheetHeader,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" SheetTitle,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" SheetTrigger,"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:"} "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" { JSX } "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#032F62"},children:"'react'"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#005CC5"},children:"sides"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#032F62"},children:"'top'"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#032F62"},children:"'right'"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#032F62"},children:"'bottom'"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#032F62"},children:"'left'"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"Component"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:"()"}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"Element"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#22863A"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#032F62"},children:'"flex items-center justify-center gap-4"'}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" {sides."}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"map"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#E36209"},children:"side"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#005CC5"},children:"Sheet"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"key"}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:"{side} "}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"modal"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#005CC5"},children:"SheetTrigger"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"asChild"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#005CC5"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:">Open {side}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#005CC5"},children:"SheetContent"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"side"}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:"{side}>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#005CC5"},children:"SheetHeader"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#005CC5"},children:"SheetTitle"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:">Sheet from {side}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#22863A"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6F42C1"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#D73A49"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#032F62"},children:'"text-sm text-gray-900"'}),(0,l.jsx)(e.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" This sheet slides in from the {side}."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" ))}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Button, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, } from 'geist/components'; import type { JSX } from 'react'; const sides = ['top', 'right', 'bottom', 'left'] as const; export function Component(): JSX.Element { return (

{sides.map((side) => ( Sheet from {side}

This sheet slides in from the {side}.

))}

); } `,children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dark",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Button,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Sheet,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetContent,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetHeader,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetTitle,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SheetTrigger,"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { JSX } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"sides"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'top'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'right'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'bottom'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'left'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Component"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"JSX"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Element"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center justify-center gap-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {sides."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"side"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Sheet"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"key"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{side} "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"modal"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetTrigger"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"asChild"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Open {side}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetContent"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"side"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{side}>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetHeader"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SheetTitle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Sheet from {side}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-sm text-gray-900"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" This sheet slides in from the {side}."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]})]})}function B(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(h,n)})):h(n)}var g=B;function x(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return S(f);})(); ;return Component;

Sheet

Default

With Side