ViraStack
  • About
  • Support
HomeGet StartedExamples
ViraStack

A DX-first toolkit for frontend developers: starters, agent rules, form hooks, and a guide.

Products

  • ViraStack Start
  • ViraStack AI
  • ViraStack Mask
  • ViraStack Password
  • ViraStack Guide

Explore

  • About
  • Brand
  • Support

© 2026 ViraStack.

Open source · MIT

Examples

  • All
  • Basic
  • Custom icons
  • Custom text
  • Disabled / readOnly
  • Programmatic
  • Prop merge

Custom icons

Use your own SVG or components via icons.show / icons.hide.

← All examples·custom-icons

Preview

import { Home, Star } from "lucide-react"
import { useViraPassword } from "@virastack/password"
 
function Example() {
  const { inputProps, btnProps } = useViraPassword({
    icons: {
      show: <Star />,
      hide: <Home />,
    },
  })
 
  return (
    <div className="relative">
      <input {...inputProps} placeholder="Your password" />
      <button {...btnProps} />
    </div>
  )
}

Details

  • show: when password is hidden (show button).
  • hide: when password is visible (hide button).
  • icons accepts ReactNode: icon, text, or any JSX.

For the hook API see useViraPassword(), for styling and icons see customization.

PreviousBasicNextCustom text

On this page

  • Preview
  • Details
Something wrong? Fix it