Visualisation
Advanced UI components for displaying complex media, data structures, and communications.
Bento Grid
A flexible, responsive bento box layout for dashboards.
Main Dashboard
Primary statistics and overview
Stats
84%
Active
1,240
Chat Bubbles
Communication interface with bouncy physics.
Hey! Could you analyze the performance data from last week?
10:42 AM
I'd be happy to help. Let me fetch that information and generate a summary report for you.
10:43 AM
Awesome, thanks.
10:44 AM
File Upload
Interactive drag-and-drop file uploader.
Click to upload or drag and dropSVG, PNG, JPG or GIF (max. 800x400px)
Audio Player
Custom, native-feeling audio player with smooth scrubbing.
0:00/0:00
BentoGrid API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
columns | number | 3 | Number of columns in the grid. |
gap | string | '16px' | Gap between grid items. |
BentoItem API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
colSpan | number | 1 | Number of columns the item spans. |
rowSpan | number | 1 | Number of rows the item spans. |
hoverable | boolean | false | Enables hover animation and depth. |
ChatBubble API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
role | string | 'user' | Role of the speaker: "user" or "ai". |
time | string | '' | Optional timestamp to display. |
FileUpload API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
accept | string | '*/*' | Allowed file types (standard accept attribute). |
multiple | boolean | false | Allow multiple files. |
AudioPlayer API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
src | string | undefined | URL of the audio file to play. Required. |