Color Generator

Generate and export Tailwind color patterns.

Brand Colors

primary
secondary

State Colors

info
success
warning
error

Color Picker

Dropdown

Displays a customizable dropdown component with various features including search, multiple selection, and more.

The Dropdown component provides a highly customizable dropdown for React applications. It supports various features like search, multiple selection, and custom option rendering to suit different design needs.

Installation

You can install the Dropdown component using the PixelBlock CLI tool.

Using npm:

npm install -g pixelblock-cli

Using yarn:

yarn global add pixelblock-cli

Alternatively, you can use it directly with npx without installing it globally:

npx pixelblock-cli add Dropdown

Install Component

To install the Dropdown component using the PixelBlock CLI tool, run the following command in your project directory:

npx pixelblock-cli add Dropdown

This will copy the Dropdown.tsx file from the PixelBlock templates to your project's components/PixelBlock directory.

your-project/
├── components/
│   └── PixelBlock/
│       └── Dropdown.tsx
└── ...

Usage

After installing the Dropdown component, you can use it in your React application.

Basic Example

Here's a basic example of how to use the Dropdown component in a React application:

Loading...

Features

Loading...