Explore the
 Samples
Get inspired and accelerate your development with these
beautiful sample screens and flows.
Watch this 1 minute video to learn about our Samples!
Mobile
Web
Mobile
Web
No samples found...
Searching...
UI Samples
Featured
Content
Data
Details
Form
Lists
Flows
AccountTracker
Keep track of how much you’re spending with progress bars divided into categories.
Aliases
Springboard
Display the main screens of your application with a Springboard, that uses iconography for easy association.
Aliases
WalletList
An overview of your accounts and cards in a detailed list.
Aliases
AccountOverview
A dashboard that provides an overview of your account status.
Aliases
AccountTracker
Keep track of how much you’re spending with progress bars divided into categories.
Aliases
EventDashboard
Get a visual overview of scheduled events or calls. Use the tabs to get different views.
Aliases
EventList
Scroll to see a list of upcoming events. The counters give you an overview of the number of different event types.
Aliases
LocationGallery
A location detail screen, with emphasis on photos displayed through a carousel.
Aliases
ProductDashboard
A dashboard-like product catalogue with a carousel to browse through a selection of products.
Aliases
ProductGallery
Use the carousel to browse through a product catalogue.
Aliases
OfferCountdown
A beautiful design with a countdown timer for an expiring offer.
Aliases
OrderConfirmation
Confirmation of an order, with the details of its itinerary and estimated delivery.
Aliases
SettingsMenu
A gorgeous menu with drop down options for enhanced usability.
Aliases
TaskList
An elegant and simple way to keep track of your tasks.
Aliases
BalanceChart
An animated line chart to display the progress of your balance.
Used Patterns
Animate
Carousel
Aliases
BalanceReport
A chart and account summary for a visual overview of your account.
Aliases
AccountDashboard
A visually appealing dashboard with the summary of an account state.
Aliases
AccountDetails
A beautiful design with tabs to showcase an account’s main areas and their relevant sections.
Aliases
ChatMessage
A chat message implementation with file attachment and immediate preview.
Aliases
CreditLimit
User a slider to select your credit limit, as well as other credit options.
Aliases
DeliveryTimeline
A timeline that displays your package itinerary.
Aliases
HomeScreen
This graphic-infused screen gives you a visual overview of your account.
Aliases
LocationBoard
A beautifully-designed board that displays different locations using photos to highlight them.
Aliases
Location&Contact
A gallery of locations with their business hours available and contact button.
Aliases
LocationDetail
Get an overview of a location that is selected in the map. See details such as business hours, contact information, and reviews.
Aliases
ProductDetail
A complete description of a specific product with tabs for an enhanced experience.
Aliases
ProductOverview
Provide an overview of different products, including featured photos, highlights, and reviews.
Aliases
ProfileSettings
A profile area with an overview of different sections where you can check and manage your information.
Aliases
ProfileSummary
A simple and elegant summary of your profile information.
Aliases
ProjectDetails
A details screen with tabs to section information and keep track of projects.
Aliases
SiteDetail
A detail screen of a location displayed in the map.
Aliases
SocialProfile
A social profile with a short bio, and a gallery displaying featured photos.
Aliases
Springboard
Display the main screens of your application with a Springboard, that uses iconography for easy association.
Aliases
ContactForm
A simple and easy-to-use form for a user to get in touch.
Used Patterns
Separator
Aliases
EditAccount
Edit your information in the profile details section of a chat application.
Aliases
ProfileDetails
Check your information in a profile details section.
Aliases
RegistrationForm
A simple form with the most relevant fields required for a registration.
Used Patterns
Tabs
MarginContainer
Card
Columns2
Aliases
SocialForm
A form with the most commons fields, and toggle options for a visual selection.
Used Patterns
AnimatedLabel
Aliases
CallList
A list of your most recent calls, and the most frequent calls emphasized.
Aliases
ChatList
Browse through the cards displaying different products and their rating.
Aliases
ContactList
A list of contacts with additional information such as location and time.
Aliases
DeliveryTracker
Add a timeline to your map. This could display a delivery tracking, or a route details.
Used Patterns
Sidebar
TimelineItem
Aliases
EventCalendar
A calendar and an event list in a single screen for efficient time management.
Aliases
EventsHistory
A timeline displaying past events, and where they took place.
Used Patterns
TimelineItem
Section
Aliases
Interviews
A card deck that you can swipe in different directions and provide a different response or action, according to their movement.
Aliases
Location
The map view displays all location pins. Additionally, you can go through the list of locations and select them for a map close-up.
Aliases
LocationCarousel
Browse through available locations and see them displayed on the map.
Aliases
MeetingsList
A list of upcoming meetings in an elegant dark screen.
Aliases
NotificationList
An elegant list that displays notifications received, with visual indication of their status.
Aliases
ProductCatalogue
Browse through the cards displaying different products and their rating.
Aliases
ProductList
A list of products that you can buy and see further details.
Aliases
ProjectList
A board-like list to track projects and tasks, through a progress bar.
Aliases
RequestManagement
A dashboard-like request system to approve or reject requests.
Aliases
TransactionHistory
See a list of your most recent transactions and their receipts.
Aliases
WalletList
An overview of your accounts and cards in a detailed list.
Aliases
Onboarding
Use the Onboarding to showcase your app’s main features with a flow that’s available to first-time users to explain how the application works. 
When to Use
Use the Onboarding flow to showcase your app’s main features with a set of screens. The flow is available to first-time users to explain how the application works. 
How to use
Use the Redirector_Onboarding screen to validate if it is the first time the user opens the app, and to redirect them to the Onboarding screen. Use the Onboarding screen to add the information that illustrates your app.
DOWNLOAD
Used Patterns
Aliases
PasswordReset
Validate the security code and set your new password, in an easy and simple way.
When to Use
Use the Password Reset flow to easily integrate a password reset scenario into your app.
How to use
Use the Password Reset flow to request a validation code which will be sent to the user’s email. After validation, the user is prompted to reset the password and is redirected.
DOWNLOAD
Learn More
Used Patterns
Aliases
PinCode
Make your users’ life simpler by providing a simple pin code to quickly login, validate your users and redirect them to any screen of your choice.
This Sample Flow uses the Pincode component.
When to Use
Use the Pin Code flow when you need to frequently authenticate a user and redirect them to another screen or flow without the hassle of a lengthier password. A pin code provides both security and ease ensuring a greater user experience!
How to use
Use the Redirector_Pincode screen to validate and redirect the user to the correct screen. The RegisterPin screen requests a pin code registration. Use the Unlock screen to have the user validate their pin code.
DOWNLOAD
Used Patterns
Aliases
UserRegistration
Register and welcome a new user to your application, in an easy and simple way.
When to Use
Use the User Registration flow when you want to add a stylish and customizable user registration form in your application. This will allow you to add users to a database and collect their data.
How to use
Use the UserRegistrationRedirector screen to welcome users to a sign-up process. The RegisterUser screen provides a form with all the necessary fields to create a new user. Use the ThankYouScreen screen to inform the user of a successful sign-up.
DOWNLOAD
Used Patterns
Aliases
Preview in Tablet
Close
 
Built with OutSystems - All rights reserved.
back to top
Silk UI Framework Simulation Device
Resize the window to preview the page in target devices.
Open the settings to change the simulation device options.
Click here to see your activities