Skip to content
Snapshot Docs

Component Library

Snapshot UI components are standalone React components with typed props.

Import Paths

Section titled “Import Paths”
import {
  ButtonBase,
  CardBase,
  DataTableBase,
  ModalBase,
  NavBase,
  RichInputBase,
} from "@lastshotlabs/snapshot/ui";

Focused bundles:

import { RichInputBase } from "@lastshotlabs/snapshot/ui/rich-input";
import { EmojiPickerBase } from "@lastshotlabs/snapshot/ui/emoji-picker";
import { GifPickerBase } from "@lastshotlabs/snapshot/ui/gif-picker";

Basic Pattern

Section titled “Basic Pattern”
import { ButtonBase, CardBase } from "@lastshotlabs/snapshot/ui";


export function SettingsCard() {
  return (
    <CardBase title="Settings">
      <ButtonBase
        label="Save"
        icon="check"
        onClick={() => {
          void saveSettings();
        }}
      />
    </CardBase>
  );
}

Styling

Section titled “Styling”

Most components accept className, style, and slots.

<ButtonBase
  id="publish"
  label="Publish"
  icon="send"
  slots={{
    icon: { style: { color: "var(--sn-color-primary)" } },
    label: { className: "publish-label" },
  }}
/>

Component Families

Section titled “Component Families”
  • Forms: inputs, selects, textareas, buttons, switches, sliders, wizards.
  • Data: tables, lists, charts, badges, avatars, progress, empty states.
  • Layout: cards, grids, rows, columns, containers, nav, split panes.
  • Overlay: modal, drawer, popover, context menu, command palette.
  • Content: markdown, rich text, rich input, code blocks, timelines.
  • Communication: chat, comments, message threads, reactions, presence.
  • Media: image, video, carousel, embed, file uploader.
  • Workflow: kanban, calendar, audit log, notification feed.

Next

Section titled “Next”