Dialog

import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@tile-ui/solid';

export default function DialogDemo() {
	return (
		<Dialog>
			<DialogTrigger class="component-preview__action">Open Solid dialog</DialogTrigger>

Use Dialog for accessible SolidJS modal interactions with focus management.

Registry install

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

Package usage

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button } from '@tile-ui/solid';

<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
`utils`	Shared utility helpers
`button`	Registry component dependency
`styles`	Shared SCSS tokens and globals