Components

The hiip component registry

The parts of hiip.ai's interface that upstream shadcn/ui does not have — chat bubbles, a column-pinning data table, the platform marks, and the token set they are all styled against. Installed as source into your repo by the shadcn CLI, exactly like any other registry.

@hiip is private: every install needs a token. Set it up in four steps, or ask phuong.phung@hiip.asia for one.

12 components

Hiip Theme

Themetokens

The token set: an 11-step brand ramp plus the semantic tokens mapped onto it. Install this first — every other item is styled against it.

backgroundcardprimarysecondarymuteddestructive

Bubble

Chat1 file

A chat bubble and what a message can carry: text, a link preview, a file, a sticker, a timestamp and reactions.

Shipping address confirmed?

Yes — sending it over now.09:42

👍

sample-document-with-a-long-filename.pdfPDF · 1004.3 KB

6 days ago

https://example.com/media/0000000000000000000

example.comWatch the campaign cutA 30-second edit for the brand channel, ready to re-upload.

🎉a month ago

Message

Chat1 file

The row around a bubble: avatar gutter, author line, status slot. Mirrors for outgoing messages.

MK

Mai Khanh18 days ago

Can I still join the campaign?

Mình cf nha18 days ago

❤️

KN

Khoa Nguyễn18 days ago

You can — briefing is open until Friday.

Seen

Message Scroller

Chat1 file

A bottom-anchored message list with a jump-to-latest button.

Message 1

Message 2

Message 3

Message 4

Message 5

Message 6

Message 7

Message 8

Message 9

Message 10

Message 11

Message 12

Message 13

Message 14

Tabs

Controls1 file

Pill or underline tabs. A panel is not mounted until its tab is opened.

Cards, grouped by column

0 orders — Order created

Copy Button

Controls1 file

Copy to clipboard: tick for a beat, toast, and a message when it fails.

Pager

Controls1 file

Previous/next pagination. The caller owns the counting.

Page 1

Showing 12 creators on page 1

Filter Chip

Controls1 file

A filter chip with a live count and an optional status dot.

Error Strip

Feedback1 file

A one-line inline error band that announces itself.

Row 14: phone number is not a valid VN mobile — skipped.

Markdown Preview

Data2 files

Markdown to syntax-highlighted HTML. Raw HTML in the source is escaped.

Rendering…

Data Table

Data1 file

A TanStack table shell: column pinning, drag-to-reorder, a selection rail and skeleton rows.


Mai Khanh	tiktok	Negotiating
Duy Anh	whatsapp	Replied
Nurul	viber	Closed

3 creators

Page 1 of 1

Detail Panel

Data1 file

A record's fields grouped into titled sections, one field per row.

Contact

sample_creator

84000000000

Sample Brand - Skincare

Segment A - Group B - Category one / category two / category three

Ownership

Sample Owner 84000000001

Online

PICSample Assignee

+1