Get Started
Components
- Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Backgrounds
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Dialog
- Diamond
- Drawer
- Dropdown Menu
- Hero
- Hover Card
- Input OTP
- Input
- Kbd
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toggle Group
- Toggle
- Tooltip
- Typography
import { Diamond } from "@/components/ui/diamond"
export function DiamondDemo() {
return (
<div className="w-full space-y-8 p-4">
<div className="border-grid relative h-32 w-full border">
<Diamond top left />
<Diamond top right />
<Diamond bottom left />
<Diamond bottom right />
</div>
</div>
)
}
Installation
bunx --bun shadcn@latest add https://ui.brodin.dev/r/diamond.json
Usage
import { Diamond } from "@/components/ui/diamond"
The Diamond component is designed to be placed at grid intersections as a decorative element. Position it absolutely within a relatively positioned container with grid borders.
Examples
Basic Grid Intersection
<div className="border-grid relative h-32 w-full border">
<Diamond top left />
<Diamond top right />
<Diamond bottom left />
<Diamond bottom right />
</div>
Header Navigation
<header className="border-grid relative flex h-16 items-center border">
<Diamond left bottom />
<Diamond right bottom />
{/* header content */}
</header>