Vielzeug

Compose the tools. Build the product.

Focused TypeScript packages for everything from UI and state to routing, data, forms, and domain logic. Independently useful. Designed to work together.

Explore reference apps Explore the package ecosystem
VoyageVoyage destination discovery page with a Tokyo hero and travel search controls E-commerceAutomotive storefront with featured vehicles, search, filters, and shopping navigation CRMCRM dashboard with revenue metrics, forecast chart, activity, and customer opportunities
VoyageVoyage destination discovery page with a Tokyo hero and travel search controls
  • Source included Inspect every implementation
  • Keyboard tested Focus and navigation verified
  • Light and dark Designed in both themes
  • Same-commit demos Deployed with these docs

Production-grade reference applications.

Choose a product to inspect its workflow, implementation, and package composition.

VoyageTravel planningE-commerceConsumer shoppingCRMCustomer management
Travel planning

Every moment, beautifully mapped.

Destination discovery, booking, route planning, and a day-by-day Japan itinerary.

Launch Voyage (opens in a new tab) View source (opens in a new tab)
Voyage ยท Reference workflow
Voyage Japan itinerary with route map, reservations, dates, and trip statistics

What it demonstrates

  • Spatial planningExplore Tokyo, Kyoto, and Osaka through an interactive route.
  • Day-by-day itineraryShape a chronological plan with distinct travel activity types.
  • Connected bookingMove from room selection through guest details to confirmation.
  • Responsive journeyTravel-first layouts remain focused and touch-friendly on mobile.

Technical composition

Voyage selected

Refine is the UI layer.

Framework-agnostic web components provide the controls and visual language. Focused Vielzeug packages supply the application behavior around them.

Explore Refine components Accessibility approach
UIRefineButtons, cards, badges, navigation, forms, and dialogs
RenderingOreDeclarative, framework-neutral custom elements
BehaviorFocused packagesRouting, state, data, forms, search, permissions, and domain logic
import '@vielzeug/refine/button'
import { createRouter } from '@vielzeug/wayfinder'
import { signal } from '@vielzeug/ripple'