StealThis .dev

ये डिज़ाइनपेजकंपोनेंटएनीमेशनपैटर्नremotionसंगीतdatabasesस्किल्सआर्किटेक्चर3Dप्रॉम्प्टMCP डिज़ाइन कॉपी कर लें - सब मुफ़्त है।

तुरंत इस्तेमाल के लिए स्निपेट और डेमो। MCP सर्वर शामिल है। ब्राउज़ करें, कॉपी करें, इंटीग्रेट करें।

725 संसाधन
17 श्रेणियाँ
MIT लाइसेंस

Lab में सीधे चलने वाले डेमो खोलें। कठिनाई की तुलना करें, स्टैक टैग देखें, और बिल्ड शुरू करने से पहले सही रेफ़रेंस चुनें।

सभी देखें →
UI कंपोनेंट Easy

Menu Item Detail

Restaurant dish detail card with image area, allergen chips, modifier picker (size, doneness, extras), quantity stepper and add-to-order CTA with live total.

पेज Easy

Restaurant About / Our Story

Editorial About page — chef portrait, founding story, 4-step timeline, team grid, values and a press wall — in the shared warm restaurant palette.

पेज Easy

Private Events & Catering

Private dining and catering page — three package cards with capacity, sample menu, capacity table, FAQ accordion and an enquiry form with availability hint.

UI कंपोनेंट Easy

Order Status Tracker

Customer-facing order tracker — Sent → Cooking → Ready → Out for delivery → Delivered stepper with live ETA, courier card, simulated tick-through, and item summary.

पेज Easy

Location & Hours

Restaurant Find Us page — SVG map placeholder with pin, hours table with current-day highlight, transit + parking cards, contact form, and a print-friendly directions card.

पेज Easy

Restaurant Gallery / Chef's Specials

Photo gallery with category filter chips, masonry-style grid of CSS-gradient placeholders, hover overlays, and a click-to-open lightbox with prev/next + keyboard navigation.

UI कंपोनेंट Easy

Printable Receipt

Thermal-style restaurant receipt — header, line items with modifiers, subtotal/tax/tip/total, payment line, QR barcode placeholder and @media print styles for actual printing.

UI कंपोनेंट Easy

Loyalty / Rewards Card

Customer loyalty card with 10-visit progress, animated stamps, 3-tier rewards ladder, faux barcode and member meta. Tap a stamp to flip — earn the reward at 10.

UI कंपोनेंट Easy

Tip & Split Calculator

Standalone tip calculator with N-way split, tip presets + custom %, pre-tax / post-tax tip basis toggle, and round-up to a friendly number.

UI कंपोनेंट Easy

Reviews Feed

Customer review feed: aggregated score with 5-star breakdown bars, filter chips (all · recent · 5★ · with photos), tag pills, helpful counter and owner replies.

UI कंपोनेंट Easy

Call Waiter · Service Request

Tableside service request panel — six common requests (water, bread, menu, allergy, bill, photo), live status pill, cancel before staff confirm, and a short note field.

3D मॉडल Easy

3D Floating Geometric Shapes

Ten distinct Three.js geometric shapes floating in space with sine-wave drift, self-rotation, and a mouse parallax camera effect.

पेज Medium

Italian Trattoria Landing — Trattoria del Forno

Rustic trattoria landing — cream + tomato + olive, Playfair Display + Dancing Script handwritten accents, checkered tablecloth divider, Italian menu copy.

पेज Medium

Customer Checkout

Three-step restaurant checkout — pickup vs delivery, time slot picker, contact + payment with tip presets — and a confirmation success screen.

पेज Medium

Farm-to-Table Landing — Sage & Stone

Earthy farm-to-table landing — sage + bone + clay palette, Fraunces display + Inter Tight body, organic curves, weekly garden harvest tally, and a no-menu tasting reveal.

पेज Medium

Mexican Cantina Landing — La Catrina

Vibrant cantina landing — terracotta + cobalt + mustard, Fraunces display, CSS papel picado strip, taco menu, mezcal flight and Spanish-language copy.

UI कंपोनेंट Medium

Restaurant Cart / Order Summary

