Edit Profile

Dark Mode

Copy config

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

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

Usage

import { Separator } from '~/components/ui';
<Separator />