PhlexUIPre Release

Docs Components Themes Lookbook

Docs Components Themes Github Discord Twitter

Getting Started

Introduction Installation Dark mode Theming Customizing components

Installation

Rails - JS Bundler Rails - Importmaps

Components30

Accordion Alert Alert Dialog Aspect Ratio Avatar Badge Button Card Calendar Checkbox Codeblock Collapsible Command Context Menu Date Picker Dialog / Modal Dropdown Menu Input Hover Card Link PaginationNew Popover SelectNew Sheet Shortcut Key Table Tabs Theme Toggle Tooltip Typography

Coming Soon26

Autosave Carousel Chart Clipboard Color Picker Combobox Data Table Form Menu Bar Multi Select Navigation Menu Progress Radio Group Read more Rich text editor Scroll Area Select Separator Skeleton Loader Slider Switch Textarea (Autogrow)Toast (Swipe to dismiss)Toggle Turbo Dialog / Modal Video Player

Shortcut Key

A component for displaying keyboard shortcuts.

Usage

Example

⌘K

Note this does not trigger anything, it is purely a visual prompt

div(class: "flex flex-col items-center gap-y-4") do
	ShortcutKey do
		span(class: "text-xs") { "⌘" }
		plain "K"
	end
	p(class: "text-muted-foreground text-sm text-center") { "Note this does not trigger anything, it is purely a visual prompt" }
end

Components

Component	Built using	Source
`ShortcutKey`	Phlex	See source