Customer order summary widget — line items with modifiers, quantity steppers, subtotal/tax/tip/total, gratuity presets and a send-to-kitchen CTA.

पेज Medium

Restaurant Menu — Carta

Browseable restaurant menu (carta) with sticky category nav, search filter, allergen chips, and section anchors. Shared warm restaurant palette.

पेज Medium

QR Mobile Menu

Mobile-first restaurant menu opened from a table QR code — sticky scroll-spy category bar, single-column dish list with chips, and a floating cart pill that opens a bottom-sheet order summary.

पेज Medium

Sushi / Omakase Landing — Kuro

Sushi & omakase landing — zen minimalism in bone + ink + vermillion, Noto Serif JP display, ink-wash divider, seat counter, and a 13-course omakase progression.

पेज Medium

Restaurant Landing Page

Generic restaurant landing — sticky nav, editorial hero, signature dishes, chef story, hours strip, and a reserve CTA in the shared warm Casa Olivar palette.

UI कंपोनेंट Medium

POS — Payment Terminal

Restaurant payment terminal: cash / card / split tabs, tip presets, on-screen amount keypad, change calculator, and a confirmed-payment view.

पेज Medium

Restaurant Menu Page (Editorial)

Editorial, printable two-column menu page — dotted-leader prices, course separators, wine pairings sidebar, allergen legend, and @media print styles for an A4 PDF.

UI कंपोनेंट Medium

POS Quick Order Pad

Staff-facing POS quick pad: category tabs, tap-to-add menu grid, running ticket panel with line items, qty steppers, modifiers and total. Built for touch.

पेज Hard

Self-Ordering Kiosk

Customer self-ordering kiosk — vertical layout, 72px touch targets, language switcher, animated welcome → category → item-detail → cart → pay flow.

पेज Hard

Steakhouse Landing — Vault & Ember

Premium steakhouse single-page landing — dark charcoal + leather + gold, Cormorant Garamond display, smoke textures, dry-age tally and cellar drawer.

पेज Hard

Kitchen Display System (KDS)

Restaurant Kitchen Display — four-column ticket flow (New · Cooking · Ready · Served) with age-coloured cards, line check-off, advance / recall actions, and a live timer.

पेज Hard

POS — Order Entry Terminal

Full restaurant POS terminal with category sidebar, menu grid, live ticket panel, modifier sheet, course splitter, and Send / Hold / Print / Pay actions.

पेज Hard

Restaurant Floor Plan

Responsive SVG restaurant floor plan — tables in real coordinates, status badges, side inspection, and an edit mode for adding, moving, resizing, reshaping, duplicating, or removing tables.

पेज Hard

Admin — Sales & KPI Dashboard

Restaurant manager dashboard — covers, average check, turn time, 7-day revenue SVG line chart, top items list, hourly heatmap, today's reservations preview.

कंपोनेंट Hard

Hero Code Space Background

Immersive 3D perspective background with floating code panels, scroll-driven depth animation, and responsive depth culling.

आर्किटेक्चर Hard

Micro-Frontend Architecture (Module Federation)

Micro-frontend pattern using Webpack Module Federation with independent host/remote applications sharing dependencies at runtime.

आर्किटेक्चर Hard

Event Sourcing + CQRS Architecture

Event sourcing pattern with append-only event store, aggregate roots, projections, CQRS read/write separation, and event replay for state reconstruction.

आर्किटेक्चर Hard

Turborepo Monorepo Architecture

Turborepo monorepo structure with shared packages, task pipelines, remote caching, and parallel execution for multi-app projects.

आर्किटेक्चर Hard

Nx Monorepo Architecture

Nx monorepo with project graph, affected commands, computation caching, and the 80/20 apps-to-libs split pattern.

आर्किटेक्चर Hard

T3 Stack Architecture

Full-stack T3 architecture with end-to-end type safety — Next.js App Router, tRPC, Prisma/Drizzle, NextAuth, and type-safe environment variables.

UI कंपोनेंट Hard

ARIA Combobox

Accessible combobox autocomplete implementing ARIA 1.2 combobox pattern with keyboard navigation and screen reader support.

