Announcement bar
A slim top bar with an LED, a message and a dismissible close key.
Fit
announcement-bar.html
Loading…AnnouncementBar.tsx
Loading…40Sections
Sections
Full-width building blocks. Preview each one at real device widths, then copy the HTML or React.
Marketing
Hero · device
Split hero with a working control surface: real knobs, a fader and an LCD on a screwed panel.
Fit
hero-device.html
Loading…HeroDevice.tsx
Loading…Hero · centered
A centered statement hero with a product photo tray and a soft light glow.
Fit
hero-centered.html
Loading…HeroCentered.tsx
Loading…Hero · console
A dark, LCD-led hero with a terminal-style install command and copy key.
Fit
hero-console.html
Loading…HeroConsole.tsx
Loading…Logo strip
A row of fictional studio wordmarks engraved into a panel. Swap in your customers.
Fit
logo-strip.html
Loading…LogoStrip.tsx
Loading…How it works
Three numbered steps on keycaps with a connecting rail.
Fit
how-it-works.html
Loading…HowItWorks.tsx
Loading…Features · grid
Six features on keycap icons in a responsive grid of panels.
Fit
features-grid.html
Loading…FeaturesGrid.tsx
Loading…Features · bento
An asymmetric bento grid with live controls, an LCD tile, a photo tile and a switch bank.
Fit
features-bento.html
Loading…FeaturesBento.tsx
Loading…Features · alternating
Image and copy rows that alternate sides, each with a short checklist.
Fit
features-alternating.html
Loading…FeaturesAlternating.tsx
Loading…Spec sheet
A technical specifications table in an engraved panel, with grouped rows.
Fit
spec-sheet.html
Loading…SpecSheet.tsx
Loading…Stats · LCD
Key figures on a backlit display strip. Replace with your own verified numbers.
Fit
stats-lcd.html
Loading…StatsLcd.tsx
Loading…Stats · meters
Comparison figures shown as segmented level meters with real progress semantics.
Fit
stats-meters.html
Loading…StatsMeters.tsx
Loading…Pricing · three tiers
Three plans with a monthly / yearly switch that swaps prices, and a highlighted plan.
Fit
pricing-3tier.html
Loading…Pricing3tier.tsx
Loading…Pricing · compare table
A feature comparison table with sticky plan headers and scrollable columns on mobile.
Fit
pricing-compare.html
Loading…PricingCompare.tsx
Loading…Pricing · single
One product, one price: a hardware-style price tag panel with included items.
Fit
pricing-single.html
Loading…PricingSingle.tsx
Loading…Testimonials · grid
A masonry-style grid of quote cards from fictional customers with initial avatars.
Fit
testimonials-grid.html
Loading…TestimonialsGrid.tsx
Loading…Testimonial · large quote
One big pull quote set in the display face, framed by a screwed panel.
Fit
testimonial-quote.html
Loading…TestimonialQuote.tsx
Loading…CTA · panel
A bold accent call-to-action panel with grille texture and two actions.
Fit
cta-panel.html
Loading…CtaPanel.tsx
Loading…CTA · newsletter
Email capture with inline validation hint and a privacy note.
FAQ · accordion
Centered FAQ with animated single-open accordion.
Fit
faq-accordion.html
Loading…FaqAccordion.tsx
Loading…FAQ · two columns
An always-open FAQ in two columns with a support contact card.
Fit
faq-two-col.html
Loading…FaqTwoCol.tsx
Loading…Team grid
Team members on keycap cards with initials, role and social links. Fictional names.
Fit
team-grid.html
Loading…TeamGrid.tsx
Loading…Contact · split form
Contact form with validation-ready fields, a topic segmented control and office details.
Fit
contact-split.html
Loading…ContactSplit.tsx
Loading…Contact · cards
Three routes to get in touch, each on a keycap card.
Fit
contact-cards.html
Loading…ContactCards.tsx
Loading…Navigation
Navbar
Marketing header with brand, links, theme toggle and a disclosure menu on mobile.
Footer · large
Multi-column footer with newsletter, link groups, status LED and a giant engraved wordmark.
Footer · simple
One-row footer with brand, links and theme toggle.
Content
Blog · cards
Three article cards with image, tag, date and reading time.
Fit
blog-cards.html
Loading…BlogCards.tsx
Loading…Blog · featured
One featured article with large image and a list of recent posts.
Fit
blog-featured.html
Loading…BlogFeatured.tsx
Loading…Error · 404
A not-found screen with an LCD error readout and ways back.
Fit
error-404.html
Loading…Error404.tsx
Loading…Application
App header
Product top bar with workspace switcher, search, notifications and a user menu.
Dashboard · KPIs
Four KPI tiles with icons, deltas and tabular values.
Fit
dash-kpis.html
Loading…DashKpis.tsx
Loading…Dashboard · chart
An SVG area chart with gridlines, a range control and an accessible summary.
Fit
dash-chart.html
Loading…DashChart.tsx
Loading…Dashboard · table
A full data table card with toolbar, search, sortable columns, bulk select and pagination.
Fit
dash-table.html
Loading…DashTable.tsx
Loading…Dashboard · activity
A team activity feed beside a storage gauge and quick actions.
Fit
dash-activity.html
Loading…DashActivity.tsx
Loading…Dashboard · sidebar
App sidebar with brand, navigation, current state, usage card and account row.
Settings panel
Settings with vertical tabs, a profile form, preference switches and a danger zone.
Fit
settings-panel.html
Loading…SettingsPanel.tsx
Loading…Auth · sign in
Split sign-in with passkey and magic link options, password reveal and a photo panel.
Fit
auth-signin.html
Loading…AuthSignin.tsx
Loading…Auth · sign up
Sign-up card with a password strength meter, terms checkbox and plan selector.
Fit
auth-signup.html
Loading…AuthSignup.tsx
Loading…Auth · verify code
Two-factor verification with a six-cell code input, resend timer and LCD hint.
Fit
auth-otp.html
Loading…AuthOtp.tsx
Loading…