Command Palette

Search for a command to run...

Introduction

Wigggle UI is a free and open source UI collection of beautifully designed Widgets. 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 widgets right away!

$ pnpm dlx shadcn@latest add @wigggle-ui/widget

Crafted by
Henil Shah
Build
6a38dcc
Widgets
93
Deployed on
Vercel
Source code
GitHub
License
MIT
Typeface
Outfit
Analytics
Stack
  • react@19.3.0
  • next@16.4.3
  • shadcn@4.21.4
  • radix-ui@1.7.0
  • @base-ui/react@1.8.0
  • lucide-react@1.52.0
  • motion@14.0.0
  • @next/mdx@16.4.3
  • tailwindcss@4.3.3
  • typescript@7.0.2
  • ultracite@7.12.4

Widget

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.

Loading widget...
Loading widget...
Loading widget...

Installation

Being a trusted shadcn registry, you can directly install any widget of your choice.

You can start with the basic Clock Widget using this command.
$ pnpm dlx shadcn@latest add @wigggle-ui/clock-sm-01

Usage

Loading...

Base Widget

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...

API Reference

PropTypeDefault
size
sm | md | lgsm
variant
default | secondarydefault
design
default | mumbaidefault
className
string—

Sub Components

The following components are structural wrappers and accept standard HTML attributes and className.

  1. WidgetHeader : Top section, flex container.

  2. WidgetTitle : The widget heading.

  3. WidgetContent : Center section, grows to fill available space (flex-1), centers children.

  4. WidgetFooter : Bottom section, flex container.