UI कंपोनेंट Hard

ARIA Tree View

Accessible tree view component with full keyboard navigation and ARIA tree roles for hierarchical data display.

बॉयलरप्लेट Hard

T3 Stack Starter (Next.js + tRPC + Prisma)

The T3 Stack — fully type-safe full-stack starter with Next.js, tRPC, Prisma/Drizzle, NextAuth, Tailwind, and validated environment variables.

UI कंपोनेंट Hard

Color Blind Modes

Color vision deficiency simulation with toggleable modes for protanopia, deuteranopia and tritanopia using SVG filters.

UI कंपोनेंट Hard

Arc Timeline

A timeline displayed along a curved semicircle arc. Events are positioned radially with connecting dots, creating a unique non-linear timeline visualization.

UI कंपोनेंट Hard

Interactive 3D Globe

Interactive 3D globe rendered on canvas with dot-matrix sphere, auto-rotation, and drag-to-rotate interaction — no Three.js required.

अल्ट्रा हाई डेफिनिशन पेज Hard

Uber UHD Ride-Share Landing Page

A premium dark-themed ride-share landing page inspired by Uber — featuring animated gradient mesh backgrounds, glassmorphism booking cards, CSS-only vehicle illustrations, scroll-pinned feature reveals, animated stat counters, and a phone app mockup with parallax tilt.

अल्ट्रा हाई डेफिनिशन पेज Hard

Spotify UHD Music Streaming Landing Page

A premium dark-themed music streaming landing page inspired by Spotify — featuring animated gradient mesh backgrounds, glassmorphism playlist cards, CSS-only album art, scroll-pinned feature reveals, animated stat counters, and a phone app mockup with Now Playing UI and parallax tilt.

श्रेणी के अनुसार ब्राउज़ करें

वेब एनीमेशन

स्क्रॉल इफ़ेक्ट, पैरालैक्स, कैनवास

वेब पेज

लैंडिंग, हीरो, प्राइसिंग पेज

पेज

फुल-पेज लेआउट और सेक्शन

UI कंपोनेंट

बटन, कार्ड, फ़ॉर्म, मोडल

कंपोनेंट

दोबारा उपयोग योग्य UI ब्लॉक और स्निपेट

पैटर्न

लोडर, होवर इफ़ेक्ट, मेन्यू

Remotion

React आधारित वीडियो टेम्पलेट

डेटाबेस स्कीमा

SQL स्कीमा, ERD डायग्राम, सीड डेटा

प्रॉम्प्ट

AI प्रॉम्प्ट और वर्कफ़्लो

संगीत

ऑडियो, प्लेयर, विज़ुअलाइज़र

आर्किटेक्चर

आर्किटेक्चर और पैटर्न

बॉयलरप्लेट

स्टार्टर टेम्पलेट और प्रोजेक्ट स्कैफोल्ड

3D मॉडल

Three.js सीन, GLTF व्यूअर, WebGL

जल्द आ रहा है

3D इंटरैक्शन

इंटरैक्टिव 3D अनुभव और नियंत्रण

जल्द आ रहा है

प्लगइन

AI कोडिंग टूल प्लगइन और मार्केटप्लेस

कंट्रोल के साथ बनाएं

जो काम करे उसे लें। जो चाहिए उसे शिप करें।

उन इंसानों और बॉट्स के लिए जो शून्य से शुरू किए बिना सॉफ़्टवेयर बनाना चाहते हैं।

StealThis एक reference-first लाइब्रेरी है। हर एलिमेंट को देखें, समझें कि वह कैसे काम करता है, और उसे अपने स्टैक में दोबारा इस्तेमाल करें। कम बिखराव, कम जटिलता, और उस style system तथा tooling पर ज़्यादा कंट्रोल जिससे आप बनाना चाहते हैं।

लक्ष्य सीधा है: एक सहयोगी जगह जहाँ ज्ञान, प्रमाणित प्रैक्टिस और production-ready references साथ रहें। आप एक बेस चुनते हैं, उसे अनुकूलित करते हैं, और हर बार बुनियाद फिर से बनाए बिना आगे बढ़ते हैं।

