Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.

Separator

Visually or semantically separates content.

Qwik UI

An open-source UI component library.

Customizable
Accessible
Optimized for you

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add separator
import { PropsOf, component$ } from '@builder.io/qwik';
import { Separator as QwikUISeparator } from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';
 
export const Separator = component$<PropsOf<typeof QwikUISeparator>>(
  ({ orientation = 'horizontal', decorative = true, ...props }) => {
    return (
      <>
        <QwikUISeparator
          {...props}
          decorative={decorative}
          orientation={orientation}
          class={cn(
            'bg-border shrink-0',
            orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
            props.class,
          )}
        />
      </>
    );
  },
);

Usage

import { Separator } from '@qwik-ui/styled';
<Separator />