ViteReactStarter

elseform — Vite Starter Template

By koative

Elseform is Koative's open-source website template collection, containing 100 independent React + Vite templates, each with its own layout, typography, color scheme and interactions, plus a searchable online gallery.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews

Desktop homepage1 / 2

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual browser screenshot from the verified demo.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-16View source

What stands out

A quick read of the recorded project description.

Contains 100 independent templates, each with its own layout, typography, color scheme and interactions, not reskinned versions of the same page

The gallery provides search, category filtering, collection/name/latest sorting, and desktop, tablet and mobile viewport controls

The gallery supports Light, Dark and System appearances; System mode follows the device, and explicit choices are remembered when browser storage is available

Each themes/<name>/ directory is a Vite project that can be copied and run independently, and comes with its own copy of the MIT license

Templates include CSS 3D geometry, controlled rotation, dynamic text and transition effects, and respect reduced-motion preferences

The gallery loads live previews on demand and does not run all templates simultaneously in the background

Template Details

Elseform is an open-source design collection published by Koative, containing 100 mutually independent website templates. Each template is a standalone Vite project with its own layout, typography, colors, motion and interactions, rather than a reskinned version of the same landing page. The templates cover photography, fashion, music events, dining, finance, healthcare, education, industry, retail and other industry directions; the README lists the domain and features corresponding to each template.

The repository also provides a gallery interface for browsing, searching, filtering by category and sorting templates, and supports Light / Dark / System appearance switching. The gallery loads live previews on demand and does not run all templates simultaneously in the background. Each template can also be accessed directly via /elseform/themes/<name>/.

On the technical stack, the README states that React, TypeScript and Vite are the shared foundation, using Bun workspaces to share dependencies, with the gallery using Tailwind CSS v4, icons from Lucide, and each template using its own scoped stylesheet. The build, preview and test commands are bun run build, bun run preview and bun run test respectively.

Note that the README explicitly states that all brands, business stories, financial data, schedules and analytics content are fictional examples, and that flows such as booking, inquiry, purchase and transfer are front-end demos only and will not send messages, collect payments or persist to a server. Cart and interface state are saved in the current browser session by default, and you need to connect your own backend before commercial use.

ViteReactStarter

Is it right for your project?

Use Cases

Quickly find a website starting point with an independent visual direction for different industries, such as architecture, fashion, finance, healthcare, education or retail
Copy a single template folder as a standalone project and modify its content, styles and assets
Browse all templates through gallery search, filtering and sorting, and switch between desktop, tablet and mobile viewports to check responsive behavior
Use the GitHub Pages workflow to deploy the entire collection or a single template to a static hosting environment
Try front-end demos such as CSS 3D, dynamic typography and interactive controls in the templates as implementation references

Suitable For

Designers and front-end developers who need multiple website starting points with different design directions
Teams that want to quickly build demos or prototypes based on React, TypeScript and Vite projects
Developers who need templates that can be extracted independently and do not depend on a shared component library
People who want to use MIT-licensed open-source templates for secondary development or learning

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Running the entire collection requires Bun 1.4.3 or newer; run git clone, bun install and bun run dev in sequence, then open http://localhost:5173/elseform/
2
To use a single template, copy that themes/<name>/ folder outside the repository, then run bun install and bun run dev; bun run build generates that template's own dist/ directory
3
Before copying a template directly from GitHub, you need to download the repository ZIP and extract the required folder
4
Before running the Playwright integration checks, you need to build first and run bunx playwright install chromium to install Chromium
5
When deploying to GitHub Pages, select GitHub Actions as the build source in the repository Settings → Pages, and push to the main branch to build and deploy via .github/workflows/pages.yml; changing the repository path requires modifying base in the root Vite configuration and updating the public links in the README and gallery/main.tsx

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.

Must comply with when using

You are allowed to use, modify, commercially use and distribute the code of this version for free.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

