1<!DOCTYPE html><html><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><link rel="shortcut icon" href="/favicon.png" data-next-head=""/><meta property="og:site_name" content="UI Initiative" data-next-head=""/><meta name="twitter:card" content="summary_large_image" data-next-head=""/><meta name="twitter:site" content="@uiinitiative" data-next-head=""/><meta name="twitter:creator" content="@uiinitiative" data-next-head=""/><link rel="canonical" href="https://uiinitiative.com/catalog" data-next-head=""/><title data-next-head="">Catalog | UI Initiative</title><meta name="description" content="Premium Templates & Plugins" data-next-head=""/><meta property="og:title" content="Catalog | UI Initiative" data-next-head=""/><meta property="og:description" content="Premium Templates & Plugins" data-next-head=""/><meta property="og:image" content="https://uiinitiative.com/images/share-banner.jpg" data-next-head=""/><meta name="twitter:title" content="Catalog | UI Initiative" data-next-head=""/><meta name="twitter:description" content="Premium Templates & Plugins" data-next-head=""/><meta name="twitter:image" content="https://uiinitiative.com/images/share-banner.jpg" data-next-head=""/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true"/><meta name="theme-color" content="#0F0F11"/><link rel="preload" href="/_next/static/css/10fa8ce31747c55b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/10fa8ce31747c55b.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
1<script src="/_next/static/chunks/webpack-6ffd07a3317375c1.js" defer=""></script>
1<script src="/_next/static/chunks/framework-292291387d6b2e39.js" defer=""></script>
1<script src="/_next/static/chunks/main-0e21001e2c71e4ad.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-48303841cc9749a6.js" defer=""></script>
1<script src="/_next/static/chunks/678-3db05304874832a2.js" defer=""></script>
1<script src="/_next/static/chunks/pages/catalog-080e368153eaf2c0.js" defer=""></script>
1<script src="/_next/static/u5whapeaTqPeZw4gKoi_S/_buildManifest.js" defer=""></script>
1<script src="/_next/static/u5whapeaTqPeZw4gKoi_S/_ssgManifest.js" defer=""></script>
1</head><body><link rel="preload" as="image" href="/images/logo.svg"/><link rel="preload" as="image" href="/images/techs/swiper.svg"/><link rel="preload" as="image" href="/images/techs/framework7.svg"/><link rel="preload" as="image" href="/images/techs/react.svg"/><link rel="preload" as="image" href="/images/techs/vue.svg"/><link rel="preload" as="image" href="/images/techs/svelte.svg"/><link rel="preload" as="image" href="/images/techs/pwa.svg"/><link rel="preload" as="image" href="/items/super-flow/icon.svg"/><link rel="preload" as="image" href="/items/expo-slider/icon.svg"/><link rel="preload" as="image" href="/items/cards-stack-slider/icon.svg"/><link rel="preload" as="image" href="/items/material-you-slider/icon.svg"/><link rel="preload" as="image" href="/items/tinder-slider/icon.svg"/><link rel="preload" as="image" href="/items/shaders-slider/icon.svg"/><link rel="preload" as="image" href="/items/slicer-slider/icon.svg"/><link rel="preload" as="image" href="/items/password-input/icon.svg"/><link rel="preload" as="image" href="/items/shutters-slider/icon.svg"/><link rel="preload" as="image" href="/items/stories-slider/icon.svg"/><link rel="preload" as="image" href="/items/keypad/icon.svg"/><link rel="preload" as="image" href="/items/spring-slider/icon.svg"/><link rel="preload" as="image" href="/items/lamp-tabbar/icon.svg"/><link rel="preload" as="image" href="/items/panorama-slider/icon.svg"/><link rel="preload" as="image" href="/items/fashion-slider/icon.svg"/><link rel="preload" as="image" href="/items/carousel-slider/icon.svg"/><link rel="preload" as="image" href="/items/triple-slider/icon.svg"/><link rel="preload" as="image" href="/items/seven-burger/icon.svg"/><link rel="preload" as="image" href="/items/travel-slider/icon.svg"/><link rel="preload" as="image" href="/items/expanding-collection/icon.svg"/><link rel="preload" as="image" href="/items/tel-input/icon.svg"/><link rel="preload" as="image" href="/items/avatar-picker/icon.svg"/><link rel="preload" as="image" href="/items/espresso-app/icon.svg"/><link rel="preload" as="image" href="/items/backlogger/icon.svg"/><link rel="preload" as="image" href="/items/cookingo/icon.svg"/><link rel="preload" as="image" href="/items/posters-slider/icon.svg"/><link rel="preload" as="image" href="/items/paper-onboarding/icon.svg"/><link rel="preload" as="image" href="/items/whatsapp-f7-react/icon.svg"/><link rel="preload" as="image" href="/items/appstore-f7-react/icon.svg"/><link rel="preload" as="image" href="/items/swiper-3d-slicer/icon.svg"/><link rel="preload" as="image" href="/items/swiper-3d-pagination/icon.svg"/><link rel="preload" as="image" href="/images/n4w-logo.svg"/><link rel="preload" as="image" href="/images/github-logo.svg"/><div id="__next"><div class="page-top-bg"></div><div class="sticky top-4 z-30 mx-auto w-full max-w-screen-md px-2 pt-0 md:px-6"><div class="mx-auto flex h-16 max-w-screen-xl items-center justify-between rounded-full border border-white/20 bg-[#222]/60 px-4 backdrop-blur backdrop-saturate-200"><div class="flex h-full items-center"><a class="relative z-10 block h-8 w-8" href="/"><img src="/images/logo.svg" alt="Logo" class="h-full w-full"/></a><nav class="sml:ml-0 ml-4 flex items-center justify-center gap-4 text-sm sm:absolute sm:inset-0"><a class="hover:text-primary duration-150" href="/catalog">Catalog</a><a class="hover:text-primary duration-150" href="/#all-access">All-access</a><a class="hover:text-primary duration-150" href="/blog">Blog</a></nav></div><div class="flex items-center"><button class="group relative rounded-full select-none text-white cursor-pointer !no-underline duration-200 focus:ring-secondary focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-none border border-white/20 hover:bg-white/10 active:bg-white/5 h-10 text-sm px-6 !px-4 sm:!px-6"><span class="relative z-10 flex h-full w-full items-center justify-center leading-none transition-opacity duration-300">Sign in</span><div class="h-6 w-6 animate-spin rounded-full border-4 border-white border-b-transparent absolute top-1/2 left-1/2 -mt-3 -ml-3 transition-opacity duration-300 opacity-0"></div></button></div></div></div>
1<div class="max-w-screen-xl relative mx-auto scroll-mt-32 px-4 md:px-8 z-10 my-16"><h1 style="text-wrap:balance" class="mb-8 text-center text-4xl font-bold !leading-[1.25] sm:text-5xl lg:mb-12 ">Catalog</h1><div class="-ml-1 -mr-1 -mt-1 mb-8 flex flex-wrap items-center justify-center gap-1 sm:gap-4 lg:-mt-4 lg:mb-12"><div class="relative select-none overflow-hidden border px-2 py-1 text-sm font-medium cursor-pointer hover:bg-white/10 active:bg-white/5 " style="border-color:rgba(255, 255, 255, 0.2);color:rgba(255, 255, 255, 0.75)"><span class="absolute left-0 top-0 z-0 h-full w-full opacity-10" style="background-color:transparent"></span><div class="relative z-10 flex items-center"><img class="mr-1.5 h-5 w-5" src="/images/techs/swiper.svg" width="22" height="22" alt="Swiper" style="filter:grayscale(1)"/><span>Swiper</span></div></div><div class="relative select-none overflow-hidden border px-2 py-1 text-sm font-medium cursor-pointer hover:bg-white/10 active:bg-white/5 " style="border-color:rgba(255, 255, 255, 0.2);color:rgba(255, 255, 255, 0.75)"><span class="absolute left-0 top-0 z-0 h-full w-full opacity-10" style="background-color:transparent"></span><div class="relative z-10 flex items-center"><img class="mr-1.5 h-5 w-5" src="/images/techs/framework7.svg" width="22" height="22" alt="Framework7" style="filter:grayscale(1)"/><span>Framework7</span></div></div><div class="relative select-none overflow-hidden border px-2 py-1 text-sm font-medium cursor-pointer hover:bg-white/10 active:bg-white/5 " style="border-color:rgba(255, 255, 255, 0.2);color:rgba(255, 255, 255, 0.75)"><span class="absolute left-0 top-0 z-0 h-full w-full opacity-10" style="background-color:transparent"></span><div class="relative z-10 flex items-center"><img class="mr-1.5 h-5 w-5" src="/images/techs/react.svg" width="22" height="22" alt="React" style="filter:grayscale(1)"/><span>React</span></div></div><div class="relative select-none overflow-hidden border px-2 py-1 text-sm font-medium cursor-pointer hover:bg-white/10 active:bg-white/5 " style="border-color:rgba(255, 255, 255, 0.2);color:rgba(255, 255, 255, 0.75)"><span class="absolute left-0 top-0 z-0 h-full w-full opacity-10" style="background-color:transparent"></span><div class="relative z-10 flex items-center"><img class="mr-1.5 h-5 w-5" src="/images/techs/vue.svg" width="22" height="22" alt="Vue" style="filter:grayscale(1)"/><span>Vue</span></div></div><div class="relative select-none overflow-hidden border px-2 py-1 text-sm font-medium cursor-pointer hover:bg-white/10 active:bg-white/5 " style="border-color:rgba(255, 255, 255, 0.2);color:rgba(255, 255, 255, 0.75)"><span class="absolute left-0 top-0 z-0 h-full w-full opacity-10" style="background-color:transparent"></span><div class="relative z-10 flex items-center"><img class="mr-1.5 h-5 w-5" src="/images/techs/svelte.svg" width="22" height="22" alt="Svelte" style="filter:grayscale(1)"/><span>Svelte</span></div></div><div class="relative select-none overflow-hidden border px-2 py-1 text-sm font-medium cursor-pointer hover:bg-white/10 active:bg-white/5 " style="border-color:rgba(255, 255, 255, 0.2);color:rgba(255, 255, 255, 0.75)"><span class="absolute left-0 top-0 z-0 h-full w-full opacity-10" style="background-color:transparent"></span><div class="relative z-10 flex items-center"><img class="mr-1.5 h-5 w-5" src="/images/techs/pwa.svg" width="22" height="22" alt="PWA" style="filter:grayscale(1)"/><span>PWA</span></div></div></div><div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3"><a id="catalog-super-flow" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 catalog-item-featured " href="/catalog/super-flow"><div class="catalog-item-featured-label bg-secondary absolute top-0 right-0 px-2 py-1 text-xs font-semibold text-white">Featured</div><div class="catalog-item-featured-borders pointer-events-none absolute top-0 left-0 z-10 h-full w-full"><div></div><div></div><div></div><div></div></div><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/super-flow/icon.svg" alt="Super Flow" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Super Flow</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Where slides come alive</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/super-flow/screenshots/1.jpg" alt="Super Flow" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/super-flow/screenshots/2.jpg" alt="Super Flow" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/super-flow/screenshots/3.jpg" alt="Super Flow" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-expo-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/expo-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/expo-slider/icon.svg" alt="Expo Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Expo Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Parallax & scale effects slider</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/expo-slider/screenshots/1.jpg" alt="Expo Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/expo-slider/screenshots/2.jpg" alt="Expo Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/expo-slider/screenshots/3.jpg" alt="Expo Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-cards-stack-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/cards-stack-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/cards-stack-slider/icon.svg" alt="Cards Stack Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Cards Stack Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Cards Stack slider made with Swiper</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/cards-stack-slider/screenshots/1.jpg" alt="Cards Stack Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/cards-stack-slider/screenshots/2.jpg" alt="Cards Stack Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/cards-stack-slider/screenshots/3.jpg" alt="Cards Stack Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-material-you-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/material-you-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/material-you-slider/icon.svg" alt="Material You Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Material You Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Material You carousel made with Swiper</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/material-you-slider/screenshots/1.jpg" alt="Material You Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/material-you-slider/screenshots/2.jpg" alt="Material You Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/material-you-slider/screenshots/3.jpg" alt="Material You Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-tinder-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/tinder-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/tinder-slider/icon.svg" alt="Tinder Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Tinder Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Tinder card-style interactions and effects</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/tinder-slider/screenshots/1.jpg" alt="Tinder Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/tinder-slider/screenshots/2.jpg" alt="Tinder Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/tinder-slider/screenshots/3.jpg" alt="Tinder Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-shaders-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/shaders-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/shaders-slider/icon.svg" alt="Shaders Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Shaders Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Stunning WebGL image transitions</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/shaders-slider/screenshots/1.jpg" alt="Shaders Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/shaders-slider/screenshots/2.jpg" alt="Shaders Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/shaders-slider/screenshots/3.jpg" alt="Shaders Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-slicer-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/slicer-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/slicer-slider/icon.svg" alt="Slicer Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Slicer Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Images slicer slider</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/slicer-slider/screenshots/1.jpg" alt="Slicer Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/slicer-slider/screenshots/2.jpg" alt="Slicer Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/slicer-slider/screenshots/3.jpg
1" alt="Slicer Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-password-input" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/password-input"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/password-input/icon.svg" alt="Password Input" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Password Input</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Framework7 password input</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/password-input/screenshots/1.jpg" alt="Password Input" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/password-input/screenshots/2.jpg" alt="Password Input" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/></div></div></a><a id="catalog-shutters-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/shutters-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/shutters-slider/icon.svg" alt="Shutters Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Shutters Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Fancy parallax image transitions</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/shutters-slider/screenshots/1.jpg" alt="Shutters Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/shutters-slider/screenshots/2.jpg" alt="Shutters Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/shutters-slider/screenshots/3.jpg" alt="Shutters Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-stories-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/stories-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/stories-slider/icon.svg" alt="Stories Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Stories Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Instagram-like Stories slider made with Swiper</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/stories-slider/screenshots/1.jpg" alt="Stories Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/stories-slider/screenshots/2.jpg" alt="Stories Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/stories-slider/screenshots/3.jpg" alt="Stories Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-keypad" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/keypad"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/keypad/icon.svg" alt="Keypad" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Keypad</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Framework7 keypad and custom keyboard plugin</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/keypad/screenshots/01.jpg" alt="Keypad" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/keypad/screenshots/02.jpg" alt="Keypad" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/keypad/screenshots/03.jpg" alt="Keypad" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-spring-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/spring-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/spring-slider/icon.svg" alt="Spring Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Spring Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Swiper "spring" transition effect</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/spring-slider/screenshots/1.jpg" alt="Spring Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/spring-slider/screenshots/2.jpg" alt="Spring Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/></div></div></a><a id="catalog-lamp-tabbar" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/lamp-tabbar"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/lamp-tabbar/icon.svg" alt="Lamp Tabbar" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Lamp Tabbar</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Framework7 multi color Tabbar highlight</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/lamp-tabbar/screenshots/1.jpg" alt="Lamp Tabbar" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/lamp-tabbar/screenshots/2.jpg" alt="Lamp Tabbar" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/lamp-tabbar/screenshots/3.jpg" alt="Lamp Tabbar" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-panorama-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/panorama-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/panorama-slider/icon.svg" alt="Panorama Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Panorama Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">3D panorama Swiper effect</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/panorama-slider/screenshots/1.jpg" alt="Panorama Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/panorama-slider/screenshots/2.jpg" alt="Panorama Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/panorama-slider/screenshots/3.jpg" alt="Panorama Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-fashion-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/fashion-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/fashion-slider/icon.svg" alt="Fashion Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Fashion Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Showcase fashion products</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/fashion-slider/screenshots/1.jpg" alt="Fashion Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/fashion-slider/screenshots/2.jpg" alt="Fashion Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/fashion-slider/screenshots/3.jpg" alt="Fashion Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-carousel-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 catalog-item-featured " href="/catalog/carousel-slider"><div class="catalog-item-featured-label bg-secondary absolute top-0 right-0 px-2 py-1 text-xs font-semibold text-white">Most Popular</div><div class="catalog-item-featured-borders pointer-events-none absolute top-0 left-0 z-10 h-full w-full"><div></div><div></div><div></div><div></div></div><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/carousel-slider/icon.svg" alt="Carousel Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Carousel Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Infinite 3D carousel slider</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/carousel-slider/screenshots/1.jpg" alt="Carousel Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/carousel-slider/screenshots/2.jpg" alt="Carousel Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/carousel-slider/screenshots/3.jpg" alt="Carousel Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-triple-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block ov
1erflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/triple-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/triple-slider/icon.svg" alt="Triple Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Triple Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Three Swipers work as one</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/triple-slider/screenshots/1.jpg" alt="Triple Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/triple-slider/screenshots/2.jpg" alt="Triple Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/triple-slider/screenshots/3.jpg" alt="Triple Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-seven-burger" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 catalog-item-featured " href="/catalog/seven-burger"><div class="catalog-item-featured-label bg-secondary absolute top-0 right-0 px-2 py-1 text-xs font-semibold text-white">Most Popular for Framework7</div><div class="catalog-item-featured-borders pointer-events-none absolute top-0 left-0 z-10 h-full w-full"><div></div><div></div><div></div><div></div></div><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/seven-burger/icon.svg" alt="Seven Burger" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Seven Burger</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Fast food delivery app template</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/seven-burger/screenshots/1.jpg" alt="Seven Burger" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/seven-burger/screenshots/2.jpg" alt="Seven Burger" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/seven-burger/screenshots/3.jpg" alt="Seven Burger" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-travel-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/travel-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/travel-slider/icon.svg" alt="Travel Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Travel Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Pick your travel destination</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/travel-slider/screenshots/1.jpg" alt="Travel Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/travel-slider/screenshots/2.jpg" alt="Travel Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/travel-slider/screenshots/3.jpg" alt="Travel Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-expanding-collection" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/expanding-collection"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/expanding-collection/icon.svg" alt="Expanding Collection" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Expanding Collection</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Expandable content cards with Swiper</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/expanding-collection/screenshots/1.jpg" alt="Expanding Collection" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/expanding-collection/screenshots/2.jpg" alt="Expanding Collection" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/expanding-collection/screenshots/3.jpg" alt="Expanding Collection" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-tel-input" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/tel-input"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/tel-input/icon.svg" alt="Tel Input" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Tel Input</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Framework7 telephone number input with country code selector</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/tel-input/screenshots/1.jpg" alt="Tel Input" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/tel-input/screenshots/2.jpg" alt="Tel Input" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/tel-input/screenshots/3.jpg" alt="Tel Input" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-avatar-picker" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/avatar-picker"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/avatar-picker/icon.svg" alt="Avatar Picker" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Avatar Picker</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Framework7 component with file input and image cropper</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/avatar-picker/screenshots/1.jpg" alt="Avatar Picker" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/avatar-picker/screenshots/2.jpg" alt="Avatar Picker" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/avatar-picker/screenshots/3.jpg" alt="Avatar Picker" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-espresso-app" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/espresso-app"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/espresso-app/icon.svg" alt="Espresso App" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Espresso App</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Coffee shop mobile app</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/espresso-app/screenshots/1.jpg" alt="Espresso App" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/espresso-app/screenshots/2.jpg" alt="Espresso App" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/espresso-app/screenshots/3.jpg" alt="Espresso App" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-backlogger" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/backlogger"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/backlogger/icon.svg" alt="Backlogger" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Backlogger</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Keep track of your video games</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/backlogger/screenshots/1.png" alt="Backlogger" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/backlogger/screenshots/2.png" alt="Backlogger" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/backlogger/screenshots/3.png" alt="Backlogger" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-cookingo" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/cookingo"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/cookingo/icon.svg" alt="CookinGo" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">CookinGo</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Full-featured recipe search app</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/cookingo/screenshots/1.jpg" alt="CookinGo" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/cookingo/screenshots/2.jpg" alt="CookinGo" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/cookingo/screenshots/3.jpg" alt="CookinGo" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) ro
1tate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-posters-slider" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/posters-slider"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/posters-slider/icon.svg" alt="Posters Slider" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Posters Slider</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Fancy cards slider</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/posters-slider/screenshots/1.png" alt="Posters Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/posters-slider/screenshots/2.png" alt="Posters Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/posters-slider/screenshots/3.png" alt="Posters Slider" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-paper-onboarding" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/paper-onboarding"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/paper-onboarding/icon.svg" alt="Paper Onboarding" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Paper Onboarding</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Material design onboarding slider</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/paper-onboarding/screenshots/1.png" alt="Paper Onboarding" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/paper-onboarding/screenshots/2.png" alt="Paper Onboarding" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/paper-onboarding/screenshots/3.png" alt="Paper Onboarding" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-whatsapp-f7-react" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/whatsapp-f7-react"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/whatsapp-f7-react/icon.svg" alt="WhatsApp" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">WhatsApp</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">WhatsApp UI made with Framework7 & React</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/whatsapp-f7-react/screenshots/1.jpg" alt="WhatsApp" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/whatsapp-f7-react/screenshots/2.jpg" alt="WhatsApp" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/whatsapp-f7-react/screenshots/3.jpg" alt="WhatsApp" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-appstore-f7-react" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/appstore-f7-react"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/appstore-f7-react/icon.svg" alt="App Store" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">App Store</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">iOS App Store UI made with Framework7 & React</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/appstore-f7-react/screenshots/1.jpg" alt="App Store" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(0% + 80%)) translateY(48px) rotate(-5deg) scale(1.5);z-index:10"/><img src="https://uiinitiative.com/items/appstore-f7-react/screenshots/2.jpg" alt="App Store" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(100% + 80%)) translateY(48px) rotate(0deg) scale(1.5);z-index:9"/><img src="https://uiinitiative.com/items/appstore-f7-react/screenshots/3.jpg" alt="App Store" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out]" style="transform:translateX(calc(200% + 80%)) translateY(48px) rotate(5deg) scale(1.5);z-index:8"/></div></div></a><a id="catalog-swiper-3d-slicer" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/swiper-3d-slicer"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/swiper-3d-slicer/icon.svg" alt="Swiper 3D Slicer" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Swiper 3D Slicer</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Unique 3D "slicing" slider made with Swiper</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/swiper-3d-slicer/screenshots/1.jpg" alt="Swiper 3D Slicer" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/swiper-3d-slicer/screenshots/2.jpg" alt="Swiper 3D Slicer" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/swiper-3d-slicer/screenshots/3.jpg" alt="Swiper 3D Slicer" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a><a id="catalog-swiper-3d-pagination" class="catalog-item group hover:bg-surface-2 active:bg-surface-1 relative block overflow-hidden border border-white/20 duration-200 border-opacity-5 border border-white " href="/catalog/swiper-3d-pagination"><div class="flex w-full items-start gap-4 p-4"><img class="h-12 w-12 shrink-0" src="/items/swiper-3d-pagination/icon.svg" alt="Swiper 3D Pagination" width="192" height="192"/><div class="flex min-w-0 shrink flex-col gap-1"><div class="">Swiper 3D Pagination</div><div class="relative max-w-full min-w-0 overflow-hidden text-sm text-ellipsis whitespace-nowrap opacity-50">Swiper templates with 3D pagination</div></div></div><div class="relative h-0 pb-[50%]"><div class="absolute inset-0 h-full w-full duration-300 ease-[ease-out] grayscale-[50%]" style="transform:translateX(0px)"><img src="https://uiinitiative.com/items/swiper-3d-pagination/screenshots/1.jpg" alt="Swiper 3D Pagination" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(0% + 0px)) translateY(8px) rotate(-5deg) scale(0.8);z-index:10"/><img src="https://uiinitiative.com/items/swiper-3d-pagination/screenshots/2.jpg" alt="Swiper 3D Pagination" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(20% + 0px)) translateY(8px) rotate(0deg) scale(0.8);z-index:9"/><img src="https://uiinitiative.com/items/swiper-3d-pagination/screenshots/3.jpg" alt="Swiper 3D Pagination" loading="lazy" class="absolute bottom-0 h-[calc(100%-8px)] w-auto shrink-0 rounded-lg border border-white/20 duration-300 ease-[ease-out] origin-left" style="transform:translateX(calc(40% + 0px)) translateY(8px) rotate(5deg) scale(0.8);z-index:8"/></div></div></a></div></div><div class="relative z-[1] mx-auto mt-16 w-full px-4 pb-4 md:px-8 md:pb-8 max-w-screen-xl"><div class="mx-auto rounded-[32px] border border-white/20 bg-[#222]/60 px-4 py-8 text-sm backdrop-blur backdrop-saturate-200 md:px-8"><div class="flex grid-cols-4 gap-4 sm:grid"><div class="flex flex-col gap-4"><a class="mr-auto inline-flex" href="/"><img src="/images/logo.svg" alt="Logo" class="h-8 w-8"/></a><div class="flex gap-2"><a class="group relative rounded-full select-none text-white cursor-pointer !no-underline duration-200 focus:ring-secondary focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-none border border-white/20 hover:bg-white/10 active:bg-white/5 h-8 px-6 !px-3" href="https://x.com/uiinitiative" target="_blank"><span class="relative z-10 flex h-full w-full items-center justify-center leading-none"><svg class="h-4 w-4" fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.6468 10.4686L20.9321 2H19.2057L12.8799 9.3532L7.82741 2H2L9.6403
113.1193L2 22H3.72649L10.4068 14.2348L15.7425 22H21.5699L13.6464 10.4686H13.6468ZM11.2821 13.2173L10.508 12.1101L4.34857 3.29968H7.00037L11.9711 10.4099L12.7452 11.5172L19.2066 20.7594H16.5548L11.2821 13.2177V13.2173Z"></path></svg></span></a><a class="group relative rounded-full select-none text-white cursor-pointer !no-underline duration-200 focus:ring-secondary focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-none border border-white/20 hover:bg-white/10 active:bg-white/5 h-8 px-6 !px-3" href="mailto:[email protected]" target="_blank"><span class="relative z-10 flex h-full w-full items-center justify-center leading-none"><svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280 320-200v-80L480-520 160-720v80l320 200Z"></path></svg></span></a></div></div><div class="flex flex-col gap-4"><div class="">Product</div><div class="flex flex-col gap-2"><a class="hover:text-primary text-white/50 duration-200" href="/#features">Features</a><a class="hover:text-primary text-white/50 duration-200" href="/#all-access">Pricing</a><a class="hover:text-primary text-white/50 duration-200" href="/blog">Blog</a><a class="hover:text-primary text-white/50 duration-200" href="/legal/regular-license">Regular License</a><a class="hover:text-primary text-white/50 duration-200" href="/extended">Extended License</a><a class="hover:text-primary text-white/50 duration-200" target="_blank" href="https://partners.nolimits4web.com">Affiliate Program</a></div></div><div class="flex flex-col gap-4"><div class="">Legal</div><div class="flex flex-col gap-2"><a class="hover:text-primary text-white/50 duration-200" href="/legal/terms">Terms of Service</a><a class="hover:text-primary text-white/50 duration-200" href="/legal/privacy">Privacy Policy</a><a class="hover:text-primary text-white/50 duration-200" href="/legal/refund">Refund Policy</a></div></div></div><div class="mt-8 flex flex-col gap-1 text-white/50"><div>All product names, logos and brands are property of their respective owners.</div><div>Copyright © <!-- -->2026<!-- --> UI Initiative by<!-- --> <a href="https://nolimits4web.com" target="_blank"><img src="/images/n4w-logo.svg" alt="nolimits4web" class="inline-block h-6 w-6"/></a></div><div class="mt-2 flex items-center gap-2"><a title="Start Page HQ - Your browser new tab as a personal dashboard with 50+ widgets" href="https://startpagehq.com" target="_blank"><img loading="lazy" src="/images/projects/startpagehq.svg" alt="Start Page HQ" class="inline-block size-6"/></a><a title="PaneFlow - Create Stunning Slideshows Visually. No Code Required" href="https://paneflow.com" target="_blank"><img loading="lazy" src="/images/projects/paneflow.svg" alt="PaneFlow - Create Stunning Slideshows Visually. No Code Required" class="inline-block size-6"/></a><a title="t0ggles - Your ultimate multiple projects management tool" href="https://t0ggles.com" target="_blank"><img loading="lazy" src="/images/projects/t0ggles.svg" alt="t0ggles - Your ultimate multiple projects management tool" class="inline-block size-6"/></a><a title="Swiper Studio - Create Beautiful And Responsive Sliders Without Writing Any Code" href="https://studio.swiperjs.com" target="_blank"><img loading="lazy" src="/images/projects/swiper-studio.svg" alt="Swiper Studio - Create Beautiful And Responsive Sliders Without Writing Any Code" class="inline-block size-6"/></a><a title="UI Initiative - Premium templates & plugins for Swiper and Framework7" href="https://uiinitiative.com" target="_blank"><img loading="lazy" src="/images/projects/uiinitiative.svg" alt="UI Initiative - Premium templates & plugins for Swiper and Framework7" class="inline-block size-6"/></a><a title="Cladd - A React UI kit for building actual apps" href="https://cladd.io" target="_blank"><img loading="lazy" src="/images/projects/cladd.svg" alt="Cladd - A React UI kit for building actual apps" class="inline-block size-6"/></a><a title="Fisper - Local AI Voice Dictation for macOS" href="https://fisper.app" target="_blank"><img loading="lazy" src="/images/projects/fisper.png" alt="Fisper - Local AI Voice Dictation for macOS" class="inline-block size-6"/></a></div></div></div></div><div class="page-bottom-bg"></div><div class="fixed top-0 left-0 z-50 h-full w-full bg-black/50 duration-300 opacity-0 pointer-events-none"></div><div class="fixed top-1/2 left-1/2 max-w-sm max-h-full rounded-[32px] w-[90%] z-50 -translate-x-1/2 transform overflow-auto border border-white/20 bg-[#222]/90 backdrop-blur duration-300 opacity-0 translate-y-full pointer-events-none "><div class="sticky top-0 left-0 z-20 flex h-16 shrink-0 items-center border-b border-white/20 px-6 backdrop-blur-lg sm:px-8"><div class="">Sign In</div><button type="button" class="ml-auto active:opacity-20"><svg fill="currentcolor" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56" class="text-primary h-6 w-6"><path d="M 10.0234 43.0234 C 9.2266 43.8203 9.2031 45.1797 10.0234 45.9766 C 10.8438 46.7734 12.1797 46.7734 13.0000 45.9766 L 28.0000 30.9766 L 43.0000 45.9766 C 43.7969 46.7734 45.1563 46.7969 45.9766 45.9766 C 46.7734 45.1562 46.7734 43.8203 45.9766 43.0234 L 30.9531 28.0000 L 45.9766 13.0000 C 46.7734 12.2031 46.7969 10.8437 45.9766 10.0469 C 45.1328 9.2266 43.7969 9.2266 43.0000 10.0469 L 28.0000 25.0469 L 13.0000 10.0469 C 12.1797 9.2266 10.8203 9.2031 10.0234 10.0469 C 9.2266 10.8672 9.2266 12.2031 10.0234 13.0000 L 25.0234 28.0000 Z"></path></svg></button></div><div class="px-6 pt-4 pb-10 sm:px-8 "><p class="mb-8 text-center text-sm text-white/50">You need to be logged in to be able to make a purchase and download catalog items.</p><p class="mb-2 flex flex-col items-center justify-center gap-2"><input type="email" required="" placeholder="Email address" class="focus:border-primary block h-12 w-full rounded-xl border border-white/10 bg-black/10 px-4 duration-200 outline-none" name="email" value=""/><button class="group relative rounded-full select-none !text-white cursor-pointer !no-underline duration-200 border pointer-events-none border-transparent opacity-25 border-white/20 hover:bg-white/10 active:bg-white/5 h-12 text-sm px-6 w-full px-6!" disabled=""><span class="relative z-10 flex h-full w-full items-center justify-center leading-none transition-opacity duration-300"><span class="mr-4">Continue</span><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor"><path d="M646-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h446L532-634q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T589-691l183 183q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L589-269q-12 12-28.5 11.5T532-270q-11-12-11.5-28t11.5-28l114-114Z"></path></svg></span><div class="h-6 w-6 animate-spin rounded-full border-4 border-white border-b-transparent absolute top-1/2 left-1/2 -mt-3 -ml-3 transition-opacity duration-300 opacity-0"></div></button></p><p class="mb-2 text-center opacity-50">OR</p><div class="mb-8 flex flex-wrap items-center justify-center gap-x-1 gap-y-2"><button class="group relative rounded-full select-none !text-white cursor-pointer !no-underline duration-200 focus:ring-secondary focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-none border border-white/20 hover:bg-white/10 active:bg-white/5 h-12 text-sm px-6 block w-full"><span class="relative z-10 flex h-full w-full items-center justify-center leading-none"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="mr-3 h-5 w-5"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></svg><span class="text-sm text-[#e3e3e3] normal-case">Sign In with Google</span></span></button><button class="group relative rounded-full select-none !text-white cursor-pointer !no-underline duration-200 focus:ring-secondary focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-none border border-white/20 hover:bg-white/10 active:bg-white/5 h-12 text-sm px-6 w-full"><span class="relative z-10 flex h-full w-full items-center justify-center leading-none"><img class="h-5 w-5" src="/images/github-logo.svg"/><span class="ml-2 text-sm normal-case">Sign In with GitHub</span></span></button><button class="group relative rounded-full select-none !text-white cursor-pointer !no-underline duration-200 focus:ring-secondary focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-none border border-white/20 hover:bg-white/10 active:bg-white/5 h-12 text-sm px-6 w-full"><span class="relative z-10 flex h-full w-full items-center justify-center leading-none"><span class="ml-2 text-sm normal-case">Sign In with SSO</span></span></button></div><div class="max-w text-sm"><div class="flex items-center justify-center space-x-2"><div class="relative h-4 w-4 cursor-pointer rounded border-2 border-primary bg-primary"><div class="absolute top-px left-[3px] h-2 w-1.5 rotate-45 border-r-2 border-b-2 border-white opacity-100"></div></div><div><span class="cursor-pointer">Agree with<!-- --> </span>
1<a target="_blank" class="text-primary cursor-pointer hover:underline" href="/legal/terms">Terms & conditions</a></div></div></div></div></div></div>
1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"items":[{"title":"Super Flow","subtitle":"Where slides come alive","screenshotSize":[1690,900],"techs":["Swiper"],"preview":"https://super-flow.uiinitiative.com","id":"super-flow","updatedAt":"2025-11-13T01:36:26Z","screenshots":["/items/super-flow/screenshots/1.jpg","/items/super-flow/screenshots/2.jpg","/items/super-flow/screenshots/3.jpg"],"icon":"/items/super-flow/icon.svg","cover":"/items/super-flow/cover.jpg","cover_s":"/items/super-flow/cover_s.jpg"},{"title":"Expo Slider","subtitle":"Parallax \u0026 scale effects slider","screenshotSize":[3072,1920],"techs":["Swiper"],"preview":"https://expo-slider.uiinitiative.com","id":"expo-slider","updatedAt":"2025-09-11T20:35:37Z","screenshots":["/items/expo-slider/screenshots/1.jpg","/items/expo-slider/screenshots/2.jpg","/items/expo-slider/screenshots/3.jpg"],"icon":"/items/expo-slider/icon.svg","cover":"/items/expo-slider/cover.jpg","cover_s":"/items/expo-slider/cover_s.jpg"},{"title":"Cards Stack Slider","subtitle":"Cards Stack slider made with Swiper","screenshotSize":[2600,1800],"techs":["Swiper"],"preview":"https://cards-stack-slider.uiinitiative.com","id":"cards-stack-slider","updatedAt":"2025-11-07T18:29:30Z","screenshots":["/items/cards-stack-slider/screenshots/1.jpg","/items/cards-stack-slider/screenshots/2.jpg","/items/cards-stack-slider/screenshots/3.jpg","/items/cards-stack-slider/screenshots/4.jpg","/items/cards-stack-slider/screenshots/5.jpg"],"icon":"/items/cards-stack-slider/icon.svg","cover":"/items/cards-stack-slider/cover.jpg","cover_s":"/items/cards-stack-slider/cover_s.jpg"},{"title":"Material You Slider","subtitle":"Material You carousel made with Swiper","screenshotSize":[2480,1400],"techs":["Swiper"],"preview":"https://material-you-slider.uiinitiative.com","id":"material-you-slider","updatedAt":"2025-09-23T17:12:24Z","screenshots":["/items/material-you-slider/screenshots/1.jpg","/items/material-you-slider/screenshots/2.jpg","/items/material-you-slider/screenshots/3.jpg","/items/material-you-slider/screenshots/4.jpg"],"icon":"/items/material-you-slider/icon.svg","cover":"/items/material-you-slider/cover.jpg","cover_s":"/items/material-you-slider/cover_s.jpg"},{"title":"Tinder Slider","subtitle":"Tinder card-style interactions and effects","screenshotSize":[1440,2960],"techs":["Swiper"],"preview":"https://swipe-cards.uiinitiative.com","id":"tinder-slider","updatedAt":"2026-05-28T23:39:53Z","screenshots":["/items/tinder-slider/screenshots/1.jpg","/items/tinder-slider/screenshots/2.jpg","/items/tinder-slider/screenshots/3.jpg","/items/tinder-slider/screenshots/4.jpg","/items/tinder-slider/screenshots/5.jpg","/items/tinder-slider/screenshots/6.jpg"],"icon":"/items/tinder-slider/icon.svg","cover":"/items/tinder-slider/cover.jpg","cover_s":"/items/tinder-slider/cover_s.jpg"},{"title":"Shaders Slider","subtitle":"Stunning WebGL image transitions","screenshotSize":[1920,1080],"techs":["Swiper"],"preview":"https://shaders-slider.uiinitiative.com","id":"shaders-slider","updatedAt":"2025-09-11T20:40:51Z","screenshots":["/items/shaders-slider/screenshots/1.jpg","/items/shaders-slider/screenshots/2.jpg","/items/shaders-slider/screenshots/3.jpg","/items/shaders-slider/screenshots/4.jpg","/items/shaders-slider/screenshots/5.jpg","/items/shaders-slider/screenshots/6.jpg","/items/shaders-slider/screenshots/7.jpg","/items/shaders-slider/screenshots/8.jpg","/items/shaders-slider/screenshots/9.jpg"],"icon":"/items/shaders-slider/icon.svg","cover":"/items/shaders-slider/cover.jpg","cover_s":"/items/shaders-slider/cover_s.jpg"},{"title":"Slicer Slider","subtitle":"Images slicer slider","screenshotSize":[1920,1080],"techs":["Swiper"],"preview":"https://slicer-slider.uiinitiative.com","id":"slicer-slider","updatedAt":"2025-09-11T20:42:13Z","screenshots":["/items/slicer-slider/screenshots/1.jpg","/items/slicer-slider/screenshots/2.jpg","/items/slicer-slider/screenshots/3.jpg","/items/slicer-slider/screenshots/4.jpg","/items/slicer-slider/screenshots/5.jpg"],"icon":"/items/slicer-slider/icon.svg","cover":"/items/slicer-slider/cover.jpg","cover_s":"/items/slicer-slider/cover_s.jpg"},{"title":"Password Input","subtitle":"Framework7 password input","screenshotSize":[1125,2436],"techs":["Framework7","React","Vue","Svelte"],"preview":"https://password-input.uiinitiative.com","id":"password-input","updatedAt":"2023-05-14T12:14:08Z","screenshots":["/items/password-input/screenshots/1.jpg","/items/password-input/screenshots/2.jpg"],"icon":"/items/password-input/icon.svg","cover":"/items/password-input/cover.jpg","cover_s":"/items/password-input/cover_s.jpg"},{"title":"Shutters Slider","subtitle":"Fancy parallax image transitions","screenshotSize":[3072,1920],"techs":["Swiper"],"preview":"https://shutters-slider.uiinitiative.com","id":"shutters-slider","updatedAt":"2025-09-11T20:43:29Z","screenshots":["/items/shutters-slider/screenshots/1.jpg","/items/shutters-slider/screenshots/2.jpg","/items/shutters-slider/screenshots/3.jpg"],"icon":"/items/shutters-slider/icon.svg","cover":"/items/shutters-slider/cover.jpg","cover_s":"/items/shutters-slider/cover_s.jpg"},{"title":"Stories Slider","subtitle":"Instagram-like Stories slider made with Swiper","screenshotSize":[1125,2436],"techs":["Swiper","React","Vue"],"preview":"https://stories-slider.uiinitiative.com","id":"stories-slider","updatedAt":"2025-09-11T20:46:29Z","screenshots":["/items/stories-slider/screenshots/1.jpg","/items/stories-slider/screenshots/2.jpg","/items/stories-slider/screenshots/3.jpg","/items/stories-slider/screenshots/4.jpg"],"icon":"/items/stories-slider/icon.svg","cover":"/items/stories-slider/cover.jpg","cover_s":"/items/stories-slider/cover_s.jpg"},{"title":"Keypad","subtitle":"Framework7 keypad and custom keyboard plugin","screenshotSize":[1125,2436],"techs":["Framework7"],"preview":"https://keypad.uiinitiative.com","id":"keypad","updatedAt":"2023-05-14T12:13:02Z","screenshots":["/items/keypad/screenshots/01.jpg","/items/keypad/screenshots/02.jpg","/items/keypad/screenshots/03.jpg","/items/keypad/screenshots/04.jpg","/items/keypad/screenshots/05.jpg","/items/keypad/screenshots/06.jpg","/items/keypad/screenshots/07.jpg","/items/keypad/screenshots/08.jpg","/items/keypad/screenshots/09.jpg","/items/keypad/screenshots/10.jpg","/items/keypad/screenshots/11.jpg","/items/keypad/screenshots/12.jpg"],"icon":"/items/keypad/icon.svg","cover":"/items/keypad/cover.jpg","cover_s":"/items/keypad/cover_s.jpg"},{"title":"Spring Slider","subtitle":"Swiper \"spring\" transition effect","screenshotSize":[3072,1920],"techs":["Swiper"],"preview":"https://spring-slider.uiinitiative.com","id":"spring-slider","updatedAt":"2025-09-11T20:49:35Z","screenshots":["/items/spring-slider/screenshots/1.jpg","/items/spring-slider/screenshots/2.jpg"],"icon":"/items/spring-slider/icon.svg","cover":"/items/spring-slider/cover.jpg","cover_s":"/items/spring-slider/cover_s.jpg"},{"title":"Lamp Tabbar","subtitle":"Framework7 multi color Tabbar highlight","screenshotSize":[1125,2436],"techs":["Framework7"],"preview":"https://lamp-tabbar.uiinitiative.com","id":"lamp-tabbar","updatedAt":"2023-05-14T12:13:26Z","screenshots":["/items/lamp-tabbar/screenshots/1.jpg","/items/lamp-tabbar/screenshots/2.jpg","/items/lamp-tabbar/screenshots/3.jpg","/items/lamp-tabbar/screenshots/4.jpg"],"icon":"/items/lamp-tabbar/icon.svg","cover":"/items/lamp-tabbar/cover.jpg","cover_s":"/items/lamp-tabbar/cover_s.jpg"},{"title":"Panorama Slider","subtitle":"3D panorama Swiper effect","screenshotSize":[3072,1920],"techs":["Swiper"],"preview":"https://panorama-slider.uiinitiative.com","id":"panorama-slider","updatedAt":"2025-09-11T20:50:53Z","screenshots":["/items/panorama-slider/screenshots/1.jpg","/items/panorama-slider/screenshots/2.jpg","/items/panorama-slider/screenshots/3.jpg","/items/panorama-slider/screenshots/4.jpg"],"icon":"/items/panorama-slider/icon.svg","cover":"/items/panorama-slider/cover.jpg","cover_s":"/items/panorama-slider/cover_s.jpg"},{"title":"Fashion Slider","subtitle":"Showcase fashion products","screenshotSize":[3072,1920],"techs":["Swiper"],"preview":"https://fashion-slider.uiinitiative.com","id":"fashion-slider","updatedAt":"2026-02-04T16:09:14Z","screenshots":["/items/fashion-slider/screenshots/1.jpg","/items/fashion-slider/screenshots/2.jpg","/items/fashion-slider/screenshots/3.jpg","/items/fashion-slider/screenshots/4.jpg","/items/fashion-slider/screenshots/5.jpg","/items/fashion-slider/screenshots/6.jpg"],"icon":"/items/fashion-slider/icon.svg","cover":"/items/fashion-slider/cover.jpg","cover_s":"/items/fashion-slider/cover_s.jpg"},{"title":"Carousel Slider","subtitle":"Infinite 3D carousel slider","screenshotSize":[3072,1920],"techs":["Swiper"],"preview":"https://carousel-slider.uiinitiative.com","id":"carousel-slider","updatedAt":"2025-09-11T20:33:05Z","screenshots":["/items/carousel-slider/screenshots/1.jpg","/items/carousel-slider/screenshots/2.jpg","/items/carousel-slider/screenshots/3.jpg"],"icon":"/items/carousel-slider/icon.svg","cover":"/items/carousel-slider/cover.jpg","cover_s":"/items/carousel-slider/cover_s.jpg"},{"title":"Triple Slider","subtitle":"Three Swipers work as one","screenshotSize":[3072,1920],"techs":["Swiper"],"preview":"https://triple-slider.uiinitiative.com","id":"triple-slider","updatedAt":"2025-09-11T20:54:08Z","screenshots":["/items/triple-slider/screenshots/1.jpg","/items/triple-slider/screenshots/2.jpg","/items/triple-slider/screenshots/3.jpg","/items/triple-slider/screenshots/4.jpg"],"icon":"/items/triple-slider/icon.svg","cover":"/items/triple-slider/cover.jpg","cover_s":"/items/triple-slider/cover_s.jpg"},{"title":"Seven Burger","subtitle":"Fast food delivery app template","screenshotSize":[1125,2436],"techs":["Framework7","PWA"],"preview":"https://seven-burger.uiinitiative.com","id":"seven-burger","updatedAt":"2023-05-14T12:13:31Z","screenshots":["/items/seven-burger/screenshots/1.jpg","/items/seven-burger/screenshots/2.jpg","/items/seven-burger/screenshots/3.jpg","/items/seven-burger/screenshots/4.jpg","/items/seven-burger/screenshots/5.jpg","/items/seven-burger/screenshots/6.jpg","/items/seven-burger/screenshots/7.jpg","/items/seven-burger/screenshots/8.jpg"],"icon":"/items/seven-burger/icon.svg","cover":"/items/seven-burger/cover.jpg","cover_s":"/items/seven-burger/cover_s.jpg"},{"title":"Travel Slider","subtitle":"Pick your travel destination","screenshotSize":[1200,750],"techs":["Swiper"],"preview":"https://travel-slider.uiinitiative.com","id":"travel-slider","updatedAt":"2025-09-11T20:55:32Z","screenshots":["/items/travel-slider/screenshots/1.jpg","/items/travel-slider/screenshots/2.jpg","/items/travel-slider/screenshots/3.jpg"],"icon":"/items/travel-slider/icon.svg","cover":"/items/travel-slider/cover.jpg","cover_s":"/items/travel-slider/cover_s.jpg"},{"title":"Expanding Collection","subtitle":"Expandable content cards with Swiper","screenshotSize":[2400,1500],"techs":["Swiper"],"preview":"https://expanding-collection.uiinitiative.com","id":"expanding-collection","updatedAt":"2025-09-11T20:56:23Z","screenshots":["/items/expanding-collection/screenshots/1.jpg","/items/expanding-collection/screenshots/2.jpg","/items/expanding-collection/screenshots/3.jpg","/items/expanding-collection/screenshots/4.jpg"],"icon":"/items/expanding-collection/icon.svg","cover":"/items/expanding-collection/cover.jpg","cover_s":"/items/expanding-collection/cover_s.jpg"},{"title":"Tel Input","subtitle":"Framework7 telephone number input with country code selector","screenshotSize":[1125,2436],"techs":["Framework7","React","Vue","Svelte"],"preview":"https://tel-input.uiinitiative.com","id":"tel-input","updatedAt":"2023-05-14T12:13:17Z","screenshots":["/items/tel-input/screenshots/1.jpg","/items/tel-input/screenshots/2.jpg","/items/tel-input/screenshots/3.jpg","/items/tel-input/screenshots/4.jpg"],"icon":"/items/tel-input/icon.svg","cover":"/items/tel-input/cover.jpg","cover_s":"/items/tel-input/cover_s.jpg"},{"title":"Avatar Picker","subtitle":"Framework7 component with file input and image cropper","screenshotSize":[1125,2436],"techs":["Framework7","React","Vue","Svelte"],"preview":"https://avatar-picker.uiinitiative.com","id":"avatar-picker","updatedAt":"2023-11-09T11:03:47Z","screenshots":["/items/avatar-picker/screenshots/1.jpg","/items/avatar-picker/screenshots/2.jpg","/items/avatar-picker/screenshots/3.jpg"],"icon":"/items/avatar-picker/icon.svg","cover":"/items/avatar-picker/cover.jpg","cover_s":"/items/avatar-picker/cover_s.jpg"},{"title":"Espresso App","subtitle":"Coffee shop mobile app","screenshotSize":[1125,2436],"techs":["Framework7","PWA"],"preview":"https://espresso-app.uiinitiative.com","id":"espresso-app","updatedAt":"2023-05-14T12:13:37Z","screenshots":["/items/espresso-app/screenshots/1.jpg","/items/espresso-app/screenshots/2.jpg","/items/espresso-app/screenshots/3.jpg","/items/espresso-app/screenshots/4.jpg","/items/espresso-app/screenshots/5.jpg","/items/espresso-app/screenshots/6.jpg","/items/espresso-app/screenshots/7.jpg"],"icon":"/items/espresso-app/icon.svg","cover":"/items/espresso-app/cover.jpg","cover_s":"/items/espresso-app/cover_s.jpg"},{"title":"Backlogger","subtitle":"Keep track of your video games","screenshotSize":[1125,2436],"techs":["Framework7","PWA"],"preview":"https://backlogger.uiinitiative.com","id":"backlogger","updatedAt":"2023-05-14T12:13:21Z","screenshots":["/items/backlogger/screenshots/1.png","/items/backlogger/screenshots/2.png","/items/backlogger/screenshots/3.png","/items/backlogger/screenshots/4.png","/items/backlogger/screenshots/5.png","/items/backlogger/screenshots/6.png","/items/backlogger/screenshots/7.png","/items/backlogger/screenshots/8.png","/items/backlogger/screenshots/9.png"],"icon":"/items/backlogger/icon.svg","cover":"/items/backlogger/cover.jpg","cover_s":"/items/backlogger/cover_s.jpg"},{"title":"CookinGo","subtitle":"Full-featured recipe search app","screenshotSize":[1125,2436],"techs":["Framework7","PWA"],"preview":"https://cookingo.uiinitiative.com","id":"cookingo","updatedAt":"2023-05-14T12:13:13Z","screenshots":["/items/cookingo/screenshots/1.jpg","/items/cookingo/screenshots/2.jpg","/items/cookingo/screenshots/3.jpg","/items/cookingo/screenshots/4.jpg","/items/cookingo/screenshots/5.jpg","/items/cookingo/screenshots/6.jpg","/items/cookingo/screenshots/7.jpg","/items/cookingo/screenshots/8.jpg"],"icon":"/items/cookingo/icon.svg","cover":"/items/cookingo/cover.jpg","cover_s":"/items/cookingo/cover_s.jpg"},{"title":"Posters Slider","subtitle":"Fancy cards slider","screenshotSize":[1125,2435],"techs":["Swiper"],"preview":"https://posters-slider.uiinitiative.com","id":"posters-slider","updatedAt":"2025-09-11T20:57:21Z","screenshots":["/items/posters-slider/screenshots/1.png","/items/posters-slider/screenshots/2.png","/items/posters-slider/screenshots/3.png","/items/posters-slider/screenshots/4.png","/items/posters-slider/screenshots/5.png","/items/posters-slider/screenshots/6.png"],"icon":"/items/posters-slider/icon.svg","cover":"/items/posters-slider/cover.jpg","cover_s":"/items/posters-slider/cover_s.jpg"},{"title":"Paper Onboarding","subtitle":"Material design onboarding slider","screenshotSize":[1125,2435],"techs":["Swiper"],"preview":"https://paper-onboarding.uiinitiative.com","id":"paper-onboarding","updatedAt":"2025-09-11T20:58:23Z","screenshots":["/items/paper-onboarding/screenshots/1.png","/items/paper-onboarding/screenshots/2.png","/items/paper-onboarding/screenshots/3.png","/items/paper-onboarding/screenshots/4.png","/items/paper-onboarding/screenshots/5.png","/items/paper-onboarding/screenshots/6.png"],"icon":"/items/paper-onboarding/icon.svg","cover":"/items/paper-onboarding/cover.jpg","cover_s":"/items/paper-onboarding/cover_s.jpg"},{"title":"WhatsApp","subtitle":"WhatsApp UI made with Framework7 \u0026 React","screenshotSize":[1125,2435],"techs":["Framework7","React","PWA"],"preview":"http://whatsapp-f7-react.uiinitiative.com","id":"whatsapp-f7-react","updatedAt":"2023-05-14T12:15:24Z","screenshots":["/items/whatsapp-f7-react/screenshots/1.jpg","/items/whatsapp-f7-react/screenshots/2.jpg","/items/whatsapp-f7-react/screenshots/3.jpg","/items/whatsapp-f7-react/screenshots/4.jpg","/items/whatsapp-f7-react/screenshots/5.jpg","/items/whatsapp-f7-react/screenshots/6.jpg","/items/whatsapp-f7-react/screenshots/7.jpg","/items/whatsapp-f7
1-react/screenshots/8.jpg","/items/whatsapp-f7-react/screenshots/9.jpg"],"icon":"/items/whatsapp-f7-react/icon.svg","cover":"/items/whatsapp-f7-react/cover.jpg","cover_s":"/items/whatsapp-f7-react/cover_s.jpg"},{"title":"App Store","subtitle":"iOS App Store UI made with Framework7 \u0026 React","screenshotSize":[1125,2435],"techs":["Framework7","React","PWA"],"preview":"http://appstore-f7-react.uiinitiative.com","id":"appstore-f7-react","updatedAt":"2023-05-14T12:15:32Z","screenshots":["/items/appstore-f7-react/screenshots/1.jpg","/items/appstore-f7-react/screenshots/2.jpg","/items/appstore-f7-react/screenshots/3.jpg","/items/appstore-f7-react/screenshots/4.jpg","/items/appstore-f7-react/screenshots/5.jpg","/items/appstore-f7-react/screenshots/6.jpg","/items/appstore-f7-react/screenshots/7.jpg","/items/appstore-f7-react/screenshots/8.jpg"],"icon":"/items/appstore-f7-react/icon.svg","cover":"/items/appstore-f7-react/cover.jpg","cover_s":"/items/appstore-f7-react/cover_s.jpg"},{"title":"Swiper 3D Slicer","subtitle":"Unique 3D \"slicing\" slider made with Swiper","screenshotSize":[2400,1500],"techs":["Swiper"],"preview":"https://swiper-3d-slicer.uiinitiative.com","id":"swiper-3d-slicer","updatedAt":"2025-09-11T20:59:20Z","screenshots":["/items/swiper-3d-slicer/screenshots/1.jpg","/items/swiper-3d-slicer/screenshots/2.jpg","/items/swiper-3d-slicer/screenshots/3.jpg"],"icon":"/items/swiper-3d-slicer/icon.svg","cover":"/items/swiper-3d-slicer/cover.jpg","cover_s":"/items/swiper-3d-slicer/cover_s.jpg"},{"title":"Swiper 3D Pagination","subtitle":"Swiper templates with 3D pagination","screenshotSize":[2400,1500],"techs":["Swiper"],"preview":"https://swiper-3d-pagination.uiinitiative.com","id":"swiper-3d-pagination","updatedAt":"2025-09-11T21:00:22Z","screenshots":["/items/swiper-3d-pagination/screenshots/1.jpg","/items/swiper-3d-pagination/screenshots/2.jpg","/items/swiper-3d-pagination/screenshots/3.jpg","/items/swiper-3d-pagination/screenshots/4.jpg","/items/swiper-3d-pagination/screenshots/5.jpg","/items/swiper-3d-pagination/screenshots/6.jpg"],"icon":"/items/swiper-3d-pagination/icon.svg","cover":"/items/swiper-3d-pagination/cover.jpg","cover_s":"/items/swiper-3d-pagination/cover_s.jpg"}]},"__N_SSG":true},"page":"/catalog","query":{},"buildId":"u5whapeaTqPeZw4gKoi_S","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
1<script src="https://partners.nolimits4web.com/client.js"></script>
1<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"e4f5eab3e2c7422bae5a07554f8e0b5d","r":1,"spa":2}' crossorigin="anonymous"></script>
1 2</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.