Fancy Icon

An icon with a nice background color.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add fancy-icon

Usage

Basic

Colors

For the colors to show, you have to change the type from modern.

Types

Sizes

Circle prop

Editable

Displays an input field used for editing a single line of text, rendering as static text on load. It transforms into a text input field when the edit interaction is triggered.

Form

Building forms with VeeValidate and Zod.