1. Components
  2. /
  3. Widget

Widget

An animated React widget component built with high-performance Motion physics, responsive layouts, and modern design tokens.

Installation

npx viora-ui@latest add progressive-input-stack

File Structure

progressive-input-stack.tsx
utils.ts

Usage

import { Widget } from "@/components/viora-ui/progressive-input-stack";

export default function Example() {
  return (
    <Widget />
  );
}

API Reference

Widget

PropTypeDefaultDescription
className?string-Additional CSS classes for custom styling.
children?React.ReactNode-Content or child components rendered inside.
disabled?booleanfalseDisables user interaction and animations.

Notes

  • Engineered with spring physics via Motion for high-fidelity 60fps micro-interactions.
  • Zero runtime layout shift with hardware-accelerated CSS transforms and composited layers.
  • Supports modern accessibility patterns including focus-visible rings and reduced-motion preferences.
  • Compatible with both dark and light modes using standard Tailwind CSS theme variables.

Credits

Crafted with Tailwind CSS and Motion for Viora UI.

Keep in mind

Most components in Viora UI are inspired by or recreated from innovative modern interfaces across the web. We build to experiment and push design craft forward.