@zedtech/zedkit-ui

ScrollGallery

One snap-aligned horizontal scroll row with thin scrollbar, edge fade, and focused items scrolled into view.

alpha@zedtech/zedkit-ui

Wraps: none (layout + focus scroll)

One

View props table

Who is it for?: Developers showing a row of peers (identity chips, filter pills, thumbnail strips) that must stay on one line on phones.
When should I use it?: More items than fit at once; keyboard tabs or links inside the row.
When should I pick something else?: Primary navigation that should wrap — use a vertical stack.

Use it

Identity picker row

import { ScrollGallery, Tabs, TabsList, TabsTrigger } from "@zedtech/zedkit-ui";

<Tabs value="a">
  <ScrollGallery className="w-full">
    <TabsList className="inline-flex w-max flex-nowrap">
      <TabsTrigger value="a">One</TabsTrigger>
      <TabsTrigger value="b">Two</TabsTrigger>
    </TabsList>
  </ScrollGallery>
</Tabs>

Filter chips

Alpha Beta Gamma Delta

import { ScrollGallery } from "@zedtech/zedkit-ui";

<ScrollGallery>
  <div className="flex w-max gap-stack-sm">
    <a className="inline-flex min-h-floor shrink-0 snap-start items-center rounded-md border pad-row" href="#a">
      Alpha
    </a>
    <a className="inline-flex min-h-floor shrink-0 snap-start items-center rounded-md border pad-row" href="#b">
      Beta
    </a>
  </div>
</ScrollGallery>

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { ScrollGallery, Tabs, TabsList, TabsTrigger } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Tabs value="a">
        <ScrollGallery className="w-full">
          <TabsList className="inline-flex w-max flex-nowrap">
            <TabsTrigger value="a">One</TabsTrigger>
            <TabsTrigger value="b">Two</TabsTrigger>
          </TabsList>
        </ScrollGallery>
      </Tabs>
    </main>
  );
}

Package version 2.0.1.

Props

No props of its own. It accepts the native attributes below.

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Keep real controls inside the track (tabs, links, buttons); focused items scroll into view. Edge fades are decorative only.

Troubleshooting

Items wrap to two lines — the track child should be `inline-flex flex-nowrap` (for example `TabsList`). Nothing scrolls — confirm the row is wider than the viewport and `overflow-x-auto` is not blocked by a parent `overflow: hidden`.

Tabs

Accessible tabs (list, triggers, content panels).

StickyAside

Main column scrolls; aside sticks under the header until the section ends. Pure CSS, server components, no scroll hijacking.