UI Components

NextJSTypeScriptTailwind

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.

View on GitHub
Try Nomikai Try Nomikai