https://github.com/vpgits/shadcn-tag-input
A customizable and accessible tag input component built for shadcn/ui. This component allows users to select multiple tags from an intuitive searchable dropdown, with keyboard navigation support and a clean, modern design.
https://github.com/vpgits/shadcn-tag-input
nextjs shadcn-ui tag-input tags
Last synced: about 2 months ago
JSON representation
A customizable and accessible tag input component built for shadcn/ui. This component allows users to select multiple tags from an intuitive searchable dropdown, with keyboard navigation support and a clean, modern design.
- Host: GitHub
- URL: https://github.com/vpgits/shadcn-tag-input
- Owner: vpgits
- License: mit
- Created: 2025-01-11T04:41:55.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-11T04:55:08.000Z (over 1 year ago)
- Last Synced: 2025-03-01T16:14:10.669Z (over 1 year ago)
- Topics: nextjs, shadcn-ui, tag-input, tags
- Language: TypeScript
- Homepage: https://shadcn-tag-input-kappa.vercel.app
- Size: 96.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shadcn Tag Input Component
A customizable and accessible tag input component built for shadcn/ui. This component allows users to select multiple tags from an intuitive searchable dropdown, with keyboard navigation support and a clean, modern design.
## Credits
This component was developed with inspiration from the following projects:
- [Sonner by Emil Kowalski](https://github.com/emilkowalski/sonner)
- [Victor Welander's Projects](https://github.com/victorwelander)
As always, thanks to [shadcn-ui](https://github.com/shadcn-ui) and [shadcn](https://github.com/shadcn).
## Features
- 🔍 Searchable tag selection
- ⌨️ Full keyboard navigation support
- 🎨 Follows your shadcn theme
- 🧩 Fully customizable
- ♿ Accessible
- 📱 Mobile friendly
- 🏷️ Pill-style tags with remove option
- 🔄 Backspace support for tag removal
- 🎨 Custom theming for displaying tags
- ❌❌ Press the cross twice to clear all
## Installation
```bash
npx shadcn-ui@latest add https://shadcn-tag-input/registry/tag-input.json
```
This will install the component and all required dependencies.
## Prerequisites
This component requires:
- A Next.js project with shadcn/ui configured
- The following shadcn components installed:
- Command
- Badge
Works with Next-Js 15 with `--legacy-peer-deps` flag.
## Usage
```tsx
import { TagInput } from "@/components/ui/tag-input";
import { useState } from "react";
type Tag = {
label: string;
value: string;
};
export default function Demo() {
const [tags, setTags] = useState([]);
const allTags = [
{ label: "React", value: "react" },
{ label: "Next.js", value: "nextjs" },
{ label: "TypeScript", value: "typescript" },
{ label: "shadcn/ui", value: "shadcn" },
];
return (
);
}
```
## Props
| Prop | Type | Description | Default |
| -------------- | ---------------------------------------------- | ------------------------------------ | --------- |
| `tags` | `Tag[]` | Currently selected tags | Required |
| `setTags` | `(tags: Tag[]) => void` | Function to update tags | Required |
| `allTags` | `Tag[]` | Array of all available tags | Required |
| `AllTagsLabel` | `({ value }: { value: T }) => React.ReactNode` | Custom render function for tag items | Optional |
| `placeholder` | `string` | Input placeholder text | "Add tag" |
| `className` | `string` | Additional CSS classes | Optional |
## Advanced Usage
### Custom Tag Rendering
You can customize how tags appear in the dropdown using the `AllTagsLabel` prop:
```tsx
function Demo() {
return (
(
{value}
)}
/>
);
}
```
### Controlled Input
The component is fully controlled, allowing you to manage the tag state in your application:
```tsx
function Demo() {
const [tags, setTags] = useState([]);
const handleTagsChange = (newTags: Tag[]) => {
// Add any validation or transformation logic here
setTags(newTags);
};
return ;
}
```
## Theming
The component uses your existing shadcn theme and can be customized using Tailwind classes:
```tsx
```
## Development
To modify the component:
1. Clone the repository
2. Install dependencies: `npm install`
3. Make your changes
4. Build the registry: `npm run build-registry`
5. Test your changes locally
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT License - feel free to use this component in your projects. Or just copy and paste from here. Use this as you please.
---