@medialane/ui

Shared UI component library for Medialane apps. Used by medialane-dapp, medialane-io, and medialane-portal.

Install

npm install @medialane/ui
# or
bun add @medialane/ui

Tailwind preset

Add the preset in tailwind.config.ts to get all brand tokens and custom utilities:

import uiPreset from "@medialane/ui/preset";

export default {
  presets: [uiPreset],
  content: ["./src/**/*.{ts,tsx}", "./node_modules/@medialane/ui/dist/**/*.js"],
};

Global styles

// app/layout.tsx or equivalent entry point
import "@medialane/ui/styles";

Peer Dependencies

| Package | Required | |---|---| | react | >=18.0.0 | | react-dom | >=18.0.0 | | next | >=14.0.0 | | framer-motion | >=10.0.0 | | lucide-react | >=0.400.0 | | sonner | >=1.0.0 | | tailwind-merge | >=2.0.0 | | clsx | >=2.0.0 | | @medialane/sdk | >=0.6.0 |

Component Reference

Utils

import { cn, formatDisplayPrice, shortenAddress, ipfsToHttp, timeAgo } from "@medialane/ui";

| Export | Description | |---|---| | cn(...classes) | clsx + tailwind-merge class combiner | | formatDisplayPrice(price) | Format price string for display | | shortenAddress(addr) | Truncate 0x address — 0x1234…abcd | | ipfsToHttp(uri) | Convert ipfs:// URI to Pinata HTTP gateway URL | | timeAgo(timestamp) | Relative time string — "3 hours ago" |

Data (server-safe — no React, safe in Server Components)

import { IP_TYPE_DATA, IP_TYPE_DATA_MAP, BRAND, ACTIVITY_TYPE_CONFIG, TYPE_FILTERS, LAUNCHPAD_SERVICE_DEFINITIONS } from "@medialane/ui";

| Export | Description | |---|---| | IP_TYPE_DATA | Array of IP type definitions (label, icon, color) | | IP_TYPE_DATA_MAP | Map keyed by IP type string | | BRAND | Brand color and design tokens | | ACTIVITY_TYPE_CONFIG | Activity type config (mint/sale/offer/transfer/listing/cancelled) | | TYPE_FILTERS | Activity filter options for UI | | LAUNCHPAD_SERVICE_DEFINITIONS | All launchpad service card definitions |

v0.1 — Base Components

import { CurrencyIcon, CurrencyAmount, IpTypeBadge, AddressDisplay, MedialaneIcon, MedialaneLogoFull } from "@medialane/ui";

| Component | Description | |---|---| | <CurrencyIcon currency="ETH" /> | Token currency icon (ETH, STRK, USDC, USDT, WBTC) | | <CurrencyAmount amount="1.5" currency="ETH" /> | Formatted amount with icon | | <IpTypeBadge type="Music" /> | IP type pill badge with color and icon | | <AddressDisplay address="0x..." /> | Formatted address with copy-to-clipboard | | <MedialaneIcon size={24} /> | Medialane "M" brand icon | | <MedialaneLogoFull /> | Full Medialane wordmark |

v0.2 — Motion + Cards

import {
  MotionCard, FadeIn, Stagger, StaggerItem, KineticWords, SPRING, EASE_OUT,
  ScrollSection, ShareButton, CollectionCard, CollectionCardSkeleton,
  TokenCard, TokenCardSkeleton,
} from "@medialane/ui";

| Component | Description | |---|---| | <MotionCard> | Framer Motion card with hover lift | | <FadeIn> | Fade-in entrance animation wrapper | | <Stagger> / <StaggerItem> | Staggered list entrance animations | | <KineticWords> | Animated word-by-word text reveal | | SPRING / EASE_OUT | Reusable animation spring/easing constants | | <ScrollSection> | Scroll-triggered section fade-in | | <ShareButton> | Native share API with clipboard fallback | | <CollectionCard collection={c} /> | Collection grid card with image, name, stats | | <CollectionCardSkeleton /> | Loading skeleton for CollectionCard | | <TokenCard token={t} /> | Unified NFT/token card — used on marketplace, portfolio, collections | | <TokenCardSkeleton /> | Loading skeleton for TokenCard |

