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.

For uncontrolled seeds versus controlled live props (v-model, open / onOpenChange, and friends), see Controllable State.

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.