Docs
Introduction

Introduction

A highly customizable, accessible, and fully-featured tag input component built with shadcn/ui.

SportsProgrammingTravel

Run the CLI

Run the shadcn-ui init command and setup your project with Shadcn:


npx shadcn-ui@latest init

Installation

To install Emblor, run the command:


# NPM
npm install emblor
# Or, use any package manager of your choice.

Usage

To use Emblor in your project, import the components you need and start using them in your application.


import { TagInput } from 'emblor';
 
const [tags, setTags] = React.useState<Tag[]>([]);
const [activeTagIndex, setActiveTagIndex] = React.useState<number | null>(null);
 
<TagInput
  {...field}
  placeholder="Enter a topic"
  tags={tags}
  setTags={(newTags) => {
    setTags(newTags);
    setValue('topics', newTags as [Tag, ...Tag[]]);
  }}
  activeTagIndex={activeTagIndex}
  setActiveTagIndex={setActiveTagIndex}
/>;

Thats it!

You have successfully integrated Emblor into your project. 🎉