compose-preview Compose UI Samples

Compose UI Samples

compose-ui-samples

1027 previews · 7 views

Compare againstSVG
This catalog serves baked PNG snapshots only — its delivery branch publishes no live bundle, so device, theme and knob controls can't re-render on this server.

Foundation

BasicTextField

Basic Text Field Basic Text Field Annotated Output Transformation Sample
Basic Text Field Basic Text Field Annotated Output Transformation Sample
basictextfield-basictextfieldannotatedoutputtransformationsample__ideal__default
Basic Text Field Basic Text Field Change Iteration Sample
Basic Text Field Basic Text Field Change Iteration Sample
basictextfield-basictextfieldchangeiterationsample__ideal__default
1 view
Basic Text Field Basic Text Field Change Reverse Iteration Sample
Basic Text Field Basic Text Field Change Reverse Iteration Sample
basictextfield-basictextfieldchangereverseiterationsample__ideal__default
1 view
Basic Text Field Basic Text Field Custom Input Transformation Sample
Basic Text Field Basic Text Field Custom Input Transformation Sample
basictextfield-basictextfieldcustominputtransformationsample__ideal__default
Basic Text Field Basic Text Field Decorator Sample
Basic Text Field Basic Text Field Decorator Sample
basictextfield-basictextfielddecoratorsample__ideal__default
1 view
Basic Text Field Basic Text Field Input Transformation By Value Choose Sample
Basic Text Field Basic Text Field Input Transformation By Value Choose Sample
basictextfield-basictextfieldinputtransformationbyvaluechoosesample__ideal__default
2 views
Basic Text Field Basic Text Field Input Transformation By Value Replace Sample
Basic Text Field Basic Text Field Input Transformation By Value Replace Sample
basictextfield-basictextfieldinputtransformationbyvaluereplacesample__ideal__default
1 view
Basic Text Field Basic Text Field Input Transformation Max Length Custom
Basic Text Field Basic Text Field Input Transformation Max Length Custom
basictextfield-basictextfieldinputtransformationmaxlengthcustom__ideal__default
Basic Text Field Basic Text Field Output Transformation Sample
Basic Text Field Basic Text Field Output Transformation Sample
basictextfield-basictextfieldoutputtransformationsample__ideal__default
Basic Text Field Basic Text Field Sample
Basic Text Field Basic Text Field Sample
basictextfield-basictextfieldsample__ideal__default
1 view
Basic Text Field Basic Text Field Tracked Range Properties Sample
Basic Text Field Basic Text Field Tracked Range Properties Sample
basictextfield-basictextfieldtrackedrangepropertiessample__ideal__default
Basic Text Field Basic Text Field Tracked Range Sample
Basic Text Field Basic Text Field Tracked Range Sample
basictextfield-basictextfieldtrackedrangesample__ideal__default
Basic Text Field Basic Text Field Tracked Range Text Range Setter Sample
Basic Text Field Basic Text Field Tracked Range Text Range Setter Sample
basictextfield-basictextfieldtrackedrangetextrangesettersample__ideal__default
Basic Text Field Basic Text Field Tracked Range Toggle Bold Sample
Basic Text Field Basic Text Field Tracked Range Toggle Bold Sample
basictextfield-basictextfieldtrackedrangetoggleboldsample__ideal__default
1 view
Basic Text Field Basic Text Field Undo Sample
Basic Text Field Basic Text Field Undo Sample
basictextfield-basictextfieldundosample__ideal__default
Basic Text Field Basic Text Field With String Sample
Basic Text Field Basic Text Field With String Sample
basictextfield-basictextfieldwithstringsample__ideal__default
Basic Text Field Credit Card Sample
Basic Text Field Credit Card Sample
basictextfield-creditcardsample__ideal__default
Basic Text Field Placeholder Basic Text Field Sample
Basic Text Field Placeholder Basic Text Field Sample
basictextfield-placeholderbasictextfieldsample__ideal__default
1 view
Basic Text Field Text Field With Icon Sample
Basic Text Field Text Field With Icon Sample
basictextfield-textfieldwithiconsample__ideal__default

Layout

FlexBox

