Application Mockup Svelte Components & Blocks

18 Application Mockup Svelte Components and Block Built With TailwindCSS & SvelteKit

Back to all categories

Google Chrome Browser Mockup

https://pixelui.dev/category/mockups

Dashboard Content

Ini adalah area konten di dalam mockup browser. Anda bisa menempatkan gambar, teks, atau bahkan komponen lain di sini.

Contoh Grafik

Safari Browser Mockup

pixelui.dev

Facebook Card Mockup

ยท
Great discussion happening in the group about state management strategies in SvelteKit! ๐Ÿš€ Remember to check out the official docs for the latest on Stores and Runes.

What's your preferred method? Let us know below! ๐Ÿ‘‡

#Svelte #SvelteKit #StateMan...
Post media

Instagram Card Mockup

Post media
sveltejs.updates Diving deep into the new Svelte 5 Runes! โœจ The reactivity model feels incredibly intuitive. What are...
My avatar

2 HOURS AGO

LinkedIn Card Mockup

X/Twitter Card Mockup

PixelUI's avatar
Blog Updates! ๐ŸŽ‰ CSS Grid is a total game changer when it comes to layout designโ€”but what if I told you that a single line of CSS can make your entire layout responsive without writing a single media query? Yup, itโ€™s that easy. pixelui.dev/blog/css-grid-l... #CSS #WebDev
Tweet media

Desktop Mockup

3D Ebook Mockup

GitHub Repository Mockup

PixelUI is a collection of free Tailwind CSS components that can be used in your next project

master

README.md

PixelUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.

yarn add pixelui
yarn dev

Find more information in the official documentation.

Gitlab Repository Mockup

Public

README.md

GitLab project description, setup guide, contribution details, etc.

git clone your-repo.git
cd your-repo
npm install

Google Pixel (Android) Mockup

Obsidian

Your app content here...

Snow

Your app content here...

Hazel

Your app content here...

iPad Tablet Mockup

My Awesome iPad App

This content is rendered within the iPad mockup using slots.

iPhone Mockup

App Screen

This is content inside the slot.

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6
List Item 7
List Item 8
image
Gold Phone Content

MacBook/Laptop Mockup

macOS Finder Mockup

My Project Files

Files and Folders

  • ๐Ÿ“„ report-final.docx
  • ๐Ÿ“ images
  • ๐Ÿ“„ notes.txt
  • ๐Ÿ“ src
Downloads
Your downloaded files would appear here. Sidebar is shown by default. Toolbar is hidden.

Smartwatch Mockup

image smartwatch
image
image

Terminal Mockup

~/my-project
user@svelte:~/my-project$ npm install


				added 150 packages in 20s

user@svelte:~/my-project$ npm run dev

> [email protected] dev
> vite dev

 VITE v5.x.x ready in 350 ms

 โžœ  Local: http://localhost:5173/
 โžœ  Network: use --host to expose
 โžœ  press h + enter to show help
user@svelte:~/my-project$ โ–‹
C:\Users\Dev
PS C:\Users\Dev> git status

On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean
PS C:\Users\Dev> โ–‹
Simple output line 1
Another line of text...
Done.

Windows Mockup

My Application - Document.docx

Document Editor

Start typing your document content here.

This area scrolls if the content is taller than the specified height.

More content below...

Settings
Dark theme settings panel content goes here. Controls are hidden.