MediaGrid
Responsive media card grid.
import { MediaGrid } from '@ybouhjira/hyperkit';Static examples
This component depends on app-level context (providers, services, or interactive setup) that does not fit the inline playground yet, so its examples are shown as static code.
#Props
| Prop | Type | Default | Description |
|---|---|---|---|
items * | MediaGridItem[] | — | Array of media items to display. |
selectedId | string | null | — | ID of the currently selected item. |
onAdd | (files: File[]) => void | — | Callback when "+" card is clicked or files are dropped on the grid. |
onSelect | (id: string) => void | — | Callback when an item is clicked. |
onDelete | (id: string) => void | — | Callback when an item's delete button is clicked. |
onReplace | (id: string, file: File) => void | — | Callback when a file is dropped onto an existing item. |
accept | string | 'image/*' | Accepted MIME types or file extensions. |
maxSize | number | — | Maximum file size in bytes. |
columnMinWidth | number | 100 | Minimum column width in pixels for responsive grid. |
showLabels | boolean | true | Show labels below items. |
addLabel | string | 'Add' | Label text for the add button. |
disabled | boolean | false | Disable all interactions. |
class | string | — | Additional CSS classes. |
style | JSX.CSSProperties | — | Custom styles. |
* required prop.
#Design Tokens
This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.
--sk-accent--sk-accent-subtle--sk-bg-secondary--sk-bg-tertiary--sk-border--sk-font-size-xs--sk-media-grid-bg--sk-media-grid-border--sk-media-grid-column-min--sk-media-grid-radius--sk-radius-md--sk-space-sm--sk-space-xs--sk-text-muted--sk-text-secondary