Flex Box Flex Align Self Baseline Sample
Flex Box Flex Align Self Baseline Sample
flexbox-flexalignselfbaselinesample__ideal__default
Flex Box Flex Align Self Custom Baseline Sample
Flex Box Flex Align Self Custom Baseline Sample
flexbox-flexalignselfcustombaselinesample__ideal__default
Flex Box Flex Align Self Sample
Flex Box Flex Align Self Sample
flexbox-flexalignselfsample__ideal__default
Flex Box Flex Basis Dp Sample
Flex Box Flex Basis Dp Sample
flexbox-flexbasisdpsample__ideal__default
Flex Box Flex Basis Percent Sample
Flex Box Flex Basis Percent Sample
flexbox-flexbasispercentsample__ideal__default
Flex Box Flex Basis Sample
Flex Box Flex Basis Sample
flexbox-flexbasissample__ideal__default
Flex Box Flex Box Align Content Sample
Flex Box Flex Box Align Content Sample
flexbox-flexboxaligncontentsample__ideal__default
Flex Box Flex Box Align Items Baseline Sample
Flex Box Flex Box Align Items Baseline Sample
flexbox-flexboxalignitemsbaselinesample__ideal__default
Flex Box Flex Box Align Items Custom Baseline Sample
Flex Box Flex Box Align Items Custom Baseline Sample
flexbox-flexboxalignitemscustombaselinesample__ideal__default
Flex Box Flex Box Align Items Sample
Flex Box Flex Box Align Items Sample
flexbox-flexboxalignitemssample__ideal__default
Flex Box Flex Box Column Gap Sample
Flex Box Flex Box Column Gap Sample
flexbox-flexboxcolumngapsample__ideal__default
Flex Box Flex Box Config Combine Sample
Flex Box Flex Box Config Combine Sample
flexbox-flexboxconfigcombinesample__ideal__default
Flex Box Flex Box Config Responsive Sample
Flex Box Flex Box Config Responsive Sample
flexbox-flexboxconfigresponsivesample__ideal__default
Flex Box Flex Box Config Reusable Sample
Flex Box Flex Box Config Reusable Sample
flexbox-flexboxconfigreusablesample__ideal__default
Flex Box Flex Box Constraints Sample
Flex Box Flex Box Constraints Sample
flexbox-flexboxconstraintssample__ideal__default
Flex Box Flex Box Direction Sample
Flex Box Flex Box Direction Sample
flexbox-flexboxdirectionsample__ideal__default
Flex Box Flex Box Gap Different Sample
Flex Box Flex Box Gap Different Sample
flexbox-flexboxgapdifferentsample__ideal__default
Flex Box Flex Box Gap Sample
Flex Box Flex Box Gap Sample
flexbox-flexboxgapsample__ideal__default
Flex Box Flex Box Justify Content Sample
Flex Box Flex Box Justify Content Sample
flexbox-flexboxjustifycontentsample__ideal__default
Flex Box Flex Box Max Items In Each Line Sample
Flex Box Flex Box Max Items In Each Line Sample
flexbox-flexboxmaxitemsineachlinesample__ideal__default
Flex Box Flex Box Row Gap Sample
Flex Box Flex Box Row Gap Sample
flexbox-flexboxrowgapsample__ideal__default
Flex Box Flex Box Scope Sample
Flex Box Flex Box Scope Sample
flexbox-flexboxscopesample__ideal__default
Flex Box Flex Box Wrap Sample
Flex Box Flex Box Wrap Sample
flexbox-flexboxwrapsample__ideal__default
Flex Box Flex Config Combine Sample
Flex Box Flex Config Combine Sample
flexbox-flexconfigcombinesample__ideal__default
Flex Box Flex Config Sample
Flex Box Flex Config Sample
flexbox-flexconfigsample__ideal__default
Flex Box Flex Config Scope Sample
Flex Box Flex Config Scope Sample
flexbox-flexconfigscopesample__ideal__default
Flex Box Flex Grow Sample
Flex Box Flex Grow Sample
flexbox-flexgrowsample__ideal__default
Flex Box Flex Modifier With Config Sample
Flex Box Flex Modifier With Config Sample
flexbox-flexmodifierwithconfigsample__ideal__default
Flex Box Flex Modifier With Lambda Sample
Flex Box Flex Modifier With Lambda Sample
flexbox-flexmodifierwithlambdasample__ideal__default
Flex Box Flex Order Sample
Flex Box Flex Order Sample
flexbox-flexordersample__ideal__default
Flex Box Flex Shrink Sample
Flex Box Flex Shrink Sample
flexbox-flexshrinksample__ideal__default
Flex Box Simple Flex Box
Flex Box Simple Flex Box
flexbox-simpleflexbox__ideal__default

SizeModifier

