gsxui

https://ui.gsxhq.dev/
Admin
gsxui is a shadcn-style, copy-in, type-checked, and server-rendered component library for building...
Tokens:75,152
Snippets:436
Trust Score:2.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install the component

Source: https://ui.gsxhq.dev/components/native-select

Command to add the native-select component to the project.

```bash
gsxui add native-select
```

--------------------------------

### Install gsx and gsxui CLIs

Source: https://ui.gsxhq.dev/docs/getting-started

Install the required command-line tools using Go.

```bash
go install github.com/gsxhq/gsx/cmd/gsx@latest
go install github.com/gsxhq/gsxui/cmd/gsxui@latest
```

--------------------------------

### Installation Command

Source: https://ui.gsxhq.dev/components/tooltip

Command to add the tooltip component to the project.

```bash
gsxui add tooltip
```

--------------------------------

### Install component

Source: https://ui.gsxhq.dev/components/input

Command to add the input component to the project.

```bash
gsxui add input
```

--------------------------------

### Installation Command

Source: https://ui.gsxhq.dev/components/dialog

Command to add the dialog component to the project.

```bash
gsxui add dialog
```

--------------------------------

### Installation Command

Source: https://ui.gsxhq.dev/components/card

Command to add the card component to your project.

```bash
gsxui add card
```

--------------------------------

### Installation Command

Source: https://ui.gsxhq.dev/components/button-group

Command to add the button-group component to the project.

```bash
gsxui add button-group
```

--------------------------------

### Install Command Component

Source: https://ui.gsxhq.dev/components/command

Command to add the component to the project.

```bash
gsxui add command
```

--------------------------------

### Installation Command

Source: https://ui.gsxhq.dev/components/field

Command to add the field component to your project.

```bash
gsxui add field
```

--------------------------------

### Installation Command

Source: https://ui.gsxhq.dev/components/avatar

Command to add the avatar component to the project.

```bash
gsxui add avatar
```

--------------------------------

### Install Textarea component

Source: https://ui.gsxhq.dev/components/textarea

Command to add the Textarea component to the project.

```bash
gsxui add textarea
```

--------------------------------

### Installation Command

Source: https://ui.gsxhq.dev/components/collapsible

Command to add the collapsible component to the project.

```bash
gsxui add collapsible
```

--------------------------------

### Install the Label component

Source: https://ui.gsxhq.dev/components/label

Use the CLI to add the Label component to your project.

```bash
gsxui add label
```

--------------------------------

### Install Switch component

Source: https://ui.gsxhq.dev/components/switch

Command to add the Switch component to the project.

```bash
gsxui add switch
```

--------------------------------

### Install OTP Component

Source: https://ui.gsxhq.dev/components/input-otp

Command to add the input-otp component to the project.

```bash
gsxui add input-otp
```

--------------------------------

### Install Toast Component

Source: https://ui.gsxhq.dev/components/toast

Command to add the toast component to the project.

```bash
gsxui add toast
```

--------------------------------

### Install Table Component

Source: https://ui.gsxhq.dev/components/table

Command to add the table component to the project.

```bash
gsxui add table
```

--------------------------------

### Install the Alert-dialog component

Source: https://ui.gsxhq.dev/components/alert-dialog

Command to add the alert-dialog component to the project.

```bash
gsxui add alert-dialog
```

--------------------------------

### Install pagination component

Source: https://ui.gsxhq.dev/components/pagination

Command to add the pagination component to the project.

```bash
gsxui add pagination
```

--------------------------------

### Install Menubar Component

Source: https://ui.gsxhq.dev/components/menubar

Command to add the menubar component to your project.

```bash
gsxui add menubar
```

--------------------------------

### Install Resizable Component

Source: https://ui.gsxhq.dev/components/resizable

Command to add the resizable component to the project.

```bash
gsxui add resizable
```

--------------------------------

### Install the empty component

Source: https://ui.gsxhq.dev/components/empty

Command to add the empty component to the project.

```bash
gsxui add empty
```

--------------------------------

### Install Chart Component

Source: https://ui.gsxhq.dev/components/chart

Command to add the chart component to the project.

```bash
gsxui add chart
```

--------------------------------

### Install drawer component

Source: https://ui.gsxhq.dev/components/drawer

