Toggle Button
46 resources ship this component · Actions
Also called: pressed button, toggle, press-and-hold button, sticky button, toggle (action).
Before you ship
- 01Context — Explaining what the toggle will do
- 02Transition — A clear visual change of the toggle switching between different states
- 03State — How the button changes based on the interaction, examples below
Checks from checklist.design, MIT.
Ships it
- Ark UI · 49 headless components with one API across React, Vue, Solid and SvelteComponent LibrariesS
- Astryx · Meta's open-source React + StyleX design system, 150+ components and 42 templatesComponent LibrariesS
- Kumo · Cloudflare's production React library: 44 components on Base UI + Tailwind v4, MITComponent LibrariesS
- The Component Gallery · 60 UI components cross-referenced against 95 real design systemsDesign Systems & Brand GuidelinesS
- Coss UI · Cal.com's design system: 60 Base UI primitives shipped as a shadcn registryComponent LibrariesS
- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themesComponent LibrariesS
- HeroUI (formerly NextUI) · 71 React components on React Aria + Tailwind v4, with an MCP serverComponent LibrariesS
- HeroUI Pro · Paid React + React Native components, 6 templates, MCP server and agent skillsComponent LibrariesS
- Intent UI · 80+ React Aria components with real ARIA semantics, MIT and copy-pasteComponent LibrariesS
- MUI · React component suite: Material UI, MUI X data grid, charts and date pickersComponent LibrariesS
- Neobrutalism (ex RetroUI) · Neo-brutalist shadcn registry: 60 free components, 158 Pro blocks, 6 templatesComponent LibrariesS
- Radix UI · Unstyled accessible React primitives, plus Themes, Colors and IconsComponent LibrariesS
- React Aria · Adobe's unstyled React primitives with ARIA, keyboard, i18n and touch behavior built inComponent LibrariesS
- shadcn/ui · 64 copy-in React components on Radix + Tailwind, installed by CLIComponent LibrariesS
- shadcn/ui (GitHub) · Source monorepo for shadcn/ui: components, CLI, registry schema, skillsComponent LibrariesS
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP serverComponent LibrariesS
- 8bitcn/ui · Retro pixel-art restyle of shadcn/ui: 57 components and 44 blocksComponent LibrariesA
- Appica UI · 70 React components on Base UI and Tailwind v4, with an llms.txt and markdown docsComponent LibrariesA
- audiocn · Audio components for React and shadcn/ui: meters, faders, knobs, waveforms, players, and a full mixerComponent LibrariesA
- Base UI · 37 unstyled React components from the Radix, Floating UI and MUI teamsComponent LibrariesA
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registryComponent LibrariesA
- beUI · 106-item Motion + Tailwind registry for React, shadcn-compatibleMotion & InteractionA
- Chánh Đại Components · 96-item shadcn registry of pixel-perfect portfolio and marketing componentsComponent LibrariesA
- coss ui · Cal.com's Base UI + Tailwind v4 registry: 56 primitives and 500 particle variantsComponent LibrariesA
- ElevenLabs UI · First-party shadcn registry for voice agents: orbs, waveforms, transcriptsAI Interface KitsA
- Extend UI · shadcn registry of PDF, DOCX, XLSX and CSV viewers with bounding-box citationsComponent LibrariesA
- HextaUI · 103 shadcn registry items: primitives plus AI, auth, billing, settings and team blocksComponent LibrariesA
- Inclusive Components · Heydon Pickering's 11 deep essays on building components that stay accessibleDesign Systems & Brand GuidelinesA
- Kinetics · 153 spring-physics micro-interactions with copy-paste CSS and ReactMotion & InteractionA
- LiveKit Agents UI · shadcn registry of voice-agent UI: visualizers, control bar, transcriptAI Interface KitsA
- Magic UI · 150+ animated shadcn-compatible React components for landing pagesMotion & InteractionA
- Opensource UI · 154 free MIT React and Next.js components across 26 categories, copy-pasted from pages that serve the full TypeScript source in the HTMLComponent LibrariesA
- Osmo · Paid vault of 231 GSAP/Webflow interaction recipes plus a 100-button packMotion & InteractionA
- Shadcn Space · 401+ shadcn blocks, 393+ component variants and 10 site templates, freemiumBlocks, Templates & ThemesA
- shadcn-templ · shadcn/ui ported to Go and templ: 52 components, 27 blocks, its own CLIComponent LibrariesA
- Shark UI · 86 shadcn-style components built on Ark UI, installed through the shadcn CLIComponent LibrariesA
- termcn · Terminal UI components for React, installed with the shadcn CLI, on Ink and OpenTUIComponent LibrariesA
- Animate UI · 73 motion-first React components shipped as a shadcn registryMotion & InteractionB
- Hover.dev · Animated React and Tailwind components, sections and three landing-page templatesMotion & InteractionB
- MicroInteractions UI · 20 animated React components across buttons, inputs, navigation, tabs, toggles and steppersMotion & InteractionB
- shadcn-glass-ui · Glassmorphism component set for React that installs through the shadcn CLIComponent LibrariesB
- Soft Club UI · 118 Radix-based React components in a late-90s dark-glass aestheticComponent LibrariesB
- Tailark · shadcn registry of marketing-site blocks, illustrations and brand logo SVGsBlocks, Templates & ThemesB
- Tark UI · One-page showcase of 41 Ark UI components with 333 Tailwind-styled examplesComponent LibrariesB
- The Gridcn · Tron-styled shadcn registry: 140 items, six themes, HUD and 3D grid componentsComponent LibrariesB
- Interaction Kit · 12 copy-ready React micro-interaction demos by Armond SchneiderMotion & InteractionC