Components
Last updated
Last updated
Title text is larger and more prominent than other text types. Titles draw attention, so you should limit how many title text elements are on your page.
Body text can be used for paragraphs of text. It is sized smaller than title text and can be inserted anywhere.
Legal text is a special body text type designed for inserting your legal terms and conditions. Legal text has support for links
A text block is a paragraph of text on a colored background. Text blocks support fill color, border color, border radius, and border width.
Use Text Blocks when you want text to stand out against the background.
This component takes each line of text provided and constructs a bulleted list. Lists support 1 icon that is used for each item in the list.
This component allows you to have a list with different icons for each bullet AND/OR images embedded in the bullet.
By default, each new list item has an icon and a line of text. You can remove or update the icon, add or remove text, and add or remove images from the list item.
Product field components are only available within the Repeating Product Group. They reference a line of text that is configured per product.
Learn more about Product Fields: Product Fields
Images can be inserted anywhere in the page. They can be fixed width and height or can size to fit the container.
If you want to upload a logo, upload a small PNG file and set height and width.
If you want a background image, upload an image to the Background section and size to "Fill"
Pages support .PNG, .JPG, or .JPEG files. No .GIF, .WEBP, or .AVIF support.
Enterprise Feature
Hosted Images are available only on Enterprise plans. Contact your Nami account rep to learn more.
Hosted Images are references to image URLs you host in your own system.
Nami supports a small library of icons preloaded. The icons you see in the previewer won't match each device exactly.
Android devices use Material Symbols and iOS devices use SFSymbols.
Icons have a font size and font color associated.
Premium Feature
Carousel is a Premium feature. You must be on our Team plan or above to use.
See Capabilities to learn more.
The carousel allows you to add a gallery of images representing your product. Each carousel slide supports 2 pieces of text and a background image.
The carousel supports up to 10 slides.
The login button allows you to start your app sign in flow from the page. Your code is responsible for implementing the sign in process.
If your app requires all users to be logged in before they see a page, you don't need this component.
The Restore Purchases button will kick off the native platform Restore process.
The Close Button will close the page. Typically this button is located in the Header at top left or right but you can also insert a close button anywhere else in the page.
Close Button can support an icon or short text.
A successful purchase will also close the page.
If you don't want users to be able to close the paywall and require purchase to continue, you want to implement a "hard" paywall.
Premium Feature
Purchase Button is a Premium feature. You must be on any paid plan to use.
See Capabilities to learn more.
The Purchase Button is attached to the Selected Styling capability.
By adding a purchase button, you change the paywall from One-Tap Purchase Mode to Select to Purchase Mode
In Select to Purchase Mode, the user must select a product and then tap the Purchase button to start the purchase flow. By default one product is always selected but they can tap between products to decide.
A URL Button allows you to link users to a web URL when the element is clicked.
Web URLs look like https://sampleapp.com/link. If you want to link the user internally inside your app, use a Deeplink Button.
Premium Feature
Deeplink Button is a Premium feature. You must be on our Team plan or above to use.
See Capabilities to learn more.
A Deeplink Button allows you to navigate users within your app by providing a link to another screen. Deeplink URLs look like sampleapp://link/settings
Play Control allows you to add a custom styled Play/Pause button to the page to control the Video component.
Your page must have a Video added first.
Volume Control allows you to add a custom styled Mute/Unmute button to the page to control the Video component.
Your page must have a Video added first.
A radio button is a visual indicator that a product is selected.
A group is a way of organizing content. The Content Section is a group that has one set of direction, spacing, padding, and margin settings. If you want to group content with different settings, you will want to add a group.
A spacer is a component that takes up space. It has no fill color or styling but is just used to align content properly on the page.
A spacer without height or width will grow to take up all the available space in the container.
A spacer with height or width will use the height / width values specified.
The Repeating Product Group is a special type of group. It displays lists of products and repeats every item in the group once for each product.
Premium Feature
Product Group Toggle is a Premium feature. You must be on our Business plan or above to use.
See Capabilities to learn more.
A Product Group Toggle allow you to organize multiple products into groups that the user can switch between.
To add a Product Group Toggle, you must add the Product Groups capability.
A divider is a thin line used to visually divide content.
Conditions allow you to control when components are seen. If the visibility rules are met, the component inside the condition will be shown.
Badges are a special component that are only available on Products. A badge is a text container that is often used with Featured Styling.
Product Field
Terms Checkbox
