Wigggle UI is a free and open source UI collection of beautifully designed Widgets. It's built with Next.js, Tailwind CSS and shadcn/ui.
Works with your favorite frameworks and AI models. Open Source. Open Code.
Wigggle UI is a trusted registry for shadcn/ui. You can start adding components right away!
pnpm dlx shadcn@latest add @wigggle-ui/clock-sm-01
A flexible container component used to build UI widgets. It supports multiple sizes, design variations, color variants, and includes a collection of sub-components to structure your layout. Widgets are built using class-variance-authority for consistent styling and composability.
We're working on adding more styles like Circle widgets to the collection. In the meantime, you can check out the existing widgets in the widget registry to get a feel for how they look. We'll have an official release soon.
pnpm dlx shadcn@latest add @wigggle-ui/widget
Loading...
Every widget is directly dependent on the widget.tsx file. This file contains the core logic for the widget, including the logic for rendering the widget and handling user interactions. This widget file exposes a few Variants and Components that you can use to customize the widget's appearance and behavior.
Loading...
| Prop | Type | Default | Description |
|---|---|---|---|
size | sm | md | lg | sm | |
variant | default | secondary | default | |
design | default | mumbai | default | |
className | string | — | |
...rest | React.HTMLAttributes<HTMLDivElement> | — |
The following components are structural wrappers and accept standard HTML attributes and className.
WidgetHeader : Top section, flex container.
WidgetTitle : The widget heading.
WidgetContent : Center section, grows to fill available space (flex-1), centers children.
WidgetFooter : Bottom section, flex container.