Demo images, fonts, icons and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments or AI may incur separate charges.
All template brands, business stories, financial data, schedules and analytics are fictional example content; booking, inquiry, purchase and transfer are front-end demos only and will not send messages, collect payments or persist to a server, and you need to connect your own backend before commercial use.
Third-party photography and fonts retain their respective licenses; see ASSETS.md and each template's README; when using a template for a real brand, you should replace them with images you own.
Running the entire collection requires Bun 1.4.3 or newer.
Before running the Playwright integration checks for the first time, you need to run bunx playwright install chromium to install Chromium.
If you copy a template directly from GitHub, you need to download the repository ZIP and extract the required folder first.
When using a template, you need to replace the demo contact address and the link back to the collection, and update the title and metadata in index.html.
When deploying to a different repository path, you need to modify base in the root Vite configuration and update the public links in the README and gallery/main.tsx; root-domain deployment should use /.
Deploying to GitHub Pages requires selecting GitHub Actions as the build source in the repository Settings → Pages and pushing to the main branch.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

All template brands, business stories, financial balances, schedules and analytics are fictional sample content. Reservations, inquiries, purchases and transfers are front-end demonstrations: they do not send messages, take payments or persist to a server. Cart and interface state live in the current browser session unless a template documents otherwise. Connect your own backend before using those flows commercially.
Original README

The source code is available under the **[MIT license](LICENSE)**. Third-party photography and fonts retain their respective licenses; see **[ASSETS.md](ASSETS.md)** and the template READMEs. Replace photos with imagery you own when adapting a template for a real brand.
Original README