Command to add the drawer component to the project.

```bash
gsxui add drawer
```

--------------------------------

### Install dropdown menu component

Source: https://ui.gsxhq.dev/components/dropdown-menu

Command to add the dropdown menu component to the project.

```bash
gsxui add dropdown-menu
```

--------------------------------

### Install icon package

Source: https://ui.gsxhq.dev/components/icon

Command to add the icon package to the project.

```bash
gsxui add icon
```

--------------------------------

### Install Kbd Component

Source: https://ui.gsxhq.dev/components/kbd

Command to add the Kbd component to the project.

```bash
gsxui add kbd
```

--------------------------------

### Install Progress Component

Source: https://ui.gsxhq.dev/components/progress

Command to add the progress component to your project.

```bash
gsxui add progress
```

--------------------------------

### Install Hover-card Component

Source: https://ui.gsxhq.dev/components/hover-card

Command to add the hover-card component to the project.

```bash
gsxui add hover-card
```

--------------------------------

### Install Aspect Ratio Component

Source: https://ui.gsxhq.dev/components/aspect-ratio

Command to add the aspect-ratio component to your project.

```bash
gsxui add aspect-ratio
```

--------------------------------

### Install Navigation Menu Component

Source: https://ui.gsxhq.dev/components/navigation-menu

Command to add the navigation menu component to the project.

```bash
gsxui add navigation-menu
```

--------------------------------

### Start development server

Source: https://ui.gsxhq.dev/docs/getting-started

Run the development loop to watch for changes and reload the browser.

```bash
go tool gsx dev
```

--------------------------------

### Initialize a GSX project

Source: https://ui.gsxhq.dev/docs/getting-started

Create a new GSX application and initialize gsxui within it.

```bash
gsx init app --yes
cd app
gsxui init
```

```text
gsxui initialized.
  css:  web/gsxui/index.css
  js:   web/gsxui/index.js
  vite: Tailwind CSS configured
  next: gsxui add button
```

--------------------------------

### Install Toggle-group

Source: https://ui.gsxhq.dev/components/toggle-group

Command to add the toggle-group component to your project.

```bash
gsxui add toggle-group
```

--------------------------------

### Implement a full-featured Menubar

Source: https://ui.gsxhq.dev/components/menubar

A comprehensive example demonstrating the use of Menubar, MenubarMenu, submenus, checkbox items, and radio groups.

