UI libraries
Password attaches to any input / button component. The examples below use the same hook API.
useViraPassword() returns prop bags. Spread them onto input and button; the icon lives in btnProps.children.
The package only manages visibility logic and accessible props; markup and styling are yours. shadcn/Tailwind, Ant Design (its own CSS + style/className), or Chakra (style props). The same hook works with every UI kit.
Common pattern
const { inputProps, btnProps } = useViraPassword({
inputProps: { className: "pr-10" },
btnProps: { className: "absolute inset-y-0 right-2 my-auto" },
})
return (
<div className="relative">
<input {...inputProps} placeholder="Your password" />
<button {...btnProps} />
</div>
)shadcn/ui
Live demos on this site also use shadcn Input + Button:
Ant Design
antd accepts native props. Same pattern:
import { useViraPassword } from "@virastack/password"
import { Input, Button } from "antd"
function Example() {
const { inputProps, btnProps } = useViraPassword()
const { children, ...restBtn } = btnProps
return (
<div style={{ position: "relative" }}>
<Input {...inputProps} placeholder="Your password" />
<Button {...restBtn} type="text" style={{ position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)" }}>
{children}
</Button>
</div>
)
}Chakra UI
Works with Chakra Input / IconButton too:
import { useViraPassword } from "@virastack/password"
import { Input, IconButton, Box } from "@chakra-ui/react"
function Example() {
const { inputProps, btnProps } = useViraPassword()
const { children, ...restBtn } = btnProps
return (
<Box position="relative">
<Input {...inputProps} placeholder="Your password" pe="10" />
<IconButton
{...restBtn}
aria-label={restBtn["aria-label"] ?? "Toggle password visibility"}
position="absolute"
right="2"
top="50%"
transform="translateY(-50%)"
variant="ghost"
size="sm"
>
{children}
</IconButton>
</Box>
)
}