Command Palette

Search for a command to run...

Loading component...

Components Pro AI Input 003

AI Input 003

Chat interface component with smart @mention functionality for integrations. Type @yt, @google, or @notion to create interactive mention cards with icons and smooth animations. and the sound effect when the message is sent.

Dependencies

Interaction Type

Type @yt @google @notion
Send messages with mentions
Watch mention cards animate and layout effects
Press Enter to send
Hear the sound effect

Install via Pro CLI [Requires a Pro license key]

pnpm dlx shadcn add @skiper-ui/skiper83

How to use

const CustomExample = () => {
  return (
    <div className="flex h-screen w-full items-center justify-center">
      <Skiper83 />
    </div>
  );
};
Props
Description

No props required

This component is self-contained and doesn't accept any props

Attribution

Inspired from aconiti.com/lab016 by Gustav Ekerot

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
AI Input 003 | Skiper UI | Skiper UI