```go
package menubar

import (
	"github.com/gsxhq/gsxui/ui"
)

// Full mirrors shadcn's own menubar-demo.tsx (registry/new-york-v4/
// examples/menubar-demo.tsx) end to end: a File menu with a disabled item
// and a submenu, an Edit menu with checkbox items, a View menu with a
// radio group, and a Profiles-shaped menu — exercising every shared item
// type Task 1/2 already shipped (Item, CheckboxItem, RadioGroup/RadioItem,
// Sub/SubTrigger/SubContent) plus this task's own bar-level roving tabindex
// and open-follows-hover. Every `inset` prop shadcn's demo passes maps to
// the CSS-only data-inset attr axis (see docs/jsx-parity.md's
// ## dropdown-menu ledger).
component Full() {
	<ui.Menubar>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>File</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarGroup>
					<ui.MenubarLabel>File actions</ui.MenubarLabel>
					<ui.MenubarItem>
						New Tab
						<ui.MenubarShortcut>⌘T</ui.MenubarShortcut>
					</ui.MenubarItem>
					<ui.MenubarItem>
						New Window
						<ui.MenubarShortcut>⌘N</ui.MenubarShortcut>
					</ui.MenubarItem>
					<ui.MenubarItem variant="destructive" aria-disabled="true" data-disabled="true">
						New Incognito Window
					</ui.MenubarItem>
				</ui.MenubarGroup>
				<ui.MenubarSub>
					<ui.MenubarSubTrigger>Share</ui.MenubarSubTrigger>
					<ui.MenubarSubContent>
						<ui.MenubarItem>Email Link</ui.MenubarItem>
						<ui.MenubarItem>Messages</ui.MenubarItem>
						<ui.MenubarItem>Notes</ui.MenubarItem>
					</ui.MenubarSubContent>
				</ui.MenubarSub>
				<ui.MenubarSeparator/>
				<ui.MenubarItem>
					Print...
					<ui.MenubarShortcut>⌘P</ui.MenubarShortcut>
				</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>Edit</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarItem>
					Undo
					<ui.MenubarShortcut>⌘Z</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarItem>
					Redo
					<ui.MenubarShortcut>⇧⌘Z</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarSeparator/>
				<ui.MenubarSub>
					<ui.MenubarSubTrigger>Find</ui.MenubarSubTrigger>
					<ui.MenubarSubContent>
						<ui.MenubarItem>Search the web</ui.MenubarItem>
						<ui.MenubarSeparator/>
						<ui.MenubarItem>Find...</ui.MenubarItem>
						<ui.MenubarItem>Find Next</ui.MenubarItem>
						<ui.MenubarItem>Find Previous</ui.MenubarItem>
					</ui.MenubarSubContent>
				</ui.MenubarSub>
				<ui.MenubarSeparator/>
				<ui.MenubarItem>Cut</ui.MenubarItem>
				<ui.MenubarItem>Copy</ui.MenubarItem>
				<ui.MenubarItem>Paste</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>View</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarCheckboxItem checked={true} value="bookmarks">Always Show Bookmarks Bar</ui.MenubarCheckboxItem>
				<ui.MenubarCheckboxItem checked={false} value="full-urls">Always Show Full URLs</ui.MenubarCheckboxItem>
				<ui.MenubarSeparator/>
				<ui.MenubarItem aria-disabled="true" data-disabled="true" data-inset="true">
					Reload
					<ui.MenubarShortcut>⌘R</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarItem aria-disabled="true" data-disabled="true" data-inset="true">
					Force Reload
					<ui.MenubarShortcut>⇧⌘R</ui.MenubarShortcut>
				</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>Profiles</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarRadioGroup value="benoit">
					<ui.MenubarRadioItem checked={false} value="andy">Andy</ui.MenubarRadioItem>
					<ui.MenubarRadioItem checked={true} value="benoit">Benoit</ui.MenubarRadioItem>
					<ui.MenubarRadioItem checked={false} value="luis">Luis</ui.MenubarRadioItem>
				</ui.MenubarRadioGroup>
				<ui.MenubarSeparator/>
				<ui.MenubarItem data-inset="true">Edit...</ui.MenubarItem>
				<ui.MenubarSeparator/>
				<ui.MenubarItem data-inset="true">Add Profile...</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
	</ui.Menubar>
}
```

--------------------------------

### Basic Context Menu Implementation

Source: https://ui.gsxhq.dev/components/context-menu

A simple context menu with standard items, shortcuts, a separator, and a destructive action.

```Go
// Package contextmenu holds the site's example gsx components for
// ui/context-menu.
package contextmenu

import (
	"github.com/gsxhq/gsxui/ui"
)

// Basic mirrors shadcn's own context-menu-demo.tsx (registry/new-york-v4/
// examples/context-menu-demo.tsx): a dashed-border right-click zone, a few
// browser-chrome-shaped items (Back/Forward/Reload) each carrying a
// ContextMenuShortcut, a separator, and a destructive-variant item. The
// Sub/checkbox/radio-group parts of the real demo are dropped along with
// those components (see docs/jsx-parity.md's ## context-menu GAP entry).
component Basic() {
	<ui.ContextMenu>
		<ui.ContextMenuTrigger
			class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
		>
			Right click here
		</ui.ContextMenuTrigger>
		<ui.ContextMenuContent class="w-52">
			<ui.ContextMenuItem>
				Back
				<ui.ContextMenuShortcut>⌘[</ui.ContextMenuShortcut>
			</ui.ContextMenuItem>
			<ui.ContextMenuItem aria-disabled="true" data-disabled="true">
				Forward
				<ui.ContextMenuShortcut>⌘]</ui.ContextMenuShortcut>
			</ui.ContextMenuItem>
			<ui.ContextMenuItem>
				Reload
				<ui.ContextMenuShortcut>⌘R</ui.ContextMenuShortcut>
			</ui.ContextMenuItem>
			<ui.ContextMenuSeparator/>
			<ui.ContextMenuItem variant="destructive">Delete</ui.ContextMenuItem>
		</ui.ContextMenuContent>
	</ui.ContextMenu>
}
```

