UI Components
NextJS•TypeScript•Tailwind
MultiSelectInput Component
The MultiSelectInput component is a customizable dropdown that allows users to select multiple options from a list. It supports creating new options on the fly and uses react-select for a smooth user experience.
Try selecting multiple fruits or creating a new fruit option!
InputField Component
The InputField component is a versatile input element with support for various states and styling options. It includes label, placeholder, and different visual states.
Try typing in the input fields to see it in action!
Toggle Component
The Toggle component is a customizable switch that allows users to toggle between two states. It supports different colors and can be easily integrated into forms or settings panels.
Toggle Component Demo
Toggle States:
{ "blue": false, "green": false, "red": false, "yellow": false, "purple": false, "gray": false }
Try toggling the switches to see the different colors and states!
Error Message Component
The Message component is a versatile notification system that can display various types of messages, including errors, warnings, success notifications, and informational messages.
Error Message Demo
Click the buttons to display different types of messages. Adjust the duration to control how long the message is displayed.
Dropdown Menu with Edit Component
The DropdownMenuWithEdit component is a versatile dropdown that supports item selection, editing, and custom styling. It can be used for various purposes such as selection menus, action menus, and more.
Dropdown Menu with Edit Demo
Basic Usage
Selected fruit: apple
Custom Styling
Selected color: red
Disabled State
Try selecting different options and clicking the edit buttons (where available) to see how the component behaves.