---
updatedAt: 2026-04-08T21:48:16.000Z
agentTools:
  projectIndex: https://docs.pelcro.com/v2.4/llms.txt
---

# UI Showcase

Browse screenshots of Pelcro's default UI flow and custom UI implementations from client projects.

Use this page to review Pelcro's default UI flow and compare it with custom UI implementations from client projects.

* Browse the default flow from product selection through the customer dashboard.
* Review custom implementations for paywalls, checkout steps, account pages, dashboards, and payment updates.

# Default UI

## Product Selection

<Image align="center" width="500px" src="https://files.readme.io/6f35dac4afaa46193f7ff1563d108d73fdf860d205fdb0a9ebc3db393ad0cdf5-Screenshot_2025-08-15_at_3.17.40_PM.png" />

## Plan Selection

<Image align="center" width="500px" src="https://files.readme.io/e5f7d31239eb94f1879abe3e6bb1c6ba4598b02758ab9c17bd7a37796a1da2eb-Screenshot_2025-08-15_at_3.20.28_PM.png" />

## Registration and Login

<Image align="center" width="500px" src="https://files.readme.io/a9c25de2fca0ca6f3e2d5732eae5f8d758d39f8605ab689ef8c006677e336626-Screenshot_2025-08-15_at_3.22.54_PM.png" />

<Image align="center" width="500px" src="https://files.readme.io/8a7a8f3634077d8909ece15e70941fe452257e80c489def23d860e687d01a4f5-Screenshot_2025-08-15_at_11.01.26_PM.png" />

## Address Selection

<Image align="center" width="500px" src="https://files.readme.io/85074c8ca143b58b7d30f446af4495c85f2de337c571dd80d804177ac706ca8f-Screenshot_2025-08-15_at_10.29.49_PM.png" />

## Checkout and Payment

<Image align="center" src="https://files.readme.io/4a2333fb260826924a4870caa499e9608009e6f13263b57fb21b258ee1ee7818-Screenshot_2025-08-15_at_10.25.50_PM.png" />

<Image align="center" src="https://files.readme.io/cefd0303f0334ae955816e2b304dd09ce6163f252ab479eefc3ec9d0c21dedd0-Screenshot_2025-08-15_at_10.32.09_PM.png" />

## Customer Dashboard

<Image align="center" width="500px" src="https://files.readme.io/01ac584655e34d00781dd059008a11b096fe48b37884c8866f5fc00769443b1c-Screenshot_2025-08-15_at_4.14.17_PM.png" />

<Image align="center" src="https://files.readme.io/9491ebda0860a42cb9399f9c4f77d1be909d846907df7ad3b24bc476a8634538-Screenshot_2025-08-15_at_3.29.36_PM.png" />

<Image align="center" src="https://files.readme.io/089947240f2907d4ee236bd3f1bc5f12db7bc822d51553e311e07d60822c569b-Screenshot_2025-08-15_at_4.07.51_PM.png" />

<Image align="center" src="https://files.readme.io/d8a03072df2a173a8a5ce26177202e0a80b57392c299533381c59754e41e2de2-Screenshot_2025-08-15_at_10.34.05_PM.png" />

<Image align="center" src="https://files.readme.io/98ae7c7e0cd048f9bc40a7dcda949b3f7e6510227d2118a6e9981f0b020f14e8-Screenshot_2025-08-15_at_10.53.21_PM.png" />

<Image align="center" src="https://files.readme.io/591ceb013b53174a2b5eaa5b543ea0fad74929af637423d3408461f3ed352632-Screenshot_2025-08-15_at_10.58.31_PM.png" />

<Image align="center" src="https://files.readme.io/b244c56029ea2340f81fd2efef4203173be6c1f37edfd5dc03d3bc84e5760971-Screenshot_2025-08-15_at_10.59.13_PM.png" />

# Custom UI Examples

## Paywall

### Wide meter paywall

Frieze's metered Paywall

