Skip to content
Get Pro
Forms

Goo Toggle

A switch whose knob travels like viscous molten metal.

$149 once · every Pro piece

Customize

The front of the knob springs across while the back holds on, a neck stretches between them and snaps, and the rest catches up and merges with a wobble. Off is a grey bead; on is a hot core cooling to the accent.

Install

npx shadcn@latest add @obsyde/goo-toggle

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { GooToggle } from '@/components/obsyde/ember/goo-toggle/GooToggle';

export function Example() {
  return (
    <GooToggle defaultChecked={false} />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/goo-toggle/GooToggle.tsxcomponent
  • ember/goo-toggle/goo-toggle.cssstyles
  • ember/goo-toggle/GooToggleDemo.tsxdemo
  • ember/tactile-kit/kit.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
checkedOnbooleanfalse
labelLabelstring'Molten'
sizeSize'md' | 'lg''md'
disabledDisabledbooleanfalse