Components
Loading preview...
Here is tag input component
npx shadcn@latest add https://21st.dev/r/ln-dev7/tag-input// demo.tsx
import * as React from "react";
import TagInput, { type Tag } from "@/components/ui/tag-input";
const TagInputDemo = () => {
const TAGS: Tag[] = [
{ id: "docker", label: "Docker" },
{ id: "kubernetes", label: "Kubernetes" },
{ id: "aws", label: "AWS" },
{ id: "graphql", label: "GraphQL" },
{ id: "mongodb", label: "MongoDB" },
{ id: "postgresql", label: "PostgreSQL" },
{ id: "redis", label: "Redis" },
{ id: "git", label: "Git" },
{ id: "webpack", label: "Webpack" },
{ id: "vite", label: "Vite" },
{ id: "cypress", label: "Cypress" },
{ id: "storybook", label: "Storybook" },
{ id: "tailwind", label: "Tailwind" },
{ id: "prisma", label: "Prisma" },
{ id: "nginx", label: "Nginx" },
];
const [selectedTags, setSelectedTags] = React.useState<Tag[]>([]);
return (
<div className="relative w-full min-h-[450px] flex items-start md:items-center justify-center px-4 py-10">
<TagInput
options={TAGS}
value={selectedTags}
onChange={setSelectedTags}
className="p-6 max-w-lg w-full flex flex-col"
/>
</div>
);
};
export { TagInputDemo as DemoOne };