Astra

Code Slots

One-time code input whose digits spring into their slots, with paste and SMS autofill.

Code Slots, a Astra component

Use Code Slots in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/CodeSlots-TS-TW
How to install Astra components

Related components

  • Jelly Radio

    Radio group of chips where the chosen one swells and barges its neighbours outward.

  • Spring Check

    Checkbox row where one spring fills the box, draws the tick and strikes through the label.

  • Squish Switch

    Switch whose thumb stretches with speed and squashes against the end when you flick it.