HomeExamplesComponent Showcase

Component Showcase

Published Sep 18, 2024
⋅
Updated Oct 14, 2026
⋅
3 minutes read
Showcase

Image container

Remote images with the same stroke and corner radius as the component preview.

Full width

Fills the available width with no width limit. Height is 300px.

A lakeside cabin reflected in still water beneath the mountains
import ImageContainer from "@/components/image-container";
 
<ImageContainer
  src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1600&q=85"
  alt="A lakeside cabin reflected in still water beneath the mountains"
  type="fullWidth"
/>

Square

A fixed 200 × 200px image. Both types crop the image to fill the container.

A lakeside cabin reflected in still water beneath the mountains
<ImageContainer
  src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=400&q=85"
  alt="A lakeside cabin reflected in still water beneath the mountains"
  type="square"
/>

Grid

Arrange content in equal-width columns with a fixed cell height and adjustable spacing.

Image showcase

Two columns of 200 × 200px square images, with 6px between them.

A lakeside cabin reflected in still water beneath the mountains
A rugged mountain peak beneath a cloudy sky
import Grid from "@/components/grid";
import ImageContainer from "@/components/image-container";
 
<Grid type="showcase" columns={2} cellHeight={200} gap={6}>
  <ImageContainer src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=400&q=85" alt="Lakeside cabin" type="square" />
  <ImageContainer src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=400&q=85" alt="Mountain peak" type="square" />
</Grid>

Annotation

Secondary text beside a 1px vertical bar, with 10px spacing. The bar automatically matches the height of the text as it wraps.

import Annotation from "@/components/annotation";
 
<Annotation>
  This annotation has a longer explanation that wraps across multiple lines.
  The vertical bar grows with the text.
</Annotation>

CTA

A compact call to action based on the bottom annotation card in SwiftUX’s MCP connect card. Pass an icon, title, button text, and destination link.

Install SwiftUX MCP once. Your agent can search, pull source, and adapt from there.
Get started
import { Plug } from "lucide-react";
import CTA from "@/components/cta";
 
<CTA
  icon={<Plug />}
  title="Install SwiftUX MCP once. Your agent can search, pull source, and adapt from there."
  buttonText="Get started"
  href="https://swiftux.app/mcp"
/>

Project

A linked card with a circular image, a title, and muted description text. url supplies the image source; href sets the destination for the whole card. Cards fill their parent and grow with longer text.

ElevenLabs Voice Cloning
Send realistic voice notes based on your voice with ElevenLabs.
Spam Filter
AI will analyze messages based on this filter and flag it as spam.
import Project from "@/components/project";
 
<Project
  url="/assets/projects/voice.svg"
  href="https://elevenlabs.io"
  title="ElevenLabs Voice Cloning"
  text="Send realistic voice notes based on your voice with ElevenLabs."
/>

Arrow link

An underlined primary label with a flexible spacer and an up-right arrow. Pass title and link; the row fills its parent’s width. Long titles wrap while the arrow stays visible.

Read the postsBrowse examples
Explore the component collection and examples
import ArrowLink from "@/components/arrow-link";
 
<div className="flex flex-col gap-3">
  <ArrowLink title="Read the posts" link="/posts" />
  <ArrowLink title="Browse examples" link="/examples" />
</div>
 
<div className="w-60 max-w-full rounded-base border border-border p-4">
  <ArrowLink title="Explore the component collection and examples" link="/examples" />
</div>

Buttons

Buttons from the Atomize designs, with optional image, left icon, primary text, secondary text, and right icon. Extras can be combined or omitted. Icon-only buttons need an accessible label.

Medium button

40px tall, 10px corners, a 20px image, and 18px icons.

"use client";
 
import { ArrowRight, Plus } from "lucide-react";
import Button from "@/components/button";
 
