KorinAI - UI Components Showcase

Live previews of KorinAI - UI components.

npx shadcn@latest add https://ui.korinai.com/all.json
AvatarKorin
KK
Install
npx shadcn@latest add https://ui.korinai.com/avatar-korin.json
ChatBubble
Korin AI
Sample image

Hello! This is a demo ChatBubble with markdown support.

Bold, italic, and inline code.

Install
npx shadcn@latest add https://ui.korinai.com/chat-bubble.json
MemoizedMarkdown

Heading

Some text with a list:

  • One
  • Two
Install
npx shadcn@latest add https://ui.korinai.com/memoized-markdown.json
TypingLoader
Thinking
Install
npx shadcn@latest add https://ui.korinai.com/typing-loader.json
ChatLimited
You almost reached your credit limit. Please contact your Administrator
You have reached your credit limit. Please contact your Administrator
Install
npx shadcn@latest add https://ui.korinai.com/chat-limited.json
FilePreviewDialog
Install
npx shadcn@latest add https://ui.korinai.com/file-preview-dialog.json
ChatBubble
Korin AI
Sample image

Hello! This is a demo ChatBubble with markdown support.

Bold, italic, and inline code.

ChatInput
u
@username
Install
npx shadcn@latest add https://ui.korinai.com/chat-input.json
UploadButton
Install
npx shadcn@latest add https://ui.korinai.com/upload-button.json
FileSelector

Requires gallery access; demo renders selector UI only.

Loading images...

Install
npx shadcn@latest add https://ui.korinai.com/file-selector.json
FloatingChat

Click the chat button at the bottom-right corner.

Install
npx shadcn@latest add https://ui.korinai.com/floating-chat.json
PageChat

u
@username

KorinAI Logo

Preparing your chat experience… Please ensure your API URL and API key are configured.

Install
npx shadcn@latest add https://ui.korinai.com/page-chat.json
Response (Markdown)

Title

Some math: a2+b2=c2a^2 + b^2 = c^2.

A link to https://korinai.com

Install
npx shadcn@latest add https://ui.korinai.com/response.json
Reasoning

Thinking steps...

  1. Fetch data
  2. Analyze
  3. Summarize
Install
npx shadcn@latest add https://ui.korinai.com/reasoning.json
ScrollArea (extended)

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Install
npx shadcn@latest add https://ui.korinai.com/scroll-area-extended.json
ToolResults
Korin AI

Korin AI

AI platform website

Tailwind CSS

Utility-first CSS framework

How to integrate the ChatBubble in a page.
Styling guidance for shadcn with Tailwind v4.
Generated 1

Generated 1

Generated 2

Generated 2

Install
npx shadcn@latest add https://ui.korinai.com/tool-results.json
UserConfirmation

Target: /repo/path

Install
npx shadcn@latest add https://ui.korinai.com/user-confirmation.json
CodeBlock
function add(a:number,b:number){
  return a+b;
}
Install
npx shadcn@latest add https://ui.korinai.com/code-block.json
CodeBlock with Copy
bash
pnpm install
pnpm dev
Install
npx shadcn@latest add https://ui.korinai.com/code-block-with-copy.json