v0.3 — Activity + Launchpad + Marketplace

import {
  HeroSlider, HeroSliderSkeleton, ActivityTicker, ListingCard, ListingCardSkeleton,
  ActivityRow, ActivityFeedShell, LaunchpadGrid, CtaCardGrid,
} from "@medialane/ui";

| Component | Description | |---|---| | <HeroSlider slides={[...]} /> | Full-width hero carousel with auto-advance | | <HeroSliderSkeleton /> | Loading skeleton for HeroSlider | | <ActivityTicker activities={[...]} /> | Horizontal scrolling live activity feed ticker | | <ListingCard order={o} /> | Marketplace listing card (price, asset image, buy CTA) | | <ListingCardSkeleton /> | Loading skeleton for ListingCard | | <ActivityRow event={a} isLast={false} /> | Timeline activity row with spine connector | | <ActivityFeedShell activities={[...]} /> | Full activity feed with type filters | | <LaunchpadGrid items={[...]} /> | Launchpad feature grid | | <CtaCardGrid items={[...]} /> | CTA card grid section |

v0.3.2 — Discover Components

import {
  DiscoverHero, FeaturedCarousel, FeaturedCarouselSkeleton,
  DiscoverCollectionsStrip, DiscoverCreatorsStrip, DiscoverFeedSection,
} from "@medialane/ui";

| Component | Description | |---|---| | <DiscoverHero> | Discover page hero with headline and search | | <FeaturedCarousel collections={[...]} /> | Featured collections horizontal carousel | | <FeaturedCarouselSkeleton /> | Loading skeleton for FeaturedCarousel | | <DiscoverCollectionsStrip collections={[...]} /> | Horizontal discovery strip for collections | | <DiscoverCreatorsStrip creators={[...]} /> | Horizontal discovery strip for creators | | <DiscoverFeedSection> | Full discover page feed section |

v0.4 — Launchpad Services

import { LaunchpadServicesGrid, LAUNCHPAD_SERVICE_DEFINITIONS } from "@medialane/ui";

| Export | Description | |---|---| | <LaunchpadServicesGrid services={LAUNCHPAD_SERVICE_DEFINITIONS} /> | Launchpad services grid with live/coming-soon badges | | LAUNCHPAD_SERVICE_DEFINITIONS | Pre-built service definitions for all launchpad products |

Build & Publish

cd medialane-ui

# Build (outputs to dist/)
~/.bun/bin/bun run build

# Type-check
~/.bun/bin/bun run typecheck

# Watch mode during development
~/.bun/bin/bun run dev

# Publish to npm
npm publish

The package uses tsup and outputs ESM + CJS + type declarations.

Version History

| Version | Added | |---|---| | v0.4.0 | LaunchpadServicesGrid, LAUNCHPAD_SERVICE_DEFINITIONS | | v0.3.2 | DiscoverHero, FeaturedCarousel, DiscoverCollectionsStrip, DiscoverCreatorsStrip, DiscoverFeedSection | | v0.3.0 | ActivityRow, ActivityFeedShell, ActivityTicker, HeroSlider, ListingCard, LaunchpadGrid, CtaCardGrid, timeAgo, ACTIVITY_TYPE_CONFIG | | v0.2.0 | MotionCard, FadeIn, Stagger, StaggerItem, KineticWords, ScrollSection, ShareButton, CollectionCard, TokenCard | | v0.1.0 | cn, formatDisplayPrice, shortenAddress, ipfsToHttp, CurrencyIcon, CurrencyAmount, IpTypeBadge, AddressDisplay, MedialaneIcon, MedialaneLogoFull, IP_TYPE_DATA, BRAND |