Combobox
コンボボックス
Delving into combobox UI/UX implementation with Next.js, Typescript, Tailwind CSS, and Framer Motion, leveraging Radix↗↗and cmdk↗↗for accessible components.
Profile
Arc
Installation
Install the following dependencies:1
npm install @radix-ui/react-popovernpm install cmdknpm install framer-motionCopy and paste the following code into a new component file:2
import { motion } from "framer-motion"
import Image from "next/image"
import { useEffect, useState } from "react"
import * as Popover from '@radix-ui/react-popover';
import { Command } from 'cmdk';
type DataItem = {
id: number,
name: string,
logo: string
}
How to use it3
"use client"
import Combobox from "@/components/combobox";
import { useState } from "react";
import arc from "@/public/assets/arc.svg"
import linear from "@/public/assets/linear.svg"
import raycast from "@/public/assets/raycast.svg"
import tailwindcss from "@/public/assets/tailwindcss.svg"
import bootsrap from "@/public/assets/bootstrap.svg"
import shadcn from "@/public/assets/shadcn.svg"
export default function Page() {
Props
Combobox
| Name | Default | Description |
|---|---|---|
| data | — | DataItem[] List of items selectable in the combobox |
| selectedValue | — | string value of selected element |
| onValueChange | — | (value: string) => void Function call after value change |
DataItem
| Name | Default | Description |
|---|---|---|
| id | — | number Id |
| name | — | string Value display in combobox |
| logo | — | string Image source |