![1446](https://files.readme.io/08ac17f-Screen_Shot_2021-04-12_at_4.18.53_PM.png "Screen Shot 2021-04-12 at 4.18.53 PM.png")

EdWeek's metered paywall

![1448](https://files.readme.io/f7427f0-Screen_Shot_2021-04-12_at_4.21.46_PM.png "Screen Shot 2021-04-12 at 4.21.46 PM.png")

### Regular Metered Paywall

TheFashionLaw's metered paywall, using the Out-of-the-Box UI

![1324](https://files.readme.io/52a7cc8-Screen_Shot_2021-04-12_at_4.23.05_PM.png "Screen Shot 2021-04-12 at 4.23.05 PM.png")

### Embedded paywalls

EdWeek's Embedded Paywall

![923](https://files.readme.io/f248112-Screen_Shot_2021-04-14_at_7.16.10_PM.png "Screen Shot 2021-04-14 at 7.16.10 PM.png")

Frieze's Embedded Paywall

![1741](https://files.readme.io/ad2aaa7-Screen_Shot_2021-04-14_at_7.15.21_PM.png "Screen Shot 2021-04-14 at 7.15.21 PM.png")

## Product selection

EdWeek's Product selection modal

![853](https://files.readme.io/ffc5682-Screen_Shot_2021-04-14_at_7.16.40_PM.png "Screen Shot 2021-04-14 at 7.16.40 PM.png")

Frieze's Product selection modal

![907](https://files.readme.io/eaedd58-Screen_Shot_2021-04-14_at_7.17.05_PM.png "Screen Shot 2021-04-14 at 7.17.05 PM.png")

L'Actualite's Product selection modal

![2880](https://files.readme.io/cef935d-Screen_Shot_2020-03-10_at_10.02.25_PM.png "Screen Shot 2020-03-10 at 10.02.25 PM.png")

## Plan selection

EdWeek's Plan selection modal

![497](https://files.readme.io/414f280-Screen_Shot_2021-04-14_at_7.18.11_PM.png "Screen Shot 2021-04-14 at 7.18.11 PM.png")

Frieze's Plan selection modal

![907](https://files.readme.io/be04591-Screen_Shot_2021-04-14_at_7.18.01_PM.png "Screen Shot 2021-04-14 at 7.18.01 PM.png")

L'Actualite's Plan selection modal

![725](https://files.readme.io/1612b7e-Screen_Shot_2021-04-15_at_6.36.11_PM.png "Screen Shot 2021-04-15 at 6.36.11 PM.png")

## Registration

EdWeek's Account creation modal

![933](https://files.readme.io/e7e8558-Screen_Shot_2021-04-14_at_7.19.01_PM.png "Screen Shot 2021-04-14 at 7.19.01 PM.png")

Frieze's Account creation modal

![585](https://files.readme.io/e2c3fc5-Screen_Shot_2021-04-14_at_7.19.18_PM.png "Screen Shot 2021-04-14 at 7.19.18 PM.png")

L'Actualite's Account creation page

![1920](https://files.readme.io/0907f92-Screen_Shot_2021-04-15_at_6.32.59_PM.png "Screen Shot 2021-04-15 at 6.32.59 PM.png")

## Login

EdWeek's Login modal

![433](https://files.readme.io/1c01d4c-Screen_Shot_2021-04-14_at_7.20.35_PM.png "Screen Shot 2021-04-14 at 7.20.35 PM.png")

Frieze's Login modal

![469](https://files.readme.io/1472dff-Screen_Shot_2021-04-14_at_7.20.14_PM.png "Screen Shot 2021-04-14 at 7.20.14 PM.png")

## Address

Frieze's Address modal

![591](https://files.readme.io/b5c1c66-Screen_Shot_2021-04-14_at_7.24.52_PM.png "Screen Shot 2021-04-14 at 7.24.52 PM.png")

L'Actualite's Address modal

![2880](https://files.readme.io/d325f74-Screen_Shot_2020-03-10_at_10.03.09_PM.png "Screen Shot 2020-03-10 at 10.03.09 PM.png")

## Payment

L'Actualite's Payment modal

![2880](https://files.readme.io/b79ee2f-Screen_Shot_2020-03-10_at_10.03.34_PM.png "Screen Shot 2020-03-10 at 10.03.34 PM.png")

## Dashboards

### Customer's Dashboard

![2880](https://files.readme.io/ae5443b-Screen_Shot_2020-03-10_at_10.14.47_PM.png "Screen Shot 2020-03-10 at 10.14.47 PM.png")

Frieze's Customer Dashboard

![1616](https://files.readme.io/75bf7c3-Screen_Shot_2021-04-14_at_7.22.35_PM.png "Screen Shot 2021-04-14 at 7.22.35 PM.png")

L'Actualite's Customer Dashboard

![2880](https://files.readme.io/a3cf253-Screen_Shot_2020-03-10_at_10.04.41_PM.png "Screen Shot 2020-03-10 at 10.04.41 PM.png")

## Customer's Subscription page

Frieze's Membership page

![1577](https://files.readme.io/271d03f-Screen_Shot_2021-04-14_at_7.26.07_PM.png "Screen Shot 2021-04-14 at 7.26.07 PM.png")

L'Actualite's Membership page

![2880](https://files.readme.io/f2e40a5-Screen_Shot_2020-03-10_at_10.05.01_PM.png "Screen Shot 2020-03-10 at 10.05.01 PM.png")

## Saved & Follow

EdWeek's Saved\&Followed Dashboard

![1098](https://files.readme.io/f873e08-Screen_Shot_2021-04-15_at_6.23.33_PM.png "Screen Shot 2021-04-15 at 6.23.33 PM.png")

## Search Articles

EdWeek's Search Articles page

![1162](https://files.readme.io/42a2576-Screen_Shot_2021-04-15_at_6.25.04_PM.png "Screen Shot 2021-04-15 at 6.25.04 PM.png")

InsideHigherEd's Event's page

![2880](https://files.readme.io/b8334dd-Screen_Shot_2020-05-22_at_8.50.30_AM.png "Screen Shot 2020-05-22 at 8.50.30 AM.png")

## Newsletter Configuration

InsideHigherEd's Newsletters page

![2880](https://files.readme.io/ea4b878-Screen_Shot_2020-05-22_at_9.11.28_AM.png "Screen Shot 2020-05-22 at 9.11.28 AM.png")

## Update payment

Frieze's Update payment

![589](https://files.readme.io/950e341-Screen_Shot_2021-04-14_at_7.27.10_PM.png "Screen Shot 2021-04-14 at 7.27.10 PM.png")

L'Actualite's Update payment

![2880](https://files.readme.io/229c5e7-Screen_Shot_2020-03-10_at_10.05.11_PM.png "Screen Shot 2020-03-10 at 10.05.11 PM.png")

Frieze's Update password section

![591](https://files.readme.io/e3a5967-Screen_Shot_2021-04-14_at_7.28.33_PM.png "Screen Shot 2021-04-14 at 7.28.33 PM.png")

Frieze's Update password section

![1095](https://files.readme.io/82f4821-Screen_Shot_2021-04-14_at_7.28.00_PM.png "Screen Shot 2021-04-14 at 7.28.00 PM.png")

## Related pages

* [Overview](https://docs.pelcro.com/v2.4/docs/overview)
* [Subscriptions](https://docs.pelcro.com/v2.4/docs/subscriptions)
* [Payments](https://docs.pelcro.com/v2.4/docs/payments)
* [Going Live](https://docs.pelcro.com/v2.4/docs/going-live)

## Related pages

* [Overview](https://docs.pelcro.com/v2.4/docs/overview)
* [Subscriptions](https://docs.pelcro.com/v2.4/docs/subscriptions)
* [Payments](https://docs.pelcro.com/v2.4/docs/payments)
* [Going Live](https://docs.pelcro.com/v2.4/docs/going-live)

## Related pages

* [Overview](https://docs.pelcro.com/v2.4/docs/overview)
* [Subscriptions](https://docs.pelcro.com/v2.4/docs/subscriptions)
* [Payments](https://docs.pelcro.com/v2.4/docs/payments)
* [Going Live](https://docs.pelcro.com/v2.4/docs/going-live)

# Sibling pages

* [React Elements](https://docs.pelcro.com/v2.4/docs/react-elements.md)
* [Style Overrides: Add CSS Specificity](https://docs.pelcro.com/v2.4/docs/style-overrides-add-css-specificity-copy.md)
* [eCommerce](https://docs.pelcro.com/v2.4/docs/ecommerce-ui.md)
* [URL Triggers](https://docs.pelcro.com/v2.4/docs/react-elements-url-triggers.md)