Requires [Bun](https://bun.sh) 1.4.3 or newer.
Original README

For a fresh Playwright installation, run `bunx playwright install chromium` before the integration checks.
Original README

`bun run build` creates that template's own `dist/` directory. Its relative base works on a static host or under a subdirectory. If you copy a template directly from GitHub, download the repository ZIP first and extract the folder you want.
Original README

Edit `src/App.tsx` for content and interactions, `src/styles.css` for the visual system, and `src/assets/` for photography. Update `index.html` with your title and metadata. Replace demo contact addresses and links back to the collection. Each folder's README explains its specific controls and assets.
Original README

For a different repository path, change `base` in the root Vite configuration and update the public links in this README and `gallery/main.tsx`. For a root-domain deployment, use `/`.
Original README

In repository **Settings → Pages**, choose **GitHub Actions** as the build source. Push to `main` to build and deploy through `.github/workflows/pages.yml`. No custom domain is needed. This repository does not change the hosting or domain configuration of koative.com.
Original README

https://github.com/koative/elseform/blob/main/LICENSE https://github.com/koative/elseform/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-16. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 85 / 100
Technologies: Vite · React
Website type: Starter

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2026-10-16
Screenshot last checked: 2026-10-16

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: codex-user-requested-batch-review-20261017 · 2026-10-16

Inspect the recorded source material

SHA-256: 6040935e0c8efbf9bda78599e24430db7ed19aff5985ef4de91047f50879b253

2026-10-16T01:43:41.535Z

Source file / repository

<div align="center">

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="public/elseform-wordmark-dark.svg" />
  <img src="public/elseform-wordmark.svg" alt="Elseform" width="230" />
</picture>

### Start with something else.

100 distinct website templates. Beautifully different. Open source. Entirely yours.

**[Explore the collection →](https://koative.github.io/elseform/)** · **[Koative](https://koative.com)**

![React](https://img.shields.io/badge/React-19-20232a?logo=react&logoColor=61dafb)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript&logoColor=white)
![Vite](https://img.shields.io/badge/Vite-7-646cff?logo=vite&logoColor=white)
![Bun](https://img.shields.io/badge/Bun-workspaces-f9f1e1?logo=bun&logoColor=222)
![License](https://img.shields.io/badge/license-MIT-303cdb)

</div>

[![Elseform — Start with something else](public/elseform-social.png)](https://koative.github.io/elseform/)

**Elseform** is an independent design collection by [Koative](https://koative.com). Find a starting point, explore a live demo, and make it your own.

This collection brings together one hundred deliberately different websites: photographic editorials, kinetic posters, spatial experiments, useful dashboards, and thoughtful storefronts. Each template owns its layout, typography, color palette, motion and interactions. These are separate design directions, not one hundred skins on the same landing page.

## Gallery appearance

Choose **Light**, **Dark** or **System** in the gallery. System follows your device’s appearance; an explicit choice is remembered on this device when browser storage is available. If storage is unavailable, the selected appearance still works for the current visit.

Appearance changes apply to the Elseform gallery and preview shell. Each template keeps its own visual identity, including inside the live preview.

## The collection

![All 100 Elseform templates](public/previews/collection.webp)

| Template                                 | World                   | Signature                                   | Live demo                                                            |
| ---------------------------------------- | ----------------------- | ------------------------------------------- | -------------------------------------------------------------------- |
| **[Forma](themes/forma)**                | Architecture            | Editorial, Project index                    | [Explore ↗](https://koative.github.io/elseform/themes/forma/)        |
| **[Orbit](themes/orbit)**                | Aerospace               | 3D motion, Interactive                      | [Explore ↗](https://koative.github.io/elseform/themes/orbit/)        |
| **[Muse](themes/muse)**                  | Fashion                 | Art direction, Collection                   | [Explore ↗](https://koative.github.io/elseform/themes/muse/)         |
| **[Pulse](themes/pulse)**                | Music & events          | Kinetic type, Schedule                      | [Explore ↗](https://koative.github.io/elseform/themes/pulse/)        |
| **[Haven](themes/haven)**                | Hospitality             | Immersive, Reservations                     | [Explore ↗](https://koative.github.io/elseform/themes/haven/)        |
| **[Ledger](themes/ledger)**              | Finance                 | Workspace, 3D card                          | [Explore ↗](https://koative.github.io/elseform/themes/ledger/)       |
| **[Ember](themes/ember)**                | Restaurant              | Menu, Table booking                         | [Explore ↗](https://koative.github.io/elseform/themes/ember/)        |
| **[Atelier](themes/atelier)**            | Creative studio         | Portfolio, Expressive                       | [Explore ↗](https://koative.github.io/elseform/themes/atelier/)      |
| **[Signal](themes/signal)**              | Analytics               | Dashboard, Data viz                         | [Explore ↗](https://koative.github.io/elseform/themes/signal/)       |
| **[Still](themes/still)**                | Wellness                | Slow motion, Breathing                      | [Explore ↗](https://koative.github.io/elseform/themes/still/)        |
| **[Terrain](themes/terrain)**            | Outdoor                 | Adventure, Route finder                     | [Explore ↗](https://koative.github.io/elseform/themes/terrain/)      |
| **[Roast](themes/roast)**                | Coffee shop             | Storefront, Local cart                      | [Explore ↗](https://koative.github.io/elseform/themes/roast/)        |
| **[Frame](themes/frame)**                | Photography             | Contact sheet, Image viewer                 | [Explore ↗](https://koative.github.io/elseform/themes/frame/)        |
| **[Monograph](themes/monograph)**        | Independent journal     | Editorial, Reading room                     | [Explore ↗](https://koative.github.io/elseform/themes/monograph/)    |
| **[Index](themes/index)**                | Bookstore               | Book catalog, Local bag                     | [Explore ↗](https://koative.github.io/elseform/themes/index/)        |
| **[Bloom](themes/bloom)**                | Floral studio           | Bouquet builder, Seasonal                   | [Explore ↗](https://koative.github.io/elseform/themes/bloom/)        |
| **[Velo](themes/velo)**                  | Performance cycling     | Configurator, Performance                   | [Explore ↗](https://koative.github.io/elseform/themes/velo/)         |
| **[Prism](themes/prism)**                | Design conference       | Event agenda, Tickets                       | [Explore ↗](https://koative.github.io/elseform/themes/prism/)        |
| **[Nocturne](themes/nocturne)**          | Listening bar           | 3D turntable, Listening room                | [Explore ↗](https://koative.github.io/elseform/themes/nocturne/)     |
| **[Arcade](themes/arcade)**              | Indie games             | Playable, Game studio                       | [Explore ↗](https://koative.github.io/elseform/themes/arcade/)       |
| **[Kiln](themes/kiln)**                  | Ceramic objects         | Object gallery, 3D display                  | [Explore ↗](https://koative.github.io/elseform/themes/kiln/)         |
| **[Aura](themes/aura)**                  | Skincare                | Ritual builder, Beauty                      | [Explore ↗](https://koative.github.io/elseform/themes/aura/)         |
| **[Tide](themes/tide)**                  | Ocean conservation      | Volunteer, Conservation                     | [Explore ↗](https://koative.github.io/elseform/themes/tide/)         |
| **[Relay](themes/relay)**                | Logistics               | Operations, Tracking                        | [Explore ↗](https://koative.github.io/elseform/themes/relay/)        |
| **[Solace](themes/solace)**              | Healthcare clinic       | Healthcare, Booking, Calm                   | [Explore ↗](https://koative.github.io/elseform/themes/solace/)       |
| **[Helix](themes/helix)**                | Biotechnology           | Research library, Molecular model           | [Explore ↗](https://koative.github.io/elseform/themes/helix/)        |
| **[Aperture](themes/aperture)**          | Independent cinema      | Cinematic, Programme, Tickets               | [Explore ↗](https://koative.github.io/elseform/themes/aperture/)     |
| **[Counsel](themes/counsel)**            | Law practice            | Legal, Editorial, Enquiry                   | [Explore ↗](https://koative.github.io/elseform/themes/counsel/)      |
| **[Grid](themes/grid)**                  | Renewable Energy        | Solar planner, Daylight model               | [Explore ↗](https://koative.github.io/elseform/themes/grid/)         |
| **[Tempo](themes/tempo)**                | Dance studio            | Kinetic, Timetable, Bold                    | [Explore ↗](https://koative.github.io/elseform/themes/tempo/)        |
| **[Meridian](themes/meridian)**          | Real estate             | Property, Map, Search                       | [Explore ↗](https://koative.github.io/elseform/themes/meridian/)     |
| **[Forge](themes/forge)**                | Precision Manufacturing | CSS 3D, Industrial, Configurator            | [Explore ↗](https://koative.github.io/elseform/themes/forge/)        |
| **[Summit](themes/summit)**              | Climbing gym            | Route map, Hold walkthrough                 | [Explore ↗](https://koative.github.io/elseform/themes/summit/)       |
| **[Equinox](themes/equinox)**            | Planetarium             | Celestial atlas, Visit planner              | [Explore ↗](https://koative.github.io/elseform/themes/equinox/)      |
| **[Campus](themes/campus)**              | Online learning         | Learning workspace, Observation study       | [Explore ↗](https://koative.github.io/elseform/themes/campus/)       |
| **[Vector](themes/vector)**              | Automotive              | Cinematic, Automotive, Configurator         | [Explore ↗](https://koative.github.io/elseform/themes/vector/)       |
| **[Chapter](themes/chapter)**            | Podcast publication     | Editorial, Audio, Journal                   | [Explore ↗](https://koative.github.io/elseform/themes/chapter/)      |
| **[Civic](themes/civic)**                | Public services         | Government, Directory, Search               | [Explore ↗](https://koative.github.io/elseform/themes/civic/)        |
| **[Cipher](themes/cipher)**              | Cybersecurity           | Access review, Quiet, Product UI            | [Explore ↗](https://koative.github.io/elseform/themes/cipher/)       |
| **[Ink](themes/ink)**                    | Tattoo studio           | Flashbook, Minimal, Booking                 | [Explore ↗](https://koative.github.io/elseform/themes/ink/)          |
| **[Vow](themes/vow)**                    | Wedding planning        | Wedding, Folio, Planner                     | [Explore ↗](https://koative.github.io/elseform/themes/vow/)          |
| **[Stack](themes/stack)**                | Developer Documentation | Documentation, Code, Playground             | [Explore ↗](https://koative.github.io/elseform/themes/stack/)        |
| **[Proof](themes/proof)**                | Artisan bakery          | Tactile, Order sheet, Bakery                | [Explore ↗](https://koative.github.io/elseform/themes/proof/)        |
| **[Atlas](themes/atlas)**                | Public transport        | Route planner, Network map                  | [Explore ↗](https://koative.github.io/elseform/themes/atlas/)        |
| **[Kindred](themes/kindred)**            | Pet adoption            | Pets, Adoption, Playful                     | [Explore ↗](https://koative.github.io/elseform/themes/kindred/)      |
| **[Flux](themes/flux)**                  | Workflow Automation     | Workflow editor, Condition testing          | [Explore ↗](https://koative.github.io/elseform/themes/flux/)         |
| **[Grove](themes/grove)**                | Farm & CSA              | Seasonal, Calendar, Organic                 | [Explore ↗](https://koative.github.io/elseform/themes/grove/)        |
| **[Odyssey](themes/odyssey)**            | Travel planning         | Travel, Itinerary, Journal                  | [Explore ↗](https://koative.github.io/elseform/themes/odyssey/)      |
| **[Loom](themes/loom)**                  | Textiles & Materials    | Material library, Sample box                | [Explore ↗](https://koative.github.io/elseform/themes/loom/)         |
| **[Palette](themes/palette)**            | Art supplies            | Color lab, Mixing ramp                      | [Explore ↗](https://koative.github.io/elseform/themes/palette/)      |
| **[Lumen](themes/lumen)**                | Eyewear                 | Eyewear, 3D, Configurator                   | [Explore ↗](https://koative.github.io/elseform/themes/lumen/)        |
| **[Vault](themes/vault)**                | Insurance               | Plan explorer, Live summary                 | [Explore ↗](https://koative.github.io/elseform/themes/vault/)        |
| **[Drift](themes/drift)**                | Surf school             | Coastal, Field guide, Lessons               | [Explore ↗](https://koative.github.io/elseform/themes/drift/)        |
| **[Commons](themes/commons)**            | Coworking               | Floor plan, Day passes                      | [Explore ↗](https://koative.github.io/elseform/themes/commons/)      |
| **[Heirloom](themes/heirloom)**          | Jewelry atelier         | Jewelry, 3D rotation                        | [Explore ↗](https://koative.github.io/elseform/themes/heirloom/)     |
| **[Harbor](themes/harbor)**              | Port Operations         | Port operations, Map, Workspace             | [Explore ↗](https://koative.github.io/elseform/themes/harbor/)       |
| **[Chroma](themes/chroma)**              | Hair salon              | Lookbook, Editorial, Appointments           | [Explore ↗](https://koative.github.io/elseform/themes/chroma/)       |
| **[Saffron](themes/saffron)**            | Grocery market          | Grocery, Seasonal, Basket                   | [Explore ↗](https://koative.github.io/elseform/themes/saffron/)      |
| **[Alloy](themes/alloy)**                | Construction            | Construction, Blueprint, Project index      | [Explore ↗](https://koative.github.io/elseform/themes/alloy/)        |
| **[Encore](themes/encore)**              | Theatre                 | Theatre, Seating, Dramatic                  | [Explore ↗](https://koative.github.io/elseform/themes/encore/)       |
| **[Nest](themes/nest)**                  | Childcare               | Childcare, Timetable, Playful               | [Explore ↗](https://koative.github.io/elseform/themes/nest/)         |
| **[Circuit](themes/circuit)**            | Electronics Repair      | Repair intake, Exploded hardware            | [Explore ↗](https://koative.github.io/elseform/themes/circuit/)      |
| **[Field](themes/field)**                | Community sports        | Sports, Match hub, Community                | [Explore ↗](https://koative.github.io/elseform/themes/field/)        |
| **[Gavel](themes/gavel)**                | Auctions                | Lot catalog, Demo bidding                   | [Explore ↗](https://koative.github.io/elseform/themes/gavel/)        |
| **[Brine](themes/brine)**                | Seafood market          | Market counter, Basket, Coastal             | [Explore ↗](https://koative.github.io/elseform/themes/brine/)        |
| **[Folio](themes/folio)**                | Printmaking gallery     | Print archive, Original geometry, Shortlist | [Explore ↗](https://koative.github.io/elseform/themes/folio/)        |
| **[Patina](themes/patina)**              | Vintage furniture       | Vintage objects, Interior, Shortlist        | [Explore ↗](https://koative.github.io/elseform/themes/patina/)       |
| **[Nectar](themes/nectar)**              | Apiary & honey          | Tasting notes, 3D jar, Seasonal             | [Explore ↗](https://koative.github.io/elseform/themes/nectar/)       |
| **[Alpine](themes/alpine)**              | Ski equipment rental    | Rental calculator, Equipment, Mountain      | [Explore ↗](https://koative.github.io/elseform/themes/alpine/)       |
| **[Sonnet](themes/sonnet)**              | Language school         | Languages, Course finder, Word cards        | [Explore ↗](https://koative.github.io/elseform/themes/sonnet/)       |
| **[Mosaic](themes/mosaic)**              | Interior design         | Material library, Moodboard, Interiors      | [Explore ↗](https://koative.github.io/elseform/themes/mosaic/)       |
| **[Lacquer](themes/lacquer)**            | Nail art studio         | Color configurator, Sculptural, Beauty      | [Explore ↗](https://koative.github.io/elseform/themes/lacquer/)      |
| **[Truffle](themes/truffle)**            | Chocolate atelier       | Gift builder, 3D box, Chocolate             | [Explore ↗](https://koative.github.io/elseform/themes/truffle/)      |
| **[Score](themes/score)**                | Music lessons           | Playable piano, Web Audio, Lesson planner   | [Explore ↗](https://koative.github.io/elseform/themes/score/)        |
| **[Sprout](themes/sprout)**              | Garden nursery          | Plant finder, Garden planner, Botanical     | [Explore ↗](https://koative.github.io/elseform/themes/sprout/)       |
| **[Ripple](themes/ripple)**              | Swimming academy        | Timetable, Lane motion, Lessons             | [Explore ↗](https://koative.github.io/elseform/themes/ripple/)       |
| **[Ballast](themes/ballast)**            | Rail freight            | Dispatch board, Route motion                | [Explore ↗](https://koative.github.io/elseform/themes/ballast/)      |
| **[Delta](themes/delta)**                | Water management        | Water model, Fluid motion                   | [Explore ↗](https://koative.github.io/elseform/themes/delta/)        |
| **[Strata](themes/strata)**              | Geological survey       | Field atlas, Layer study                    | [Explore ↗](https://koative.github.io/elseform/themes/strata/)       |
| **[Cadence](themes/cadence)**            | Hiring workspace        | Hiring workspace, Shortlist                 | [Explore ↗](https://koative.github.io/elseform/themes/cadence/)      |
| **[Conduit](themes/conduit)**            | API integrations        | Event simulator, Developer tool             | [Explore ↗](https://koative.github.io/elseform/themes/conduit/)      |
| **[Lumenary](themes/lumenary)**          | Lighting design         | Object study, CSS lighting                  | [Explore ↗](https://koative.github.io/elseform/themes/lumenary/)     |
| **[Waypoint](themes/waypoint)**          | Flight school           | Heading dial, Route planner                 | [Explore ↗](https://koative.github.io/elseform/themes/waypoint/)     |
| **[Torque](themes/torque)**              | Motorcycle workshop     | Mechanical motion, Service builder          | [Explore ↗](https://koative.github.io/elseform/themes/torque/)       |
| **[Verdant](themes/verdant)**            | Urban farming           | Garden planner, Growing journal             | [Explore ↗](https://koative.github.io/elseform/themes/verdant/)      |
| **[Parcel](themes/parcel)**              | Postal shipping         | Rate calculator, Label preview              | [Explore ↗](https://koative.github.io/elseform/themes/parcel/)       |
| **[Beacon](themes/beacon)**              | Preparedness            | Household checklist, Progress states        | [Explore ↗](https://koative.github.io/elseform/themes/beacon/)       |
| **[Keystone](themes/keystone)**          | Structural engineering  | Structural diagram, Material study          | [Explore ↗](https://koative.github.io/elseform/themes/keystone/)     |
| **[Aurora](themes/aurora)**              | Northern lights lodge   | Immersive, Stay planner                     | [Explore ↗](https://koative.github.io/elseform/themes/aurora/)       |
| **[Reel](themes/reel)**                  | Documentary film        | Film archive, Editorial                     | [Explore ↗](https://koative.github.io/elseform/themes/reel/)         |
| **[Botanica](themes/botanica)**          | Botanical garden        | Field guide, Visit planner                  | [Explore ↗](https://koative.github.io/elseform/themes/botanica/)     |
| **[Cove](themes/cove)**                  | Sailing charters        | Route map, Voyages                          | [Explore ↗](https://koative.github.io/elseform/themes/cove/)         |
| **[Fable](themes/fable)**                | Children’s museum       | Playful, Programme                          | [Explore ↗](https://koative.github.io/elseform/themes/fable/)        |
| **[Cadence House](themes/cadencehouse)** | Recording studio        | 3D console, Sound studio                    | [Explore ↗](https://koative.github.io/elseform/themes/cadencehouse/) |
| **[Pour](themes/pour)**                  | Natural wine shop       | Product shelf, Case builder                 | [Explore ↗](https://koative.github.io/elseform/themes/pour/)         |
| **[Ascent](themes/ascent)**              | Paragliding school      | Adventure, Flight planner                   | [Explore ↗](https://koative.github.io/elseform/themes/ascent/)       |
| **[Emberlight](themes/emberlight)**      | Candle atelier          | Material study, Scent finder                | [Explore ↗](https://koative.github.io/elseform/themes/emberlight/)   |
| **[Sanctuary](themes/sanctuary)**        | Wildlife rescue         | Conservation, Animal journal                | [Explore ↗](https://koative.github.io/elseform/themes/sanctuary/)    |
| **[Kinetic](themes/kinetic)**            | Sports rehabilitation   | Movement, Care pathways                     | [Explore ↗](https://koative.github.io/elseform/themes/kinetic/)      |
| **[Horizon](themes/horizon)**            | Science publication     | Publication, Reading list                   | [Explore ↗](https://koative.github.io/elseform/themes/horizon/)      |

## The 100-template edition

This edition adds 36 independent templates and revisits the existing 64. The Elseform gallery brings an artistic liquid-glass identity, real screenshot previews, search, filters and responsive live demos. Save a local shortlist or use **Surprise me** to discover a design. Ten existing templates received focused improvements:

| Template                    | What changed                                                                                                                                                                                                                             |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Helix](themes/helix)       | The molecular specimen now exposes Backbone and Surface representations, with selected-study color and metadata. Layered geometric chains replace the isolated bead ring; motion can be paused.                                          |
| [Grid](themes/grid)         | The opening now contains an isometric 24-position solar array linked to the panel count and an adjustable time-of-day generation study. The planner explains home and battery energy paths; model values remain explicitly illustrative. |
| [Vault](themes/vault)       | A local interior photograph and live plan-summary sheet replace the generic geometric hero. The sheet reflects selected home, belongings value, plan and illustrative price. Muted text contrast is stronger.                            |
| [Campus](themes/campus)     | A photographic observation study replaces the repeated yellow typographic placeholder. Shape, Light and Rhythm lenses change the crop and teaching prompt while preserving lesson progress and notes.                                    |
| [Loom](themes/loom)         | Material selection and specifications form a two-column workspace. The active detail is sticky beside the swatch grid on desktop and follows it on mobile. Procedural fabric studies use more visible weave and fold depth.              |
| [Palette](themes/palette)   | Pigment specimens now choose a mixing input. Five proportion swatches let visitors compare and select blends. Mixed and saved color text chooses contrasting black or white from relative luminance.                                     |
| [Circuit](themes/circuit)   | An interactive exploded phone model replaces decorative circuit paths. Visitors assemble the device or inspect its screen, power cell and logic board. Layer motion respects reduced-motion preferences.                                 |
| [Heirloom](themes/heirloom) | The ring has fourteen depth layers and visitor-controlled rotation, with an explicit animation pause. Metal and engraving controls remain independent and working.                                                                       |
| [Summit](themes/summit)     | The route map gains distinct wall facets, bolt positions and a numbered selected hold. Previous/next controls walk the six-hold sequence with bounded disabled states.                                                                   |
| [Flux](themes/flux)         | A sample project budget makes the condition meaningful. Failed conditions stop subsequent simulated actions and show skipped outcomes. Reset restores default condition and sample data.                                                 |

## Start the whole collection

Requires [Bun](https://bun.sh) 1.4.3 or newer.

```sh
git clone https://github.com/koative/elseform.git
cd elseform
bun install
bun run dev
```

Open **http://localhost:5173/elseform/**. The gallery includes search, category filters, collection/name/newest sorting, keyboard-accessible previews and desktop, tablet and mobile viewport controls. Every demo is also directly addressable at `/elseform/themes/<name>/`.

```sh
bun run check     # TypeScript validation
bun run build     # Gallery + all one hundred templates → dist/
bun run preview   # Serve the production build
bun run test      # Playwright integration checks (build first)
```

For a fresh Playwright installation, run `bunx playwright install chromium` before the integration checks.

## Take one template

Each `themes/<name>/` folder is a standalone Vite project and includes its own MIT license copy. Copy a folder out of this repository, then install and run it:

```sh
cp -R themes/forma ../my-website
cd ../my-website
bun install
bun run dev
```

`bun run build` creates that template's own `dist/` directory. Its relative base works on a static host or under a subdirectory. If you copy a template directly from GitHub, download the repository ZIP first and extract the folder you want.

Edit `src/App.tsx` for content and interactions, `src/styles.css` for the visual system, and `src/assets/` for photography. Update `index.html` with your title and metadata. Replace demo contact addresses and links back to the collection. Each folder's README explains its specific controls and assets.

## Repository map

```text
├── gallery/                 # Collection UI, catalog and preview shell
├── themes/
│   ├── forma/               # An independent React + Vite app
│   ├── orbit/
│   └── ...                  # One hundred template folders in total
├── public/previews/         # Real screenshots used by the gallery
├── tests/                   # Production-route and interaction checks
├── scripts/                 # Preview capture tooling
├── .github/workflows/       # GitHub Pages build and deployment
└── vite.config.ts           # Collection multi-page build
```

React, TypeScript and Vite form the common foundation. Bun workspaces keep dependency installation shared. The gallery includes Tailwind CSS v4; individual templates use their own scoped stylesheets so they remain easy to extract and don't depend on a shared component kit. Lucide supplies consistent interface icons.

## Motion and accessibility

The templates include CSS 3D geometry, controlled rotations, animated type and deliberate transitions. Reduced-motion preferences are respected. Interactive controls use native buttons and form elements; keyboard focus remains visible. Photography is included locally. The gallery loads a live preview only when requested instead of running one hundred websites in the background.

## Publish with GitHub Pages

This repository is configured for **https://koative.github.io/elseform/**. The root Vite base is `/elseform/`, and the production build contains a real HTML entry for every demo, so direct links do not require a single-page-app fallback.

In repository **Settings → Pages**, choose **GitHub Actions** as the build source. Push to `main` to build and deploy through `.github/workflows/pages.yml`. No custom domain is needed. This repository does not change the hosting or domain configuration of koative.com.

For a different repository path, change `base` in the root Vite configuration and update the public links in this README and `gallery/main.tsx`. For a root-domain deployment, use `/`.

## Demo boundaries

All template brands, business stories, financial balances, schedules and analytics are fictional sample content. Reservations, inquiries, purchases and transfers are front-end demonstrations: they do not send messages, take payments or persist to a server. Cart and interface state live in the current browser session unless a template documents otherwise. Connect your own backend before using those flows commercially.

The source code is available under the **[MIT license](LICENSE)**. Third-party photography and fonts retain their respective licenses; see **[ASSETS.md](ASSETS.md)** and the template READMEs. Replace photos with imagery you own when adapting a template for a real brand.

## Make it your own

Keep the personality or take it somewhere completely different. Contributions that bring a genuinely new composition, sector or interaction are welcome. Please include responsive behavior, reduced-motion support, useful demo controls and documented assets.

---

Made by **[Koative](https://koative.com)**. Independent ideas, shared openly.

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

cove

Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.

Vite · SaaS

vite-react-boilerplate

A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.

Vite · Starter

vital

Vital is a Vite-based React starter template using TypeScript and Tailwind CSS, with an Atomic Design component directory, path aliases and Hero Icons.

Vite · Starter

react-vite-admin

A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.

Vite · Admin dashboard

typescript-react_best_practices-vite_template

A Vite + React + TypeScript starter template by CodelyTV, preconfigured with Jest and React Testing Library unit tests, Cypress end-to-end tests, ESLint and Prettier using Codely's shared configuration, GitHub Actions workflows, a Makefile, and Sass.

Vite · Starter

cloudflare-starter-kit

A Cloudflare Workers project scaffolding template maintained by kriasoft, using Vite and TypeScript, with three built-in workspaces: api, app, and edge, and preconfigured local testing, multiple environments, and a GitHub Actions deployment workflow.

Vite · Starter