Tile UI Vue
Source code

Components

Drawer

Drawer overlay.

Use Drawer to slide a panel in from any direction.

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@tile-ui/vue';
 
export default function DrawerDemo() {
	return (
		<Drawer direction="right">
			<DrawerTrigger class="component-preview__action">Open drawer</DrawerTrigger>

Registry install

pnpm dlx shadcn@latest add @tile-ui/drawer

Package usage

import { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription } from '@tile-ui/vue';
 
<Drawer direction="right">
	<DrawerTrigger>Open</DrawerTrigger>
	<DrawerContent>
		<DrawerTitle>Title</DrawerTitle>
		<DrawerDescription>Description.</DrawerDescription>
	</DrawerContent>
</Drawer>

Highlights

  • Four directions
  • Modal and non-modal
  • Trigger, overlay, and content

Registry dependencies

Item Purpose
drawer Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Drawer

Prop Type Default
direction 'top' | 'bottom' | 'left' | 'right' —
modal boolean —
open boolean —
defaultOpen boolean —
onOpenChange (open: boolean) => void —
PreviousDirectionNextDropdownMenu