--------------------------------

### Implement Basic Command Component

Source: https://ui.gsxhq.dev/components/command

Creates an inline command palette with suggestions, separators, and keyboard shortcuts. Requires the gsxui/ui and gsxui/ui/icon packages.

```go
// Package command holds the site's example gsx components for ui/command.
package command

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Basic mirrors shadcn's own command demo (registry/new-york-v4/examples/
// command-demo.tsx): an inline (non-dialog) palette with a suggestions
// group, a separator, and a settings group with shortcuts. Type to see
// score-ranked filtering; ArrowUp/ArrowDown move the selection while focus
// stays in the input; Enter or click activates (these demo items emit
// gsxui:select only — they carry no data-href).
component Basic() {
	<div>
		<ui.Command class="max-w-md border shadow-md">
			<ui.CommandInput placeholder="Type a command or search..."/>
			<ui.CommandList>
				<ui.CommandEmpty>No results found.</ui.CommandEmpty>
				<ui.CommandGroup heading="Suggestions">
					<ui.CommandItem>
						<icon.Calendar/>
						<span>Calendar</span>
					</ui.CommandItem>
					<ui.CommandItem>
						<icon.Smile/>
						<span>Search Emoji</span>
					</ui.CommandItem>
					<ui.CommandItem data-disabled="true">
						<icon.Calculator/>
						<span>Calculator</span>
					</ui.CommandItem>
				</ui.CommandGroup>
				<ui.CommandSeparator/>
				<ui.CommandGroup heading="Settings">
					<ui.CommandItem>
						<icon.User/>
						<span>Profile</span>
						<ui.CommandShortcut>⌘P</ui.CommandShortcut>
					</ui.CommandItem>
					<ui.CommandItem>
						<icon.CreditCard/>
						<span>Billing</span>
						<ui.CommandShortcut>⌘B</ui.CommandShortcut>
					</ui.CommandItem>
					<ui.CommandItem>
						<icon.Settings/>
						<span>Settings</span>
						<ui.CommandShortcut>⌘S</ui.CommandShortcut>
					</ui.CommandItem>
				</ui.CommandGroup>
			</ui.CommandList>
		</ui.Command>
		<ui.CommandDialog title="Command palette" description="Search commands">
			<ui.CommandInput placeholder="Search commands..."/>
			<ui.CommandList>
				<ui.CommandItem>Open settings</ui.CommandItem>
			</ui.CommandList>
		</ui.CommandDialog>
	</div>
}
```

--------------------------------

### Implement a Basic Menubar

Source: https://ui.gsxhq.dev/components/menubar

Creates a menubar with File and Edit menus, including keyboard shortcuts and separators. This implementation supports hover-based menu switching.

```go
// Package menubar holds the site's example gsx components for ui/menubar.
package menubar

import (
	"github.com/gsxhq/gsxui/ui"
)

// Basic mirrors shadcn's own menubar-demo.tsx (registry/new-york-v4/
// examples/menubar-demo.tsx) shape, trimmed to two menus: File (plain items
// with shortcuts, a separator) and Edit (plain items). Once one of the two
// triggers is open, hovering the other switches menus with no click — the
// open-follows-hover behavior this task's own ui/menubar.js adds.
component Basic() {
	<ui.Menubar>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>File</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarItem>
					New Tab
					<ui.MenubarShortcut>⌘T</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarItem>
					New Window
					<ui.MenubarShortcut>⌘N</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarSeparator/>
				<ui.MenubarItem>
					Print...
					<ui.MenubarShortcut>⌘P</ui.MenubarShortcut>
				</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>Edit</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarItem>
					Undo
					<ui.MenubarShortcut>⌘Z</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarItem>
					Redo
					<ui.MenubarShortcut>⇧⌘Z</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarSeparator/>
				<ui.MenubarItem>Cut</ui.MenubarItem>
				<ui.MenubarItem>Copy</ui.MenubarItem>
				<ui.MenubarItem>Paste</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
	</ui.Menubar>
}
```

--------------------------------

### Install Toggle Component

Source: https://ui.gsxhq.dev/components/toggle

Command to add the toggle component to your project.

```bash
gsxui add toggle
```

--------------------------------

### Implement a Basic Drawer Component

Source: https://ui.gsxhq.dev/components/drawer

