Divider

A Divider is an element used to separate content or sections in a user interface.

Basic Usage

You can use the WDivider component as shown below:

Nuxt.js is a popular open-source framework for building web applications with Vue.js. It simplifies the process of creating server-rendered Vue applications and provides various features to enhance development.

Next.js is a popular open-source React framework for building web applications.

<template>
    <div class="grid place-items-center w-full">
       <div class="space-y-2">
        <p class="dark:text-white">Nuxt.js is a popular open-source framework for building web applications with Vue.js. It simplifies the process of creating server-rendered Vue applications and provides various features to enhance development.</p>
        <WDivider/>
        <p class="dark:text-white">Next.js is a popular open-source React framework for building web applications.</p>
       </div>
    </div>
</template>

<template>
    <div class="grid place-items-center w-full">
       <div class="space-y-2">
        <p class="dark:text-white">Nuxt.js is a popular open-source framework for building web applications with Vue.js. It simplifies the process of creating server-rendered Vue applications and provides various features to enhance development.</p>
        <WDivider/>
        <p class="dark:text-white">Next.js is a popular open-source React framework for building web applications.</p>
       </div>
    </div>
</template>

Vertical

You can use the vertical prop to make the WDivider component align vertically as shown below:

Nuxt.js

Next.js

Vue.js

React.js

<template>
    <div class="grid place-items-center w-full">
        <div class="space-x-2 flex items-center">
            <span class="dark:text-white">Nuxt.js</span>
            <WDivider vertical />
            <span class="dark:text-white">Next.js</span>
            <WDivider vertical />
            <span class="dark:text-white">Vue.js</span>
            <WDivider vertical />
            <span class="dark:text-white">React.js</span>
        </div>
    </div>
</template>

<template>
    <div class="grid place-items-center w-full">
        <div class="space-x-2 flex items-center">
            <span class="dark:text-white">Nuxt.js</span>
            <WDivider vertical />
            <span class="dark:text-white">Next.js</span>
            <WDivider vertical />
            <span class="dark:text-white">Vue.js</span>
            <WDivider vertical />
            <span class="dark:text-white">React.js</span>
        </div>
    </div>
</template>

Preset

WDivider: {
    base: {
      root: 'w-full h-px',
      dividerVertical: 'relative !w-px !h-4 !inline-block',
    },
    variants: {
      default: {
        root: 'bg-gray-400 dark:bg-zinc-600',
      },
    },
},

WDivider: {
    base: {
      root: 'w-full h-px',
      dividerVertical: 'relative !w-px !h-4 !inline-block',
    },
    variants: {
      default: {
        root: 'bg-gray-400 dark:bg-zinc-600',
      },
    },
},

Divider ​

Basic Usage ​

Vertical ​

Preset ​

Divider

Basic Usage

Vertical

Preset