Frost — UI Kit

✦ Frost

30+ Elements Template

Frost

Minimal chat

Active Sessions

prem

Tap to open secure chat

alex

okay sounds good 👍

sam

● typing…

nova

sent a file 📎

Prem

● heyyy

prem

Negotiating Keys…

END-TO-END ENCRYPTED

Today

Hey! Are you there? 👋

10:54 AM

❤️ 1

❤️

😂

👍

➕

heyy

10:56 AM

❤️

😂

👍

➕

heyoo

10:56 AM

❤️ 1

😂 2

End-to-end encrypted · Press Enter to send · Shift+Enter newline

Frost UI Kit

30+ production-ready components with buttery smooth animations · Pick & use in your app

1 · Avatars & Status

Online

Busy

Away

2 · Buttons

3 · Message Bubbles

prem

Hey! Are you there?

Sure thing! What's up? 😊

Looks great! Let's ship it 🚀

@prem check the latest build, it's @everyone 🔥

4 · Input Fields

Your username

5 · Toggles & Checkboxes

Notifications

Dark Mode

E2E Encryption

Remember me All DM only

6 · Typing & Recording Indicators

prem is typing…

● Recording…

7 · Chips & Tags

Encrypted Online Offline Away remove ✕

E2E

❤️ 12

😂 4

👍 7

🔥 2

➕

8 · Toast Notifications

Message delivered

prem received your message

Connection lost

Reconnecting…

9 · Modals & Dialogs

10 · Progress Bars

Uploading file… 72%

Encryption strength Strong

Voice note 1:24

11 · Context Menu

12 · Tooltips

13 · Skeleton Loaders

14 · Voice Note Player

0:24

0:08

Recording state

15 · File & Attachment Cards

design-system.figma

2.4 MB · Figma

demo-call.mp4

12.8 MB · Video

16 · Media Grid

+14

17 · Tab Bars

All

Unread

Groups

Chats

Media

Files

18 · Badges & Counters

✓

NEW 3

19 · Sliders

Volume · 65%

Font size · 14px

20 · Link Preview

Frost Chat — Secure Messaging

End-to-end encrypted real-time chat. Built for privacy.

frost.chat ↗

21 · Ratings & Feedback

★ ★ ★ ★ ★

22 · Keyboard Shortcuts

Send message

Enter

New line

Shift+Enter

⌘+F

Command palette

⌘+K

23 · Breadcrumb & Navigation

💬 Chats

📁 Files

⚙️ Settings

24 · Code Block

const frost = new FrostChat({
  encryption: 'e2e',
  theme: 'dark',
  animations: true
});

frost.send('Hello! 👋');
        

25 · Drag & Drop Zone

Drop files here

or click to browse

Images Videos Files

26 · Mention Autocomplete

27 · Empty States

No messages yet

Start a secure conversation below

28 · Connection & Status Bars

Connected · E2E Active

Reconnecting… Please wait

Disconnected · Tap to retry

29 · Scroll & FAB

30 · Profile & Contact Card

prem

● Online now

heyyy

E2E

Bonus · Full Message Input Area

End-to-end encrypted · Press Enter to send · Shift+Enter for newline