Database

Gallery View

Cards with a page preview area and the title, in a responsive grid.

Tasks

Usage

  • Use the gallery layout when each row has visual content (a cover or page preview) that helps recognition.
  • Pick cardSize by how much of the preview matters: small for many rows, large for rich previews.
  • Don’t use a gallery for dense, text-only records; use the list or table layout instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/GalleryViewExample.tsx
import { DatabaseView, createTasksSample } from '@krackedui/motion';

export function GalleryViewExample() {
  return (
    <DatabaseView data={createTasksSample()} initialViewId="v-gallery" />
  );
}

Examples

Card size

Composition

Views read the database from context, so render them inside <DatabaseView> (which picks the active view for you) or inside your own <DatabaseProvider value={useDatabase(...)}>.

anatomy
<GalleryView cardSize="medium">
  card × n (role="link")  → preview (146 tall) · title row · visible properties · CardActions on hover
  "+ New page"
</GalleryView>

API Reference

GalleryView

PropTypeDefault
onOpenRow
(row: Row) => void
cardSize
"small""medium""large"
"medium"
hoveredRowId
string

Accessibility

  • Cards are role="link" with tabIndex=0; Enter opens the page.
© 2026 Motion. Internal documentation.