Catalog
301 components
Animations6
Breathing Guide CircleA circle that expands and contracts through breathe in, hold and breathe out phases, with a label and a countdown.
Keyframe Timeline ShowcaseA view animated by keyframe tracks for scale, offset and color, with the tracks and a playhead drawn on one shared timeline.
Phase Animator CycleA card that loops through several phases of scale, rotation and color.
Split Flap CounterA split-flap display where each digit flips down to its new value.
Spring Study PlaygroundSliders for response and damping that show how a spring moves a view and draw its curve.
Symbol Effect GalleryA gallery of SF Symbol effects, each played on demand and labeled with its name.
Backgrounds12
Animated Gradient BackgroundA linear gradient that slowly drifts its colors and turns its direction.
Aurora Mesh BackgroundAn animated aurora background made with a mesh gradient.
Bubbles BackgroundTranslucent bubbles that rise and sway across the screen.
Color Orbs BackgroundLarge, soft colored orbs drifting slowly over a dark base.
Grid Pulse BackgroundA grid of dots with a pulse of light spreading out from the center.
Image Derived Gradient BackgroundA full-screen gradient whose colors are sampled from the pixels of an image and cross-fade when the image changes.
Particle Field BackgroundDrifting points that are joined by faint lines when they come close.
Snowfall BackgroundSnowflakes falling at different speeds across three layers of depth.
Starfield BackgroundStars streaking toward the viewer with a simple perspective projection.
Synthwave Grid BackgroundA retro perspective grid that scrolls under a gradient sky with a striped sun.
Waves BackgroundLayered waves animated with a custom animatable Shape.
Weather Effects BackgroundAn animated sky for seven kinds of weather, with a turning sun, twinkling stars, drifting clouds, rain with splashes, lightning, swaying snow and fog, that fades from one to the next.
Buttons18
Async Action ButtonA button that runs an async action, swaps its label for a spinner in the label color without changing width and ignores taps until the action ends.
Badged Icon ButtonAn icon button with a count badge on its corner that pops in, rolls its number, caps at 99+ and bounces the icon when the count goes up.
Button Variant StyleA button style with filled, tinted, outlined and plain variants that follows the control size, the disabled state and the destructive role.
Elastic Drag ButtonA round button that stretches toward the finger and springs back on release.
Emoji Reaction PickerA long-press control that reveals a row of reaction emoji, magnifies the one under the finger and selects it on release.
Expanding Search ButtonA round magnifying glass button that opens into a search field.
Floating Action MenuA plus button that rotates into a close icon and fans out its actions around it.
Gradient Border ButtonA capsule button whose border is an angular gradient that keeps rotating.
Hamburger Menu ButtonA three-line menu button whose bars animate into a close cross when toggled.
Hold To Confirm ButtonA round button that fires only after a long press fills its progress ring, and cancels if released early.
Like Burst ButtonA heart button that pops and throws out a burst of small particles when liked.
Morphing Submit ButtonA submit button that morphs into a spinner while it works and then into a checkmark.
Play Pause Morph ButtonA play button whose triangle morphs into two pause bars by interpolating its path.
Pressable Button StyleA button style that shrinks and dims on press, then springs back.
Provider Sign In Button StackA stack of full-width sign-in buttons, each with a leading icon slot and its own loading state while authenticating.
Pulse Ring ButtonA round button with rings that keep radiating out from behind it.
Shimmer ButtonA gradient capsule button with a band of light that sweeps across it in a loop.
Shrinking Extended ButtonAn extended floating button that collapses from a labeled pill to a plain icon as the scroll view moves down.
Calendars4
Calendar Month GridA month calendar for picking one day, with swipe paging between months.
Calendar Range SelectorA month calendar that picks a start and an end day and shades the days between them.
Date Strip PickerA horizontal strip of days that keeps the selected day centered as you scroll.
Day Schedule TimelineThe hours of a day down a column, with each event drawn over the time it takes, overlapping events side by side and a line at the current time.
Cards6
Avatar StackOverlapping avatars of initials with a badge counting the rest.
Expandable Info CardA card that expands to show more, with a chevron that turns.
Holographic CardA card with a holographic foil whose colors, glints and glare shift as you tilt it by dragging, drawn by a Metal shader.
Swipeable Card StackA deck of cards you swipe away to reveal the next one.
Tilt CardA card that tilts in 3D toward the finger with a moving highlight.
Wallet Card StackA stack of cards where the one you tap rises to the top with its details and the rest wait in a pile below.
Charts11
Animated Bar ChartBars that grow from the baseline one after another with a spring.
Animated Donut ChartA donut chart whose segments grow in one by one, and the selected segment lifts out.
Candlestick ChartA candlestick chart of open, high, low and close prices, with a rule that reads the day under the finger.
Contribution HeatmapA calendar grid of colored cells whose intensity shows the activity of each day.
Gauge ChartA half-moon gauge with colored zones and a needle that swings to the value.
Interactive Line ChartA line chart that shows a rule and a value tooltip under the finger as it scrubs along the time axis.
Line Chart Draw InA line chart whose line draws in from left to right while a dot follows its tip.
Radar ChartA radar chart with an axis per quality around a center and a shape per series that grows out when it appears.
Scrollable Bar ChartA bar chart that scrolls sideways a week at a time and marks the average of the days in sight.
Sparkline Stat TileA stat tile with a small trend line behind its value.
Surface 3D ChartA 3D surface plot that rotates when dragged, with buttons for preset viewing angles.
Chat6
Chat Auto Scroll ListA message list that stays on the newest message as messages arrive, and stops following when the user scrolls up to read.
Chat Bubble ShapeA message bubble with a tail, whose corners adapt to grouped consecutive messages.
Keyboard Tracking Input BarA composer bar pinned below its content that rises with the keyboard and grows as the user types more lines.
Nested Comment ThreadThreaded comments with indentation, connector lines and collapsible replies.
Tapback Reaction BubbleA message you press and hold to react to, with a bar of reactions above it and the chosen one kept as a badge on its corner.
Typing Indicator BubbleThree dots that bounce in turn inside a message bubble while someone is typing, and shrink away when they stop.
Commerce5
Add To Cart Fly ButtonAn add-to-cart button that sends a copy of the product image arcing into the cart badge.
Add To Cart StepperAn add button that morphs into a quantity stepper and collapses back to the button when the quantity returns to zero.
Billing Period ToggleA monthly and yearly switch where the price rolls to its new value and a savings badge appears.
Pricing Tier CardsSnapping horizontal pricing cards with the recommended plan highlighted and enlarged.
Trial Timeline PaywallA paywall that shows what happens on each day of the free trial, with the plans and the button to start it.
Controls16
Animated Radio ButtonA radio button whose inner dot springs in and whose ring pulses once when selected.
Checkmark Box Toggle StyleA checkbox toggle style for iOS whose box fills and draws its checkmark, with a dash for a mixed Toggle(sources:).
Circular Range SliderA dial with two handles that sets a range around the clock, like a night of sleep.
Counter StepperMinus and plus buttons around a number that rolls as it changes and stops at its limits.
Day Night ToggleA switch whose icon morphs between a sun and a moon while its background shifts between day and night colors.
Filter Chip GroupSelectable filter chips that show a checkmark when chosen and wrap onto as many rows as they need.
Icon Switch Toggle StyleA switch toggle style whose knob carries a symbol for each state, like a checkmark and a cross, that swaps as it slides.
Range SliderA slider with two thumbs that picks a range, like the lowest and highest price of a filter.
Ruler Scroll PickerA horizontal ruler of tick marks that snaps to a value under a fixed center indicator.
Select All ChecklistA list of checkable rows under a select-all box that turns mixed when only some rows are checked and counts the selection.
Settings Toggle RowA settings row with a symbol on a colored rounded square, a title, an optional subtitle and a switch, like the Settings app.
Sliding Segmented PickerA segmented picker whose selected pill glides between the options.
Spring Toggle StyleA custom toggle style whose knob widens under the finger and overshoots as it lands.
Swipe To Confirm SliderA track with a thumb you drag to the end to confirm, which springs back if released early.
Tick Mark SliderThe system slider with a mark at the values that matter, which settles on the nearest one when let go.
Weekday Segmented PickerA row of round day buttons that picks several days of the week in the calendar's order, with a summary like Weekdays under it.
Drawing4
Drawing Pad Speed BrushA drawing pad whose stroke gets thinner as the finger moves faster.
Drawing Pad Undo RedoA drawing pad that keeps its strokes in a history so they can be undone and redone.
Path Trim Draw OnA custom shape, such as a logo, that draws itself along its path by animating trim.
Polygon Morph ShapeA shape that smoothly morphs between a square, a circle and a star using a custom animatable vector.
Effects21
Blurred Image BackdropA full-screen backdrop made from a blurred image with a tint layer, for placing content on top of it.
Border Beam ModifierA light beam with a fading tail that travels continuously around a rounded border.
Chromatic Glitch ShaderA view modifier that breaks a view up like a bad signal: its colors come apart, bands jump sideways and scan lines cross it, drawn by a Metal shader.
Coin Flip ViewA coin that flips in 3D over several turns and lands on heads or tails.
Color Reveal ImageA black and white image that gains its color as it scrolls toward the middle or when tapped.
Confetti BurstA one-shot confetti burst with simple physics, fired by changing a trigger.
Fireworks BurstRockets that climb to where you tap and explode into particle sparks.
Floating Reactions EmitterEmoji that float up from the tap point with a random drift and fade out.
Flow Field ParticlesParticles that drift along a smooth field of angles computed from position and time.
Globe 3D WireframeA wireframe globe drawn on a Canvas that spins by itself and turns and tilts as the finger drags it.
Intelligence Glow BorderA soft band of color that travels around a view's edge and spreads inward, like an assistant that is listening.
Jiggle Edit ModifierA view modifier that makes views wobble slightly, like app icons in edit mode.
Metaball Lava LampRound blobs that merge and separate like a lava lamp, drawn with a blur and alpha threshold on a Canvas.
Noise Grain OverlayA view modifier that lays a subtle animated film grain over any view.
Pixelate Shader EffectA view modifier that draws a view in big square blocks, like a spoiler, and brings it into focus as they shrink, drawn by a Metal shader.
Progressive Blur HeaderA blur that grows toward the top edge of a scroll view, drawn by a Metal shader, so what scrolls under a header melts away.
Ripple Shader EffectA view modifier that sends a wave from the tapped point and bends the view as it passes, drawn by a Metal shader.
Ripple Tap EffectA view modifier that spawns an expanding ripple wherever the user taps.
Spotlight OverlayA dark overlay with a soft hole that follows the finger.
Touch Particle TrailA trail of fading particles that follows the finger while it drags.
Voice OrbA glowing orb for a voice assistant whose colors swirl and that swells with the voice while it listens or speaks.
Feedback11
Animated Badge CountA count badge whose number rolls to its new value and whose capsule springs to fit it.
Animated Checkmark BadgeA success badge where a circle springs in and the checkmark draws itself inside it.
Dynamic Island PillA black capsule at the top of the screen that grows to show a live status and shrinks back to a pill.
Empty State PlaceholderAn empty screen with a breathing symbol, a message and an optional call to action.
Notification StackNotifications piled under the newest one, like a lock screen, that open into a column with a tap and can be swiped away one by one.
Rating StarsTappable rating stars that pop with a spring and work as an adjustable value in VoiceOver.
Shake Error ModifierA modifier that shakes a view with keyframes whenever a trigger value changes.
Toast BannerA toast modifier that slides a banner from the top, announces it to VoiceOver and dismisses by itself.
Toast HostA queue of toasts that show above everything, sheets and full-screen covers included.
Tooltip PopoverA tooltip bubble that pops out of its arrow next to an anchor view and closes on a tap outside.
Undo SnackbarA bottom bar with an Undo button and a shrinking timer line.
Gestures9
Completion Swipe RowA row you swipe to the right to complete, where a checkmark pops in and the row collapses.
Double Tap Heart OverlayDouble tapping a photo throws a heart at the finger and marks the photo as liked.
Drag Select GridA grid where dragging across tiles selects them all in one stroke, as in photo libraries.
Drop Zone HighlightA drop target that highlights and shows a hint while a dragged item hovers over it and clears when the drag leaves.
Long Press Radial MenuA long press opens a ring of actions, and dragging onto one of them selects it on release.
Pinch Zoom ViewA view you pinch to zoom and drag, which springs back to its bounds.
Scratch To RevealA cover you scratch with a finger to uncover the content beneath it.
Snap Corner DraggableA floating view that can be dragged anywhere and springs to the nearest safe-area corner when released.
Swipe Action RowA row that reveals action buttons under a horizontal swipe and snaps open or closed.
Glass6
Glass Action MenuA floating Liquid Glass button whose actions morph out of it.
Glass Button GalleryA reference gallery of the glass and prominent glass button styles in several sizes, shapes and tints.
Glass Segmented ControlA segmented control with a Liquid Glass thumb that slides between segments.
Glass Tab AccessoryA tab view with a Liquid Glass accessory above a tab bar that minimizes on scroll.
Glass Tag CloudTags of tinted, interactive Liquid Glass that melt together when they get close.
Glass Tool StripA row of Liquid Glass tool buttons with related tools fused into one shape.
Images11
Before After SliderTwo stacked images split by a draggable handle that compares the before and after versions.
Blur Up ImageAn image that goes from a blurred preview into sharp focus once the full picture arrives.
Circular Avatar CropperA photo you pan and pinch under a fixed circular window to choose an avatar crop.
Crop Rectangle OverlayA crop frame with draggable corners and edges over an image, dimming the area outside the selection.
Double Tap Zoom ImageAn image that zooms in on the point you double tap and returns to fit on the next double tap.
Ken Burns ImageA still picture that slowly zooms and pans so that it appears to move.
Photo Adjustment SlidersBrightness, contrast, saturation and hue sliders that update a photo live as they move.
Photo Filter PresetsA row of preset thumbnails that apply mono, warm, cool and high contrast looks to a photo using SwiftUI modifiers.
Photo LightboxA full-screen photo pager where each page zooms independently and the viewer closes on a swipe down.
Photo Multi Select GridA photo grid where a long press enters a multi-select mode that shows checkmarks on the chosen photos.
Scattered Photo BoardPhotos scattered at slight angles on a board that can be dragged around and brought to the front on touch.
Inputs13
Character Count Text EditorA multiline text field with a placeholder, a ring that fills toward the limit and a count that turns orange near it and red past it.
Clearable Text FieldA text field with a leading symbol, a clear button that keeps the focus, a tinted border while editing and an optional error message.
Color Swatch PickerA grid of selectable color swatches where the chosen one grows a ring.
Floating Label Text FieldA text field whose placeholder floats up when it gains focus or has text.
Masked Text FieldA text field that formats input as the user types, such as 12/34 or a phone number, using a mask.
Multi Step FormA multi-step form with a progress bar that moves forward only when the current step is valid.
OTP Code FieldA one-time code field with one box per digit, backed by a single hidden text field.
Passcode KeypadA number pad with a dot per digit that shakes and empties when the passcode is wrong.
Password Strength FieldA password field with a strength meter and a checklist of rules that tick off as they are met.
Rich Text EditorA text editor with a bar to make the selection bold, italic, underlined, struck through or highlighted.
Search Field With SuggestionsA search field that lists matching suggestions as the user types and fills the field when one is chosen.
Tag Input FieldA field that turns what you type into removable tags, which wrap onto as many lines as they need.
Validated Text FieldA text field that checks its value when it loses focus and shows its error only after that.
Intelligence3
Model Availability GateA view that shows its content when the on-device model can answer, and otherwise explains why not and what the person can do.
On Device Streaming AnswerAn answer that fills in as the on-device model streams it, with no network request.
Structured Output FormA form whose fields the on-device model fills in from a free-form note as a typed Generable value.
Layouts10
Adaptive Columns GridA grid whose column count is computed from the available width, so it gives more columns on iPad and fewer on iPhone.
Any Layout Adaptive SwitchA group that animates between a row and a column when its available width changes.
Bento Grid LayoutA custom Layout that packs tiles of varied spans into a bento grid.
Flow Tags LayoutA custom Layout that wraps tags onto as many lines as they need.
Kanban BoardColumns of cards that the user drags from one column to another.
Masonry LayoutA custom layout that places items of different heights into the shortest of several columns, like a Pinterest board.
Morphing Layout SwitchA switch that moves items between a list and a grid in one lazy grid, keeping the state of each cell.
Radial LayoutA custom Layout that spreads views around a circle and animates as the count changes.
Readable Width ContainerA wrapper that caps its content to a comfortable reading width and centers it on large iPad screens.
Subview Card ContainerA custom container that styles each child of its ViewBuilder as a card.
Lists8
Accordion SectionA stack of sections where opening one section closes the others, with the content height animated.
Disclosure Tree ViewA nested tree of rows that expand and collapse, indenting each level, for folders or category hierarchies.
Edit Mode Multi SelectA list with a Select mode that shows selection circles on each row and a bottom bar of bulk actions.
Load More FooterAn infinite list footer that requests the next page when it appears and shows loading, retry and end states.
Reorderable Card ListA stack of cards you can drag into a new order, without using List.
Reorderable GridA grid of tiles the user can drag into a new order.
Sticky Section HeadersA scrolling list of sections whose headers pin to the top until the next header pushes them off.
Swipe Action CardsA column of cards with the system's swipe actions, outside a List.
Loaders7
Arc Segments LoaderA spinner with gradient arc segments of different lengths turning in opposite directions.
Blob Morph LoaderA soft gradient blob drawn in a canvas that keeps changing shape while content loads.
Dots Pulse LoaderThree dots that pulse in sequence, as in a typing indicator.
Orbit LoaderA loading indicator with dots that orbit a glowing center.
Skeleton Shimmer ModifierA view modifier that turns any view into a shimmering redacted placeholder while it loads.
Symbol Breathe LoaderA loading indicator made of an SF Symbol that uses the breathe and rotate symbol effects.
Wave Bars LoaderA loading indicator with bars that rise and fall like an audio equalizer.
Maps4
Map Annotation CalloutMap pins with a short label that open a callout above them when tapped, while the camera moves to fit it.
Map Cluster AnnotationsA map where places that are close together are drawn as one bubble with their count, which splits into its places as the map zooms in.
Map Route TrackerA route on a map with a marker that travels along it, the part done in solid and the rest dotted, like an order on its way.
Map Search SheetA map with a sheet of places that rests at the bottom, filters as you type and flies to the place you choose.
Media8
Audio Player CardA podcast-style player card with artwork, a scrubber, skip buttons and a play and pause toggle.
Double Tap Seek OverlayDouble tapping the left or right half of a video skips back or forward with a ripple and a seconds label.
Expanding Mini PlayerA mini player bar that morphs into a full player when it is tapped or pulled up.
Shutter Capture ButtonA camera shutter whose inner shape shrinks on press and flashes a ring on capture, with a photo and video toggle.
Spinning Vinyl ArtCircular album art on a vinyl disc that spins while playing and eases to a stop when paused.
Video Player ChromeCustom controls over any video view that show on tap, hide after a few seconds and include a scrubber.
Video Poster To PlayerA poster with a play button that opens into the playing video in the same frame through a growing circle.
Waveform ScrubberAn audio waveform of bars that you drag to seek and that fills as playback moves on.
Menus5
Coach Mark TourA guided tour that dims the screen and spotlights a sequence of views with a step card next to each one.
Command PaletteA searchable sheet of commands with shortcut hints and live filtering as you type.
Context Menu Preview CardA card that lifts a richer preview above its menu when you press and hold it.
Dropdown Select MenuA custom dropdown field whose list of options grows out of it and collapses on selection.
Gooey Floating MenuA floating button whose option bubbles melt and merge out of it like liquid.
Modern6
Animatable RingA progress ring whose arc animates through the @Animatable macro.
Concentric CardNested cards whose corners stay concentric with ConcentricRectangle, however deep they sit.
Prominent Tab BarA tab view whose main action gets the system's prominent tab treatment.
Scroll Edge HeaderA scroll view whose content dissolves under a custom header using the scroll edge effect.
Symbol Draw OnAn SF Symbol that draws itself on and off, stroke by stroke.
Toolbar Overflow DemoA toolbar that ranks which actions survive when space runs out and keeps others in the overflow menu.
Navigation16
Adaptive Sidebar LayoutA split view driven by one Boolean that collapses to the detail on iPad and swaps columns on iPhone.
Animated Tab BarA custom tab bar with a sliding indicator and icons that bounce on selection.
Bottom DrawerA draggable bottom drawer that snaps to detents, built as a custom overlay.
Breadcrumb TrailA breadcrumb path that moves its middle crumbs into a menu when it runs out of width.
Drag To Dismiss ScreenA full-screen page that follows a downward drag, shrinks and fades, then leaves when released past a threshold.
Embedded Web BrowserA small browser inside the app, with an address bar, back, forward, reload and a line that fills while the page loads.
Full Screen Menu OverlayA full-screen menu that opens over the content and brings its links in one by one.
Navigation Path RouterA router that owns a NavigationPath so any view can push or pop screens by a typed value.
Page Dots IndicatorPage dots where the current one stretches into a capsule, following a paged TabView or scroll.
Scroll Spy HeaderA bar of chips that highlights the section at the top of a scroll view and jumps to a section when tapped.
Scroll To Top ButtonA floating button that appears after scrolling down and returns the scroll view to the top.
Search Scopes And SuggestionsA modifier that adds a search field with scope buttons and suggestion rows that narrow as you type.
Side DrawerA side menu that slides in and pushes the content away, with drag to open and close.
Sidebar Adaptive TabsThe same tabs as a bottom tab bar on iPhone and as a sidebar on iPad.
Tab Navigation State PreserveA tab bar where each tab keeps its own navigation path in one store, so switching back restores your place.
Two Pane Split LayoutA list and its detail that sit side by side on iPad and share one navigation stack on iPhone, on NavigationSplitView.
Patterns3
Permission Primer ScreenThe screen shown before the system asks for a permission: what it is for, what the person gets, and one button that leads to the system's question.
Vertical TimelineA vertical timeline with a connector line and done, current and upcoming steps.
Weather Forecast ScreenA weather screen with a header that shrinks to one line as it scrolls, an hourly strip, a ten-day list of temperature range bars over the week and an animated sky with rain or snow.
Pickers6
Country PickerA searchable list of countries with flags and dial codes that opens on the current region.
Emoji PickerA grid of emoji grouped by category, with tabs that jump between sections and a row of recent picks.
Inline Date Picker DisclosureA date row that opens in place into a calendar and closes again once a day is chosen.
Multi Photo Picker TrayA photo picker limited to a maximum count, with a tray of chosen thumbnails that can be removed.
Time Slot Grid PickerA grid of time slots where unavailable times are disabled and the chosen slot is highlighted.
Wheel PickerA vertical wheel that picks one value from a list, with rows turning in 3D as they leave the center.
Playful3
Profiles3
Profile Header StretchyA profile whose cover stretches when the page is pulled down and closes into a bar with the name as it scrolls, while the avatar on its edge shrinks away.
Stories ViewerA full-screen story pager with segmented progress bars, tap to move and hold to pause.
Story Ring AvatarAn avatar with a gradient ring that spins while there are unseen stories.
Progress7
Activity RingsConcentric gradient rings that close as daily goals are reached.
Circular Progress RingAn animated gradient ring that shows progress with a percentage in the middle.
Countdown RingA ring that empties and a number that counts down to a date.
Download Pill ProgressA capsule button that turns into a progress ring while downloading, then into a checkmark.
Gradient Progress BarA rounded progress bar with a gradient fill that glows more strongly as it advances.
Liquid Fill ProgressA circular progress view filled by a moving liquid wave drawn with an animatable shape.
Step Progress IndicatorNumbered steps joined by a line that fills as the current step advances.
Scrolling16
Auto Advance CarouselA paged carousel that advances on a timer and pauses while the user is dragging it.
Cover Flow CarouselA horizontal carousel where the centered item faces forward and its neighbours turn away in 3D as you scroll.
Hide On Scroll BarA bottom bar that slides out of view while the user scrolls down and returns as soon as they scroll up.
Infinite Marquee RowA row of content that scrolls forever without a visible seam.
Netflix Rows ScrollerA vertical stack of titled horizontal rows where each row scrolls on its own, like a streaming home screen.
Onboarding PagerA full-screen onboarding flow with swipeable pages, a progress indicator and a button that advances or finishes.
Paged Grid LauncherA launcher of icon grids that pages horizontally, with each page filled row by row like the iOS home screen.
Parallax Cards RowA horizontal carousel whose card artwork moves in parallax using visualEffect.
Peek CarouselA paging carousel that shows the edges of its neighbours.
Pull Progress RefreshA custom pull to refresh whose ring fills with the pull distance and starts a refresh when released past a threshold.
Scroll Fade CardsA vertical scroll of cards that scale down and fade at its edges with scrollTransition.
Scroll Progress BarA thin bar pinned to the top of a scroll view that grows with the reading progress of the content.
Scroll Visibility RevealSections fade and slide into place the first time they become visible while the user scrolls.
Sticky Parallax HeaderA parallax header that stretches on overscroll and collapses into a pinned bar.
Sticky Stacked CardsCards that pile up at the top of the screen as the next card scrolls over them.
Vertical Full Screen FeedA vertical feed where each item fills the screen and snaps into place, in the style of short-video apps.
Sheets3
Custom Detent SheetA system sheet that snaps between custom heights using presentationDetents and a CustomPresentationDetent.
Dynamic Height TrayA sheet exactly as tall as its content, which grows and shrinks as one step of a flow gives way to the next.
What's New SheetA sheet that lists what a new version brings and comes up once for each version.
Tabs4
Minimizing Tab BarA tab bar that shrinks into a compact capsule while scrolling using the system tab bar minimize behavior.
Notched Tab BarA tab bar whose background path carves a smooth notch under the selected tab that slides between items.
Scrolling Tab StripA horizontal row of tabs that scrolls the selected tab into the middle, with an underline that slides between tabs.
Tabs Picker PagesA row of tabs over a page that slides in with them, on the tabs picker style of iOS 27.
Text15
Animated Gradient TextText filled with a gradient that drifts endlessly through its letters.
Bouncy Letters TextLetters that hop one after another in a repeating wave with squash and stretch.
Counting Number TextA number that counts to its new value with its digits rolling into place.
Glitch TextColored copies of the text that jump and flicker in short glitch bursts.
Glyph Wave TextText whose glyphs ride a travelling sine wave, drawn by a custom TextRenderer.
Highlighted Search TextText with every match of a search query highlighted, ignoring case and accents.
Karaoke Lyrics TextLyrics that start dim and light up from the first letter to the last as they are sung.
Marquee TextA single line of text that scrolls horizontally only when it does not fit.
Read More TextA paragraph truncated with a fade that expands in place when tapped.
Rotating Words TextWords that take turns in the same spot, each one pushing the last out of the way.
Scramble TextRandom characters that settle from left to right into the final text.
Shimmer TextText with a band of light that sweeps across its letters through a mask.
Streaming TextText that arrives in chunks, like the answer of a language model, and fades each new part in from its first letter to its last.
Text Blur RevealText that appears line by line, coming into focus as it slides up, drawn by a custom TextRenderer.
Typewriter TextText that types itself one character at a time, followed by a blinking cursor.
Toolbars2
Transitions13
Blur Fade TransitionA custom transition that combines blur, fade and scale, available as .blurFade.
Circle Reveal TransitionA custom transition that reveals a view through a circular mask growing from a point.
Content Swap TransitionA showcase of text value changes using numericText, interpolate and opacity content transitions.
Cross Fade NavigationA sheet that fades in over the content with the iOS 27 cross-fade navigation transition.
Dissolve Shader TransitionA custom transition that burns a view away through noise, with a glowing edge, drawn by a Metal shader.
Flip Card TransitionA two-sided card that flips in 3D without ever showing mirrored content.
Interactive Pager TransitionA page transition whose progress follows the finger during a drag and completes or cancels on release.
Matched Hero CardA card that expands in place into a full detail view using matched geometry.
Parallax Push TransitionA custom Transition where the incoming page slides over while the outgoing page moves at a slower parallax speed.
Slide Scale TransitionA custom transition that combines an offset with a scale, available as .slideScale.
Staggered Appear ListA list whose rows enter one after another with a capped, testable delay.
Symbol Morph ToggleA toggle whose SF Symbol morphs between states with the iOS 18 magic replace effect.
Zoom Hero TransitionA grid of cards that zoom into their detail screen with the native navigation zoom transition.
No component matches. Try fewer words, or clear the filters.