AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Separator
Visually or semantically separates content.
Radix Primitives
An open-source UI component library.
Blog
Docs
Source
templ
templ SeparatorDemo() {
<div>
<div class="space-y-1">
<h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
<p class="text-sm text-muted-foreground">An open-source UI component library.</p>
</div>
@ui.Separator(ui.SeparatorOrientationHorizontal, false, "my-4", nil)
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
@ui.Separator(ui.SeparatorOrientationVertical, false, "", nil)
<div>Docs</div>
@ui.Separator(ui.SeparatorOrientationVertical, false, "", nil)
<div>Source</div>
</div>
</div>
}