Size Modifier Default Min Size Sample
Size Modifier Default Min Size Sample
sizemodifier-defaultminsizesample__ideal__default
Size Modifier Fill Half Height Modifier
Size Modifier Fill Half Height Modifier
sizemodifier-fillhalfheightmodifier__ideal__default
Size Modifier Fill Half Size Modifier
Size Modifier Fill Half Size Modifier
sizemodifier-fillhalfsizemodifier__ideal__default
Size Modifier Fill Half Width Modifier
Size Modifier Fill Half Width Modifier
sizemodifier-fillhalfwidthmodifier__ideal__default
Size Modifier Simple Fill Height Modifier
Size Modifier Simple Fill Height Modifier
sizemodifier-simplefillheightmodifier__ideal__default
Size Modifier Simple Fill Modifier
Size Modifier Simple Fill Modifier
sizemodifier-simplefillmodifier__ideal__default
Size Modifier Simple Fill Width Modifier
Size Modifier Simple Fill Width Modifier
sizemodifier-simplefillwidthmodifier__ideal__default
Size Modifier Simple Height Modifier
Size Modifier Simple Height Modifier
sizemodifier-simpleheightmodifier__ideal__default
Size Modifier Simple Required Height Modifier
Size Modifier Simple Required Height Modifier
sizemodifier-simplerequiredheightmodifier__ideal__default
Size Modifier Simple Required Size Modifier
Size Modifier Simple Required Size Modifier
sizemodifier-simplerequiredsizemodifier__ideal__default
Size Modifier Simple Required Width Modifier
Size Modifier Simple Required Width Modifier
sizemodifier-simplerequiredwidthmodifier__ideal__default
Size Modifier Simple Size Modifier
Size Modifier Simple Size Modifier
sizemodifier-simplesizemodifier__ideal__default
Size Modifier Simple Size Modifier With Dp Size
Size Modifier Simple Size Modifier With Dp Size
sizemodifier-simplesizemodifierwithdpsize__ideal__default
Size Modifier Simple Width Modifier
Size Modifier Simple Width Modifier
sizemodifier-simplewidthmodifier__ideal__default
Size Modifier Simple Wrap Content Aligned Modifier
Size Modifier Simple Wrap Content Aligned Modifier
sizemodifier-simplewrapcontentalignedmodifier__ideal__default
Size Modifier Simple Wrap Content Horizontally Aligned Modifier
Size Modifier Simple Wrap Content Horizontally Aligned Modifier
sizemodifier-simplewrapcontenthorizontallyalignedmodifier__ideal__default
Size Modifier Simple Wrap Content Vertically Aligned Modifier
Size Modifier Simple Wrap Content Vertically Aligned Modifier
sizemodifier-simplewrapcontentverticallyalignedmodifier__ideal__default

UI

Graphics

Text

Unit

Animation

AnimatedVisibility

Animated Visibility Add Animated Visibility To Generic Transition Sample
Animated Visibility Add Animated Visibility To Generic Transition Sample
animatedvisibility-addanimatedvisibilitytogenerictransitionsample__ideal__default
Animated Visibility Animated Visibility Lazy Column Sample
Animated Visibility Animated Visibility Lazy Column Sample
animatedvisibility-animatedvisibilitylazycolumnsample__ideal__default
Animated Visibility Animated Visibility Veil
Animated Visibility Animated Visibility Veil
animatedvisibility-animatedvisibilityveil__ideal__default
Animated Visibility Animated Visibility With Boolean Visible Param No Receiver
Animated Visibility Animated Visibility With Boolean Visible Param No Receiver
animatedvisibility-animatedvisibilitywithbooleanvisibleparamnoreceiver__ideal__default
Animated Visibility Animate Enter Exit Partial Content
Animated Visibility Animate Enter Exit Partial Content
animatedvisibility-animateenterexitpartialcontent__ideal__default
Animated Visibility AV Column Scope With Mutable Transition State
Animated Visibility AV Column Scope With Mutable Transition State
animatedvisibility-avcolumnscopewithmutabletransitionstate__ideal__default
Animated Visibility AV Scope Animate Enter Exit
Animated Visibility AV Scope Animate Enter Exit
animatedvisibility-avscopeanimateenterexit__ideal__default
Animated Visibility Captured Animated Visibility Mutable Transition State Sample
Animated Visibility Captured Animated Visibility Mutable Transition State Sample
animatedvisibility-capturedanimatedvisibilitymutabletransitionstatesample__ideal__default
Animated Visibility Captured Animated Visibility Sample
Animated Visibility Captured Animated Visibility Sample
animatedvisibility-capturedanimatedvisibilitysample__ideal__default
Animated Visibility Column Animated Visibility Sample
Animated Visibility Column Animated Visibility Sample
animatedvisibility-columnanimatedvisibilitysample__ideal__default
Animated Visibility Deferred Animated Visibility Sample
Animated Visibility Deferred Animated Visibility Sample
animatedvisibility-deferredanimatedvisibilitysample__ideal__default
Animated Visibility Expand In Shrink Out Sample
Animated Visibility Expand In Shrink Out Sample
animatedvisibility-expandinshrinkoutsample__ideal__default
Animated Visibility Expand Shrink Vertically Sample
Animated Visibility Expand Shrink Vertically Sample
animatedvisibility-expandshrinkverticallysample__ideal__default
Animated Visibility Fade Transition
Animated Visibility Fade Transition
animatedvisibility-fadetransition__ideal__default
Animated Visibility Fully Loaded Transition
Animated Visibility Fully Loaded Transition
animatedvisibility-fullyloadedtransition__ideal__default
Animated Visibility Horizontal Transition Sample
Animated Visibility Horizontal Transition Sample
animatedvisibility-horizontaltransitionsample__ideal__default
Animated Visibility Scaled Enter Exit
Animated Visibility Scaled Enter Exit
animatedvisibility-scaledenterexit__ideal__default
Animated Visibility Slide In Out Sample
Animated Visibility Slide In Out Sample
animatedvisibility-slideinoutsample__ideal__default
Animated Visibility Slide Transition
Animated Visibility Slide Transition
animatedvisibility-slidetransition__ideal__default

Animation Core

Animation Graphics

Runtime

Runtime Saveable

Material

download all (.zip)

Report a problem

Two trackers — pick whichever owns the thing that is wrong.