StealThis .dev

Kopiere diese DesignsSeitenKomponentenAnimationenMusterRemotionMusikDatabasesSkillsArchitektur3DPromptsMCPs Designs - alles kostenlos zum Kopieren.

Direkt nutzbare Snippets und Demos. MCP Server inklusive. Durchsuchen, kopieren, integrieren.

725 Ressourcen
17 Kategorien
MIT Lizenz

Öffne direkt ausführbare Demos im Lab. Vergleiche den Schwierigkeitsgrad, scanne Stack-Tags und wähle die passende Referenz, bevor du baust.

Alle anzeigen →
UI-Komponenten 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.

Seiten 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.

Seiten 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-Komponenten 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.

Seiten 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.

Seiten 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-Komponenten 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-Komponenten 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-Komponenten 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-Komponenten 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-Komponenten 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-Modelle 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.

Seiten 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.

Seiten Medium

Customer Checkout

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

Seiten 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.

Seiten 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-Komponenten 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.

Seiten Medium

Restaurant Menu — Carta

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

Seiten 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.

Seiten 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.

Seiten 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-Komponenten Medium

POS — Payment Terminal

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

Seiten 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-Komponenten 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.

Seiten Hard

Self-Ordering Kiosk

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

Seiten 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.

Seiten 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.

Seiten 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.

Seiten 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.

Seiten 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.

Komponenten Hard

Hero Code Space Background

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

Architekturen Hard

Micro-Frontend Architecture (Module Federation)

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

Architekturen 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.

Architekturen Hard

Turborepo Monorepo Architecture

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

Architekturen Hard

Nx Monorepo Architecture

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

Architekturen 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-Komponenten Hard

ARIA Combobox

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

UI-Komponenten Hard

ARIA Tree View

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

Boilerplates 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-Komponenten Hard

Color Blind Modes

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

UI-Komponenten 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-Komponenten 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.

Ultra-HD-Seiten 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.

Ultra-HD-Seiten 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.

Nach Kategorie durchsuchen

Baue mit Kontrolle

Nimm, was funktioniert. Liefere, was du willst.

Für Menschen und Bots, die Software bauen wollen, ohne bei null zu beginnen.

StealThis ist eine reference-first Bibliothek. Prüfe jedes Element, verstehe, wie es funktioniert, und nutze es in deinem eigenen Stack wieder. Weniger Zersplitterung, weniger Komplexität und mehr Kontrolle über das Stylesystem und die Werkzeuge, mit denen du bauen willst.

Das Ziel ist einfach: ein gemeinsamer Ort, an dem Wissen, bewährte Praktiken und produktionsreife Referenzen zusammenleben. Du wählst eine Basis, passt sie an und kommst voran, ohne jedes Mal die Grundlagen neu aufzubauen.

So nutzt du diesen Ort

01 Finde eine Referenz die bereits einen Teil deines Problems löst.

02 Verstehe sie schnell: Struktur, Verhalten und Implementierungsdetails.

03 Passe sie an an dein Stylesystem, deinen Stack und deine Grenzen.

04 Liefere früher ohne die Codequalität zu opfern.

Weniger Boilerplate. Weniger Kontextwechsel. Mehr bauen.

Was du in der Praxis bekommst

Du bekommst eine schnellere erste Version, stärkere Implementierungsreferenzen und weniger Sackgassen am Anfang. Statt Kontext aus zehn verschiedenen Quellen zusammenzustückeln, arbeitest du von einem Ort aus und gehst mit klarer Absicht voran.

A Geschwindigkeit mit Kontrolle: starte von einer echten Basis und behalte deine eigenen Standards.

B Gemeinsame Sprache: Menschen und Bots können von denselben Referenzen aus denken.

C Wachsendes Wissen: jede Wiederverwendung macht den nächsten Build einfacher.

Zukünftige Richtung: eigene visuelle Systeme, eigene Workflow-Setups und Softwareentwicklung von überall nach deinen Regeln.

Roadmap in Arbeit

Von Grundlagen zu einem AI-first Web-Framework

Wir bauen das öffentlich, Schritt für Schritt. Der Weg beginnt mit starken Grundlagen, dann Dokumentationsqualität, dann Workflows zur Projekterstellung und schließlich einem leichten Framework, um Websoftware mit AI-Unterstützung zu bauen.

Grundlagen bauen

Die Basisarchitektur, Kernseiten, wiederverwendbaren Primitive und die visuelle Sprache stabilisieren.

Dokumentation mit Best Practices verbessern

Leitlinien klarer, praktischer und umsetzbarer machen, damit Menschen schneller und mit weniger Verwirrung implementieren können.

Den Builder für Projekterstellung verbessern

Setup-Reibung reduzieren und das Projekt-Scaffolding aus Referenzen besser steuerbar machen.

Das grundlegende StealThis-Framework erstellen

Ein einfaches Framework für Webprojekte, inspiriert von Astro-ähnlichen Workflows und mit Fokus auf AI-gestützte Erstellung.

Projektsprache

Die Wörter, die dieses Projekt definieren

Das sind keine Marketingbegriffe. Es sind Arbeitsprinzipien dafür, wie wir Software mit weniger Komplexität und mehr Eigenverantwortung bauen, teilen und ausliefern.

KONTROLLE

Kontrolle bedeutet, deinen Stack, dein Stylesystem und dein Liefertempo zu wählen, ohne an starre Standards gebunden zu sein.

REFERENZ

Referenz bedeutet, aus konkreten Implementierungen zu lernen, nicht aus abstrakten Fäden über verstreute Quellen hinweg.

WIEDERVERWENDUNG

Wiederverwendung ist der Standard. Starte von einer bewährten Basis, passe sie an und stecke Energie in Differenzierung statt Wiederholung.

ZUSAMMENARBEIT

Zusammenarbeit bedeutet, dass Menschen und Bots aus demselben Kontext, denselben Konventionen und denselben Produktionsreferenzen bauen.

PRAXIS

Praxis ist der Ort, an dem Qualität entsteht: wiederholbare Workflows, getestete Muster und Umsetzungsdisziplin.

VERANTWORTUNG

Verantwortung bedeutet zu verstehen, was du betreibst, warum es funktioniert und wie du es weiterentwickelst, wenn sich Anforderungen ändern.

KLARHEIT

Klarheit nimmt Reibung heraus: ein Ort für Referenzen, eine Sprache für Entscheidungen, ein Pfad von der Idee zur Auslieferung.

LIEFERN

Liefern bedeutet, früher in Produktion zu kommen, ohne Standards für Architektur, Barrierefreiheit und Wartbarkeit zu senken.

Steal This Philosophie

Wörter, die wir beim Bauen sichtbar machen

Jede Zeile unten ist ein Bekenntnis zu einer praktischeren Art, Software zu bauen: geerdete Referenzen, geteilter Kontext und schnellere Ausführung mit Kontrolle.