Component library

Reusable UI, browsable in one place

React components live in Storybook. Plain HTML/CSS/JS page templates (nav bars, heroes, galleries, footers) are dependency-free files you can open directly — no build step.

React components

Interactive, themeable, browsable in both light and dark mode.

Open Storybook Select, DatePicker, TimePicker, PhoneInput, ImageCropPicker, Button, Navbar, Hero, Footer, AccountMenu, Testimonials, FAQAccordion, StatsBand, CTABanner, TeamGrid, GalleryGrid, ContactForm, LocationMap, PricingTable, ProcessSteps, NewsletterSignup, LogoMarquee, AnnouncementBar, ReviewsSummary, EventsList, ComingSoonPage, BeforeAfterSlider, VideoHero, StickyMobileCTA, Reveal, ScrollPlayVideo, DashboardShell, StatCard, Badge, Toggle, CardList/ListRow, EmptyState, PageHeader, Stepper →

Vanilla HTML templates

Structural page scaffolding for static (non-React) sites — open any of these directly.

Sticky nav, working hamburger menu below 768px.

Eyebrow / headline / subheading / CTAs.

Photo gallery hero

Full-bleed rotating photo hero, simple crossfade.

Photo gallery hero (dynamic)

Swipe transition + slow Ken Burns zoom. Proven on thehoundpub.

4 variants × 3 sizes as plain CSS classes.

Link columns + bottom legal bar, optional contact row.

Country picker + NANP-rule formatting/validation.

Bulletin widget embed

Copy-paste snippet + static preview of the widget markup.

Bulletin blog post template

Per-business blog-post starting point.

Bulletin blog index template

Optional blog index starting point.

Responsive card grid of quote + name/role.

Independently-expanding question/answer rows.

Big numbers + labels, quick credibility hit.

Standalone accent-filled closing call-to-action.

Photo grid + optional per-person booking link.

Photo grid with a click-to-enlarge lightbox.

Name/email/message, posts to Web3Forms.

Address + embedded Google Map + hours.

Pricing / menu table

Flexible priced-item list — menu or plans.

Numbered "How it works" sequence.

Newsletter signup

Single-input email capture band.

Continuously scrolling partner/press logos.

Announcement bar

Slim dismissible top banner.

Reviews summary

Aggregate star rating + review count + link out.

Date-badged events with a real "Add to calendar" download.

Coming soon page

Full holding page, noindex included.

Before/after slider

Drag-to-reveal image comparison.

Full-bleed muted autoplay video background.

Sticky mobile CTA

Persistent mobile-only bottom action bar.

Order widget embed

"Order online" card linking to a Skipana ordering page.

Booking widget embed

"Book now" card linking to an appointment-platform booking page.

Style presets

Buttons/Hero/Navbar/Footer/Testimonials/FAQAccordion/StatsBand/ CTABanner each come in extra visual treatments (shape, typography, layout — not just a color swap), so sites don't default to the same look. Same idea exists as a `preset` prop on the React components — see Storybook's "Style presets"/"Preset:" stories on each component.

Editorial warm — handcrafted, small-business feel

Solid warm surface, serif brand, no blur.

Text + real photo side by side, serif headline.

Full pill shape, underlined secondary.

Serif pull-quote above the link columns.

Photo gallery hero

Warm-tinted overlay, serif headline, pill controls.

Fuller-rounded field + country picker.

Bold editorial — energetic, high-contrast

Thick border, bold uppercase tracked links.

Oversized left-aligned type, no image needed.

Sharp corners, thick outline border, uppercase.

Giant closing headline, thick accent top border.

Photo gallery hero

Left-aligned oversized type, sharp square controls.

Sharp corners, thick 2px field border.

Minimal structured — quiet, premium/professional

Hairline border, underline-on-hover only.

Tight column, mono eyebrow with a rule beneath.

Small radius, tracked-out uppercase label.

Hairline dividers between columns.

Photo gallery hero

Narrower column, mono eyebrow, outline controls.

Small radius, quiet tracked-out label.

Retro print — handmade, zine/gig-poster feel

Thick border, bold stamped brand, hard-shadow CTA.

Bordered poster card, rotated stamp eyebrow badge.

Flat hard-edged "sticker" shadow, thick border.

Bold stamped closing statement, thick top rule.

Hard-shadow bordered cards, bold stamped names.

Thick rules, bold uppercase questions.

Thick rules top/bottom/between, black numerals.

Thick-bordered accent band, hard-shadow button.

Thick-bordered photo tiles, hard-shadow booking button.

Thick-bordered tiles, high-contrast lightbox.

Thick-bordered fields, hard-shadow submit button.

Thick-bordered map frame, rule-divided hours.

Pricing / menu table

Thick rules between rows, bold stamped names.

Thick-bordered number badges.

Newsletter signup

Thick-bordered band, hard-shadow submit button.

Bold stamped wordmarks, thick top/bottom rules.

Neon nightlife — dark-by-default, bars/venues/events

Forced-dark, glowing bottom edge and brand text.

Always-dark, crisp neon text glow (not a gradient).

Crisp glow bleed around the primary button.

Glowing closing statement, thin accent top rule.

Glow-bordered cards on a forced-dark surface.

Glowing heading, accent-tinted hairline rows.

Glowing numerals, accent-tinted dividers.

Accent band with a soft illuminated-sign glow.

Glow-bordered photo tiles on a forced-dark surface.

Glow-bordered tiles, accent-glow lightbox.

Forced-dark fields, glowing submit button.

Glow-framed map, accent-tinted hour dividers.

Pricing / menu table

Glowing featured price, accent-tinted rules.

Glowing number badges.

Newsletter signup

Forced-dark band, glowing submit button.

Glowing wordmarks, accent-tinted top/bottom rules.

Tech futuristic — Skipana/appointment-platform's own marketing sites

Translucent blur, accent-tinted active link, glowing CTA.

Faded dot-grid backdrop, mono dot-accented eyebrow pill.

Hairline border, tight (not neon-loud) accent glow.

Mono uppercase column headings, hairline rules.