HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • Artwork
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Form Guide
  • Hover Card
  • Icon Tile
  • Image Export
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • League Table
  • Marquee
  • Match Score
  • Meter
  • Multi Select
  • Native Select
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sonner
  • Sortable
  • Spinner
  • Stat
  • Stat Tabs
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Standings
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Templates
  • Sign In Page
  • Upload Page
  • Agreement Sign
  • Email
  • Email Composer
  • Share Dialog
  • Integrations
  • Transactions
  • Analytics
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Image Export

PreviousNext

Lay something out at a fixed pixel size, like a 4:5 match card, preview it scaled down, and download it or send it to the share sheet as a PNG.

Base UIReact AriaRadix UI
Premier LeagueRound 8 · Sun 11 Oct
Tottenham Hotspur
Arsenal
2-1Full time
Solanke 12'Kudus 58'
Saka 34'
Tottenham Hotspur StadiumSun 11 Oct

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/image-export.json

Usage#

import { EXPORT_SIZES, ImageExportActions, ImageExportFrame, useImageExport } from "@/components/ui/image-export"
const exporter = useImageExport("tottenham-2-1-arsenal")
 
<ImageExportFrame frameRef={exporter.ref} size={EXPORT_SIZES.portrait}>
  <MatchCard match={match} />
</ImageExportFrame>
<ImageExportActions exporter={exporter} shareData={{ title: "Tottenham 2-1 Arsenal" }} />

How it works#

  • ImageExportFrame lays its children out at the real size, 1080 by 1350 for portrait, and scales them to fit its width. Design the card in real pixels.
  • useImageExport renders the frame to a PNG at full size with html-to-image. download() saves it, share() opens the phone's share sheet with the image attached (Instagram, WhatsApp, Messages) and falls back to a download where files cannot be shared.
  • ImageExportActions shows Share where the browser can share files, and Download everywhere.
  • EXPORT_SIZES has portrait (4:5), square (1:1) and story (9:16). Pass any { width, height } for others.

Images inside the frame must come from the same site or allow CORS, or they are left out of the PNG.

Icon TileInput

On This Page

InstallationUsageHow it works