Switch : HextaUI et shadcn/ui

Le Switch de HextaUI garde les noms et les tokens de thème de shadcn/ui et s’installe avec la même CLI. Cette page liste ce qui diffère, lu dans le code des deux. Le côté shadcn/ui correspond à son registre base-vega au 2026-10-16.

En un coup d’œil

Mesure	HextaUI	shadcn/ui
Parties exportées	1	1
Props gérées par l’enveloppe	14	1
Lignes de code	350	31
Dépendances npm	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cn`
Construit avec	`motionspinnertheme`	–

Plus de code n’est pas mieux en soi. La plupart des lignes en plus dans HextaUI gèrent des états, des animations et des cas limites que vous écririez sinon vous-même.

Props ajoutées par HextaUI

Les props gérées par l’enveloppe HextaUI elle-même et pas par celle de shadcn/ui. Les props transmises telles quelles à Base UI ou à la bibliothèque sous-jacente sont exclues, car les deux versions les acceptent.

Prop	Rôle
`icons`Switch	Affiche des marques on et off dans la piste.

Variantes

Prop	Dans les deux	Seulement HextaUI	Seulement shadcn/ui
`variant`Switch	–	`defaultios`	–

La version HextaUI

Wi-FiJoin known networks automatically.BluetoothConnect to headphones and keyboards.Nearby sharingLet people around you send files.

import { Switch } from "@/components/ui/switch"

const settings = [
  {
    id: "wifi",
    title: "Wi-Fi",
    description: "Join known networks automatically.",
    on: true,
  },
  {
    id: "bluetooth",
    title: "Bluetooth",
    description: "Connect to headphones and keyboards.",
    on: false,
  },
  {
    id: "airdrop",
    title: "Nearby sharing",
    description: "Let people around you send files.",
    on: true,
  },
]

export function SwitchDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col divide-y rounded-xl border">
      {settings.map((setting) => (
        <label
          key={setting.id}
          className="flex items-center justify-between gap-4 p-4 text-sm"
        >
          <span className="flex flex-col gap-0.5">
            <span className="font-medium">{setting.title}</span>
            <span className="text-muted-foreground">{setting.description}</span>
          </span>
          <Switch defaultChecked={setting.on} />
        </label>
      ))}
    </div>
  )
}

Tous les états, les raccourcis clavier et la référence de l’API sont sur la page du composant.

8 de ses exemples ont aussi leur propre page.

Changer un composant

Lancez la commande add avec --overwrite pour remplacer le fichier shadcn/ui dans @/components/ui, puis relisez le diff dans git avant de le garder. Les imports restent les mêmes et les composants que vous ne remplacez pas continuent de fonctionner.

pnpm dlx shadcn@latest add https://hextaui.com/r/switch.json --overwrite

Chaque prop du tableau ci-dessus est un ajout, donc le code écrit pour shadcn/ui ne la passe pas encore.
Avant de changer, vérifiez chaque partie ou variante listée seulement pour shadcn/ui et associez-la à l’équivalent HextaUI le plus proche.