This example demonstrates a bottom-anchored drawer with a header, content area, and footer. It uses static markup for the goal-setting interface and standard button triggers for drawer control.

```go
// Package drawer holds the site's example gsx components for ui/drawer.
package drawer

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Basic adapts shadcn's own drawer-demo.tsx (a bottom-anchored goal-counter
// drawer): the recharts BarChart sparkline has no gsxui equivalent (the
// roadmap defers charting entirely — "chart — defer until demanded"), so
// it is replaced with a static decorative bar row of plain divs standing
// in for the chart's shape, not a literal port. The +/- stepper buttons
// are likewise static markup — shadcn's demo wires them to useState, which
// has no server-rendered gsx equivalent; they render with the demo's own
// styling (ui.Button variant="outline" size="icon" rounded-full) as a
// visual stand-in around the fixed goal number.
//
// The trigger is one real Button carrying the drawer trigger style slot plus
// Dialog's behavior/ARIA contract. The footer's Cancel button is a real Button
// carrying data-gsxui-dialog-close directly rather than wrapped in
// DrawerClose, the same button-in-button reasoning as
// site/examples/sheet/basic.gsx's own Save-changes button.
component Basic() {
	<ui.Drawer>
		<ui.Button
			variant="outline"
			data-gsxui-slot-drawer-trigger
			aria-haspopup="dialog"
			aria-expanded="false"
		>
			Open Drawer
		</ui.Button>
		<ui.DrawerContent direction="">
			<div class="mx-auto w-full max-w-sm">
				<ui.DrawerHeader>
					<ui.DrawerTitle>Move Goal</ui.DrawerTitle>
					<ui.DrawerDescription>Set your daily activity goal.</ui.DrawerDescription>
				</ui.DrawerHeader>
				<ui.DrawerClose>Close drawer</ui.DrawerClose>
				<div class="p-4 pb-0">
					<div class="flex items-center justify-center gap-2">
						<ui.Button variant="outline" size="icon" class="size-8 shrink-0 rounded-full" aria-label="Decrease goal">
							<icon.Minus/>
						</ui.Button>
						<div class="flex-1 text-center">
							<div class="text-7xl font-bold tracking-tighter">350</div>
							<div class="text-[0.70rem] text-muted-foreground uppercase">Calories/day</div>
						</div>
						<ui.Button variant="outline" size="icon" class="size-8 shrink-0 rounded-full" aria-label="Increase goal">
							<icon.Plus/>
						</ui.Button>
					</div>
					<div class="mt-3 flex h-[120px] items-end gap-1">
						<div class="h-[40%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[65%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[45%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[80%] flex-1 rounded-sm bg-foreground"></div>
						<div class="h-[55%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[70%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[35%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[60%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[50%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[75%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[42%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[58%] flex-1 rounded-sm bg-foreground/20"></div>
						<div class="h-[38%] flex-1 rounded-sm bg-foreground/20"></div>
					</div>
				</div>
				<ui.DrawerFooter>
					<ui.Button>Submit</ui.Button>
					<ui.Button variant="outline" data-gsxui-dialog-close>Cancel</ui.Button>
				</ui.DrawerFooter>
			</div>
		</ui.DrawerContent>
	</ui.Drawer>
}
```

--------------------------------

### Install Tabs Component

Source: https://ui.gsxhq.dev/components/tabs

Command to add the tabs component to your project.

```bash
gsxui add tabs
```

--------------------------------

### Implement basic Switch components

Source: https://ui.gsxhq.dev/components/switch

Demonstrates pairing unchecked and checked switches with labels using the ui.Switch component.

```go
// Package switchctl holds the site's example gsx components for ui.Switch
// ("switch" is a Go keyword, so this package keeps its legacy name).
package switchctl

import (
	"github.com/gsxhq/gsxui/ui"
)

// Basic pairs an unchecked and a checked Switch, each with a Label.
component Basic() {
	<div class="flex flex-col gap-3">
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-basic-airplane"/>
			<ui.Label for="switch-basic-airplane">Airplane mode</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-basic-wifi" checked/>
			<ui.Label for="switch-basic-wifi">Wi-Fi</ui.Label>
		</div>
	</div>
}
```

--------------------------------

### Serve vendored scripts with Go