<Button
  size="md"
  primaryText="Primary"
  secondaryText="Secondary"
  imageSrc="/assets/buttons/avatar.png"
  leftIcon={<Plus size={18} />}
  rightIcon={<ArrowRight size={18} />}
  onClick={() => console.log("Clicked")}
/>

Small button

32px tall, 8px corners, a 16px image, and 16px icons.

<Button size="sm" leftIcon={<Plus size={16} />}>
  Add item
</Button>
 
<Button size="sm" leftIcon={<Plus size={16} />} aria-label="Add item" />
 
<Button size="sm" disabled>
  Disabled
</Button>

IFrame

A container that renders React components or HTML in an isolated frame. Set the height to fit your content.

React content

The square stock widget, using illustrative data.

import IFrame from "@/components/iframe";
import StockWidget from "@/components/iframe/stock-widget";
 
<IFrame title="Square stock widget preview" height={300}>
  <StockWidget />
</IFrame>

HTML content

Pass a fragment or a complete HTML document with CSS and JavaScript. Content is centered in the frame and shares the page's font files. Use font-family: inherit on your widget to avoid embedding font data. In the constructor, click Preview to interact with embedded controls.

The portal easing HTML example includes the interactive curve without an embedded font.

<IFrame
  title="HTML element preview"
  height={160}
  html="<div><strong>HTML works too.</strong></div>"
/>

Phone frame

A rounded screen based on the supplied iPhone frame: 402 × 874 proportions, 55px corners at full size, a subtle ring, and a soft shadow. Accepts local or remote image and video URLs, preserving the whole frame by default.

Single phone

Use width to scale a standalone phone. Its height and corner radius scale with it.

SwiftUX paywall with a curved benefits sheet
import PhoneFrame from "@/components/phone-frame";
 
<PhoneFrame
  src="https://media.swiftux.app/image-assets/Paywall_CurvedSheetBenefits.png"
  alt="SwiftUX paywall with a curved benefits sheet"
  width={200}
/>

Three phones in a row

PhoneStack fits three phones into the available width. Change columns and gap for other arrangements.

SwiftUX paywall with a curved benefits sheet
SwiftUX paywall with a curved benefits sheet
SwiftUX paywall with a curved benefits sheet
import PhoneStack from "@/components/phone-frame/stack";
 
<PhoneStack columns={3} gap={16}>
  <PhoneFrame src="https://media.swiftux.app/image-assets/Paywall_CurvedSheetBenefits.png" alt="SwiftUX paywall with a curved benefits sheet" />
  <PhoneFrame src="https://media.swiftux.app/image-assets/Paywall_CurvedSheetBenefits.png" alt="SwiftUX paywall with a curved benefits sheet" />
  <PhoneFrame src="https://media.swiftux.app/image-assets/Paywall_CurvedSheetBenefits.png" alt="SwiftUX paywall with a curved benefits sheet" />
</PhoneStack>

Video phone

Video URLs are detected automatically. Videos loop muted while visible and pause offscreen. Playback controls let you play or pause manually. Use autoPlay={false} for manual playback, or mediaType="video" for URLs without a video extension.

<PhoneFrame
  src="https://media.swiftux.app/video-assets/ComparisonSheet_Preview.mp4"
  alt="Fitness Assist app video walkthrough"
  width={200}
  controls
  autoPlay
  muted
  loop
/>

Images and videos can share the same stack:

<PhoneStack columns={3} gap={16}>
  <PhoneFrame src="https://media.swiftux.app/image-assets/Paywall_CurvedSheetBenefits.png" alt="Paywall screenshot" />
  <PhoneFrame src="https://media.swiftux.app/video-assets/FitnessAssistDemoFull.mp4" alt="App walkthrough" />
  <PhoneFrame
    src="/my-video.mp4"
    poster="/my-poster.png"
    alt="Video with a poster image"
    autoPlay={false}
  />
</PhoneStack>

Divider

A 1px horizontal line that fills the available width, using the site’s border color.

import Divider from "@/components/divider";
 
<Divider />