+
+
+
+
+ + Push Notifications +
++ Send notifications to device. +
+
+ {notifications.map((notification, index) => (
+
+
+
+
+ ))}
+
+
+ + {notification.title} +
++ {notification.description} +
+
+
+
+ {index + 1}
+
+
+
+
+
+ )
+}
+`,
+ },
+ "collapsible": {
+ Component: CollapsibleExample,
+ source: `"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import {
+ Button,
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@databricks/appkit-ui/react"
+
+export default function CollapsibleExample() {
+ const [isOpen, setIsOpen] = React.useState(false)
+
+ return (
+
+
+
+
+
+ + Example Collapsible +
+
+ First item
+
+
+ Second item
+
+
+ Third item
+
+
+
+ Move Goal
+ Set your daily activity goal.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {goal}
+
+
+ Calories/day
+
+
+
+
+
+
+
+
+
+ VC
+
+
+
+
+ @nextjs
++ The React Framework – created and maintained by @vercel. +
+
+
+
+
+ )
+}
+`,
+ },
+ "menubar": {
+ Component: MenubarExample,
+ source: `import {
+ Menubar,
+ MenubarCheckboxItem,
+ MenubarContent,
+ MenubarItem,
+ MenubarMenu,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarTrigger,
+} from "@databricks/appkit-ui/react"
+
+export default function MenubarExample() {
+ return (
+
+
+ -
+
-
+
+ + ++ AppKit +++ Everything you need out-of-the-box. +
+ +
+
-
+ {components.map((component) => (
+
{title}
+ + {children} +
+ +
+
+
+
+ Dimensions
++ Set the dimensions for the layer. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ One
+
+
+ Two
+
+
+ Three
+
+
+
+ Tags
+ {tags.map((tag) => ( + <> +
+ {tag}
+
+
+
+ )
+}
+`,
+ },
+ "sheet": {
+ Component: SheetExample,
+ source: `import {
+ Button,
+ Input,
+ Label,
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@databricks/appkit-ui/react"
+
+export default function SheetExample() {
+ return (
+
+
+ Radix Primitives
++ An open-source UI component library. +
+
+
+ Blog
+ Docs
+ Source
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+`,
+ },
+ "slider": {
+ Component: SliderExample,
+ source: `import { cn, Slider } from "@databricks/appkit-ui/react"
+
+type SliderProps = React.ComponentProps
+
+
+
+ )
+}
+`,
+ },
+ "table": {
+ Component: TableExample,
+ source: `import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@databricks/appkit-ui/react"
+
+const invoices = [
+ {
+ invoice: "INV001",
+ paymentStatus: "Paid",
+ totalAmount: "\$250.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV002",
+ paymentStatus: "Pending",
+ totalAmount: "\$150.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV003",
+ paymentStatus: "Unpaid",
+ totalAmount: "\$350.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV004",
+ paymentStatus: "Paid",
+ totalAmount: "\$450.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV005",
+ paymentStatus: "Paid",
+ totalAmount: "\$550.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV006",
+ paymentStatus: "Pending",
+ totalAmount: "\$200.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV007",
+ paymentStatus: "Unpaid",
+ totalAmount: "\$300.00",
+ paymentMethod: "Credit Card",
+ },
+]
+
+export default function TableExample() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add to library
+
+
+
+
+
+ {example.source}
+
+