Getting Started

Install the package for your selected framework, then compose the component parts you need.

Create a toggle

<script setup lang="ts">
import { Toggle } from '@destyler-ui/vue'
</script>

<template>
  <Toggle.Root class="notification-toggle">
    <Toggle.Indicator aria-hidden="true">✓</Toggle.Indicator>
    Notifications
  </Toggle.Root>
</template>

import { Toggle } from '@destyler-ui/react'

export function NotificationToggle() {
  return (
    <Toggle.Root className="notification-toggle">
      <Toggle.Indicator aria-hidden="true">✓</Toggle.Indicator>
      Notifications
    </Toggle.Root>
  )
}

import { Toggle } from '@destyler-ui/solid'

export function NotificationToggle() {
  return (
    <Toggle.Root class="notification-toggle">
      <Toggle.Indicator aria-hidden="true">✓</Toggle.Indicator>
      Notifications
    </Toggle.Root>
  )
}

<script lang="ts">
  import { Toggle } from '@destyler-ui/svelte'
</script>

<Toggle.Root class="notification-toggle">
  <Toggle.Indicator aria-hidden="true">✓</Toggle.Indicator>
  Notifications
</Toggle.Root>

Toggle.Root supplies the button behavior, keyboard handling, and accessibility attributes. Toggle.Indicator is rendered only while the toggle is pressed.

Add your styles

Destyler components forward normal HTML attributes, including class and style. State is exposed through attributes such as data-state, so it can be styled without duplicating component state.

.notification-toggle {
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.notification-toggle[data-state='on'] {
  background: CanvasText;
  color: Canvas;
}

Choose an import path

Import Vue components from @destyler-ui/vue. The package build remains tree-shakable, so unused exports can be removed by your bundler.

Import React components from @destyler-ui/react. The package build remains tree-shakable, so unused exports can be removed by your bundler.

Import Solid components from @destyler-ui/solid. The package build remains tree-shakable, so unused exports can be removed by your bundler.

Use the package root for several component families, or a direct entry for one family.

<script lang="ts">
  import { Toggle } from '@destyler-ui/svelte/toggle'
</script>

The root and direct entries expose the same Svelte components and TypeScript types.