Getting Started
Components
Search for a command to run...
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
export function DialogDefault() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Continue</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
npm install @strongtie/design-system
import { Dialog } from "@strongtie/design-system/dialog"This module exports the following components:
DialogDialogCloseDialogContentDialogDescriptionDialogFooterDialogHeaderDialogOverlayDialogPortalDialogTitleDialogTrigger<DialogContent>| Prop | Type | Default | Description |
|---|---|---|---|
showCloseButton | boolean | - |
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
export function DialogDefault() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Continue</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
export function DialogAlert() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="destructive">Delete Account</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button variant="destructive">Delete Account</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
export function DialogLongContent() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Terms of Service</Button>
</DialogTrigger>
<DialogContent className="max-h-[600px]">
<DialogHeader>
<DialogTitle>Terms of Service</DialogTitle>
</DialogHeader>
<div className="max-h-[300px] overflow-auto">
{Array.from({ length: 10 }).map((_, i) => (
<p key={i} className="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
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.
</p>
))}
</div>
<DialogFooter>
<DialogClose asChild>
<Button>I Accept</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@strongtie/design-system/dropdown-menu"
import { Label } from "@strongtie/design-system/label"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@strongtie/design-system/popover"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@strongtie/design-system/select"
export function DialogWithStacking() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Test Stacking Layers</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[525px]">
<DialogHeader>
<DialogTitle>Z-Index Stacking Test</DialogTitle>
<DialogDescription>
This dialog contains various interactive elements to test proper
z-index stacking behavior. Try opening the select, dropdown menu,
and popover to ensure they appear above the dialog overlay.
</DialogDescription>
</DialogHeader>
<div className="grid gap-6 py-4">
<div className="space-y-2">
<Label>Select Component</Label>
<Select>
<SelectTrigger className="w-full">
<SelectValue placeholder="Choose a framework" />
</SelectTrigger>
<SelectContent>
<SelectItem value="react">React</SelectItem>
<SelectItem value="vue">Vue</SelectItem>
<SelectItem value="angular">Angular</SelectItem>
<SelectItem value="svelte">Svelte</SelectItem>
<SelectItem value="solid">Solid</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Dropdown Menu</Label>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-full">
Open Actions Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Duplicate</DropdownMenuItem>
<DropdownMenuItem>Archive</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive">
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="space-y-2">
<Label>Popover Component</Label>
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" className="w-full">
Open Popover
</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="grid gap-4">
<div className="space-y-2">
<h4 className="leading-none font-medium">
Nested Popover Content
</h4>
<p className="text-muted-foreground text-sm">
This popover should appear above the dialog backdrop and
overlay properly.
</p>
</div>
<div className="space-y-2">
<Label className="text-sm font-medium">Nested Select</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Select a color" />
</SelectTrigger>
<SelectContent>
<SelectItem value="red">Red</SelectItem>
<SelectItem value="blue">Blue</SelectItem>
<SelectItem value="green">Green</SelectItem>
<SelectItem value="yellow">Yellow</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</PopoverContent>
</Popover>
</div>
<div className="space-y-2">
<Label>Another Select</Label>
<Select>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a priority" />
</SelectTrigger>
<SelectContent>
<SelectItem value="low">Low</SelectItem>
<SelectItem value="medium">Medium</SelectItem>
<SelectItem value="high">High</SelectItem>
<SelectItem value="critical">Critical</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<DialogFooter>
<Dialog>
<DialogTrigger>Open Stacked Dialog</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Stacked Dialog</DialogTitle>
<DialogDescription>This is a stacked dialog.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Save Changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Save Changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
CSS classes used by this component:
dialog-closedialog-contentdialog-descriptiondialog-footerdialog-headerdialog-overlaydialog-titledialog-triggerEnsure proper accessibility attributes are added when implementing this component.