Source: https://ui.gsxhq.dev/docs/npm-free

Example of serving the vendored JS directory statically using Go's http.ServeMux.

```go
mux := http.NewServeMux()
mux.Handle("/assets/gsxui/",
	http.StripPrefix("/assets/gsxui/", http.FileServer(http.Dir("web/gsxui"))))
```

--------------------------------

### Install Spinner component

Source: https://ui.gsxhq.dev/components/spinner

Command to add the spinner component to the project.

```bash
gsxui add spinner
```

--------------------------------

### Install Radio Component

Source: https://ui.gsxhq.dev/components/radio

Command to add the radio component to the project.

```bash
gsxui add radio
```

--------------------------------

### Basic Item Implementation

Source: https://ui.gsxhq.dev/components/item

Demonstrates various Item configurations including muted, extra-small, image media, and grouped items with separators.

```gsx
// Package item holds the site's example gsx components for ui/item.
package item

import (
	"github.com/gsxhq/gsxui/ui"
	"github.com/gsxhq/gsxui/ui/icon"
)

// Basic renders a standalone Item (media + content + actions row) followed
// by an ItemGroup of a couple items split by an ItemSeparator.
component Basic() {
	<div class="flex flex-col gap-6">
		<ui.Item variant="muted" size="sm">
			<ui.ItemHeader>Compact notification</ui.ItemHeader>
			<ui.ItemMedia>
				<icon.Bell/>
			</ui.ItemMedia>
			<ui.ItemContent>
				<ui.ItemTitle>Muted item</ui.ItemTitle>
			</ui.ItemContent>
			<ui.ItemFooter>Just now</ui.ItemFooter>
		</ui.Item>
		<ui.Item size="xs">
			<ui.ItemMedia variant="default">
				<icon.User/>
			</ui.ItemMedia>
			<ui.ItemContent>
				<ui.ItemTitle>Extra-small item</ui.ItemTitle>
			</ui.ItemContent>
		</ui.Item>
		<ui.Item>
			<ui.ItemMedia variant="default">
				<icon.User/>
			</ui.ItemMedia>
			<ui.ItemContent>
				<ui.ItemTitle>Default media</ui.ItemTitle>
			</ui.ItemContent>
		</ui.Item>
		<ui.Item>
			<ui.ItemMedia variant="image"><img src="https://placehold.co/40x40" alt="Profile"/></ui.ItemMedia>
			<ui.ItemContent>
				<ui.ItemTitle>Image media</ui.ItemTitle>
			</ui.ItemContent>
		</ui.Item>
		<ui.Item variant="outline">
			<ui.ItemMedia variant="icon">
				<icon.Bell/>
			</ui.ItemMedia>
			<ui.ItemContent>
				<ui.ItemTitle>New comment on your post</ui.ItemTitle>
				<ui.ItemDescription>Sarah replied to "Launch week recap".</ui.ItemDescription>
			</ui.ItemContent>
			<ui.ItemActions>
				<ui.Button variant="outline" size="sm">View</ui.Button>
			</ui.ItemActions>
		</ui.Item>
		<ui.ItemGroup>
			<ui.Item>
				<ui.ItemMedia variant="icon">
					<icon.User/>
				</ui.ItemMedia>
				<ui.ItemContent>
					<ui.ItemTitle>Jamie Lee</ui.ItemTitle>
					<ui.ItemDescription>jamie@example.com</ui.ItemDescription>
				</ui.ItemContent>
				<ui.ItemActions>
					<ui.Button variant="ghost" size="sm">Remove</ui.Button>
				</ui.ItemActions>
			</ui.Item>
			<ui.ItemSeparator/>
			<ui.ItemSeparator orientation="vertical"/>
			<ui.Item>
				<ui.ItemMedia variant="icon">
					<icon.User/>
				</ui.ItemMedia>
				<ui.ItemContent>
					<ui.ItemTitle>Alex Chen</ui.ItemTitle>
					<ui.ItemDescription>alex@example.com</ui.ItemDescription>
				</ui.ItemContent>
				<ui.ItemActions>
					<ui.Button variant="ghost" size="sm">Remove</ui.Button>
				</ui.ItemActions>
			</ui.Item>
		</ui.ItemGroup>
	</div>
}
```
Tokens:
Raw