presskit.svelte

A comprehensive SvelteKit component library for creating professional presskit() style press pages.

Features

Professional Design

Clean, media-focused layouts inspired by presskit() and presskit.html.

Reusable Components

Pre-built components for studios and games with prop-based configuration.

Media Galleries

Image galleries with lightbox support and video embeds for YouTube, Vimeo, and Twitch.

Press Quotes

Showcase reviews and press coverage with scores and attributions.

Team & Credits

Display team members, collaborators, and game credits.

Awards Section

Highlight achievements, nominations, and recognition.

Additional Links

Curate important resources, storefronts, and press assets.

Responsive Layout

Mobile-friendly design with adaptive two-column layouts.

Optional Sidebar Navigation

Sticky navigation that highlights the active section as visitors scroll.

TypeScript Support

Full TypeScript coverage with comprehensive type definitions.

Installation

npm install presskit.svelte

Quick Start

<script>
  import { GamePresskit } from 'presskit.svelte';

  const game = {
    title: 'My Awesome Game',
    subtitle: 'An Epic Adventure',
    developer: 'Studio Name',
    releaseDate: 'December 2024',
    platforms: ['PC', 'PlayStation 5', 'Xbox Series X/S'],
    price: '$29.99',
    website: 'https://example.com',
    description: '<p>Your game description here...</p>'
  };

  const media = [
    {
      url: 'https://example.com/screenshot1.jpg',
      thumbnail: 'https://example.com/screenshot1-thumb.jpg',
      caption: 'Gameplay screenshot',
      alt: 'Game screenshot'
    }
  ];
</script>

<GamePresskit {game} {media} />

Component Highlights

GamePresskit

Craft complete game press pages with banners, features, media, quotes, awards, and credits.

StudioPresskit

Build studio-level press destinations with team details, project showcases, and brand assets.

Styling

Customize the presentation with CSS custom properties such as --color-primary, --color-accent, and --color-background defined in src/lib/styles/global.css.