Tile UI Vue
Source code

Components

Dialog

Modal dialog.

Use Dialog to require a decision before continuing.

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button } from '@tile-ui/vue';
 
export default function DialogDemo() {
	return (
		<Dialog>
			<DialogTrigger class="component-preview__action">Open dialog</DialogTrigger>

Registry install

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

Package usage

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button } from '@tile-ui/vue';
 
<Dialog>
	<DialogTrigger>Open</DialogTrigger>
	<DialogContent>
		<DialogHeader>
			<DialogTitle>Edit profile</DialogTitle>
			<DialogDescription>Make changes to your profile.</DialogDescription>
		</DialogHeader>
		<DialogFooter>
			<Button>Save</Button>
		</DialogFooter>
	</DialogContent>
</Dialog>

Highlights

  • Trigger, overlay, and content
  • Header, footer, title, and description
  • Close button

Registry dependencies

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

API reference

Dialog

No custom props.

PreviousContextMenuNextDirection