इस जगह का उपयोग कैसे करें

01 एक रेफ़रेंस खोजें जो आपकी समस्या का कुछ हिस्सा पहले से हल करता हो।

02 इसे जल्दी समझें: स्ट्रक्चर, व्यवहार और इम्प्लीमेंटेशन डिटेल्स।

03 इसे ढालें अपने style system, stack और constraints के अनुसार।

04 जल्दी शिप करें बिना code quality छोड़े।

कम boilerplate. कम context switching. ज़्यादा building.

व्यवहार में आपको क्या मिलता है

आपको तेज़ पहली version, मज़बूत implementation references, और कम dead starts मिलते हैं। दस अलग स्रोतों से context जोड़ने के बजाय, आप एक ही जगह से काम करते हैं और इरादे के साथ आगे बढ़ते हैं।

A कंट्रोल के साथ गति: एक वास्तविक base से शुरू करें और अपने standards बनाए रखें।

B साझा भाषा: इंसान और बॉट एक ही references से सोच सकते हैं।

C जुड़ता हुआ ज्ञान: हर reuse अगली build को आसान बनाता है।

आगे की दिशा: कस्टम visual systems, कस्टम workflow setups, और आपके अपने नियमों के साथ कहीं से भी software creation.

रोडमैप प्रगति में

मज़बूत नींव से AI-first web framework तक

हम इसे खुले में, कदम दर कदम बना रहे हैं। यात्रा मज़बूत foundations से शुरू होती है, फिर बेहतर docs, फिर project generation workflows, और अंत में AI support के साथ web software बनाने के लिए एक हल्का framework.

नींव बनाएं

बेस आर्किटेक्चर, मुख्य पेज, reusable primitives और visual language को स्थिर करें।

best practices के साथ docs बेहतर करें

मार्गदर्शन को ज़्यादा स्पष्ट, व्यावहारिक और actionable बनाएं ताकि लोग कम भ्रम में तेज़ी से implement कर सकें।

project creation के लिए builder बेहतर करें

setup friction कम करें और references से project scaffolding को ज़्यादा controllable बनाएं।

बेसिक StealThis framework बनाएं

वेब प्रोजेक्ट्स के लिए एक सरल framework, जो Astro-style workflows से प्रेरित है और AI-assisted creation पर केंद्रित है।

प्रोजेक्ट की भाषा

वे शब्द जो इस प्रोजेक्ट को परिभाषित करते हैं

ये marketing terms नहीं हैं। ये operating principles हैं जिनसे हम कम complexity और ज़्यादा ownership के साथ software बनाते, साझा करते और ship करते हैं।

नियंत्रण

नियंत्रण मतलब अपना stack, अपना style system और delivery pace चुनना, बिना कठोर defaults में फँसे।

रेफ़रेंस

रेफ़रेंस मतलब ठोस implementations से सीखना, न कि अलग-अलग स्रोतों में बिखरे abstract threads से।

रीयूज़

रीयूज़ डिफ़ॉल्ट है। साबित base से शुरू करें, उसे ढालें, और ऊर्जा दोहराव के बजाय फर्क पैदा करने में लगाएँ।

सहयोग

सहयोग मतलब इंसान और बॉट एक ही context, conventions और production references से build करें।

प्रैक्टिस

प्रैक्टिस वहीं quality उभरती है: repeatable workflows, tested patterns और implementation discipline.

स्वामित्व

स्वामित्व मतलब समझना कि आप क्या चला रहे हैं, क्यों काम करता है, और requirements बदलने पर इसे कैसे विकसित करें।

स्पष्टता

स्पष्टता घर्षण हटाती है: references के लिए एक जगह, decisions के लिए एक भाषा, idea से delivery तक एक रास्ता।

शिप

शिप मतलब architecture, accessibility और maintainability के standards छोड़े बिना जल्दी production तक पहुँचना।

Steal This दर्शन

वे शब्द जिन्हें हम बनाते समय उजागर करते हैं

नीचे की हर पंक्ति software बनाने के ज़्यादा व्यावहारिक तरीके की प्रतिबद्धता है: grounded references, साझा context, और control के साथ तेज़ execution.