Aki UI

アキウイ

Tags

タグ

A multi select that keeps its chosen values as removable chips and filters the list as you type, built with cmdk↗↗, Radix Popover↗↗ and Tailwind CSS.

Installation

Install the following dependencies:1

npm install @radix-ui/react-popovernpm install cmdknpm install framer-motionnpm install lucide-react

Copy and paste the following code into a new component file:2

"use client"

import * as Popover from "@radix-ui/react-popover"

import { Command } from "cmdk"

import { motion } from "framer-motion"

import { ChevronsUpDownIcon, SearchIcon, XIcon } from "lucide-react"

import {

type ComponentProps,

type HTMLAttributes,

type MouseEventHandler,

How to use it3

"use client"

import { useState } from "react"

import { Tags, TagsTrigger, TagsValue, TagsContent, TagsInput, TagsList, TagsEmpty, TagsGroup, TagsItem } from "@/components/ui/tags"

const options = [

{ id: "bug", label: "Bug" },

{ id: "feature", label: "Feature" },

{ id: "docs", label: "Documentation" },

]

Props

Tags

Name	Default	Description
children	—	ReactNode TagsTrigger and TagsContent
open	—	boolean Controlled open state of the popover
onOpenChange	—	(open: boolean) => void Called when the popover opens or closes
className	—	string Additional classes on the wrapper

TagsTrigger

Name

Default

Description

children

—

ReactNode

TagsValue chips for the current selection

placeholder

"Select a tag..."

string

Hint shown after the chips

className

—

string

Additional classes on the trigger

TagsValue

Name

Default

Description

children

—

ReactNode

Label of the chip

onRemove

—

() => void

Adds a cross to the chip and is called when it is clicked

className

—

string

Additional classes on the chip

TagsContent

Name	Default	Description
children	—	ReactNode TagsInput and TagsList
dark	false	boolean Applies the dark class, needed because the popover renders in a portal
sideOffset	7	number Distance in pixels between trigger and popover
className	—	string Additional classes on the popover

TagsInput

Name

Default

Description

value

—

string

Controlled search query

onValueChange

—

(value: string) => void

Called as the query changes

placeholder

—

string

Placeholder of the search field

TagsList

Name

Default

Description

children

—

ReactNode

TagsEmpty and TagsGroup

className

—

string

Additional classes on the scroll area

TagsEmpty

Name

Default

Description

children

"No tags found."

ReactNode

Shown when the query matches nothing

TagsGroup

Name

Default

Description

heading

—

ReactNode

Optional group title above the items

children

—

ReactNode

TagsItem elements

TagsItem

Name

Default

Description

value

—

string

Text the search filters on

onSelect

—

(value: string) => void

Called when the item is picked

children

—

ReactNode

Content of the row