recipes

package
v1.5.0 Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Jul 30, 2026 License: MIT Imports: 5 Imported by: 0

Documentation

Overview

templ: version: v0.3.1020

Package recipes ships composition screens built from the library's existing primitives (display, forms, layout, navigation). Each recipe is a screen-level component — Dashboard, SettingsLayout, LoginCard — that composes primitives into a complete layout via templ.Component slots.

recipes is a top-of-DAG package: it imports downward only (into display/forms/ layout/navigation/utils/icons) and is imported by nothing inside the library. See docs/adr/0019-recipes-package.md for the design rationale.

templ: version: v0.3.1020

templ: version: v0.3.1020

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func Dashboard

func Dashboard(props DashboardProps) templ.Component

Dashboard renders a complete dashboard screen: AppShell with a sidebar, sticky header, a page header (title + optional actions), a responsive stat card grid, and a charts grid. Every slot is consumer-supplied via templ.Component — Dashboard provides the scaffold only.

Pass components for Sidebar (typically navigation.SidebarNav), Header (typically navigation.Nav), StatCards (display.StatCard instances), and Charts (display.Card-wrapped visualizations). Charts and StatCards slices may be empty.

@recipes.Dashboard(recipes.DashboardProps{
   Title:       "Overview",
   Subtitle:    "Last 30 days",
   Sidebar:     navSidebar,
   Header:      navHeader,
   StatCards:   []templ.Component{stat1, stat2, stat3, stat4},
   Charts:      []templ.Component{chart1, chart2},
});

func LoginCard

func LoginCard(props LoginCardProps) templ.Component

LoginCard renders a centered sign-in card with a header, form body, optional OAuth divider + buttons, and a footer. The canonical login screen.

Pass a forms.Form as FormBody (typically with Layout: forms.FormLayoutStack for vertical label-above-input layout). Pass display.Button components in OAuthButtons for "Continue with X" options.

@recipes.LoginCard(recipes.LoginCardProps{
   Title:    "Sign in to Acme",
   Subtitle: "Welcome back",
   FormBody: signInForm,
   OAuthButtons: templ.Raw(`<div class="grid grid-cols-2 gap-3">…</div>`),
   Footer:   templ.Raw(`<p>Need an account? <a href="/signup">Sign up</a></p>`),
})

func SettingsLayout

func SettingsLayout(props SettingsLayoutProps) templ.Component

SettingsLayout renders a titled page with a section-nav aside and a stack of Card-wrapped form sections in the main column. The canonical admin settings page.

@recipes.SettingsLayout(recipes.SettingsLayoutProps{
   Title:    "Account settings",
   Subtitle: "Manage your profile and preferences",
   Aside:    sectionNav,
   Sections: []recipes.SettingsSection{
     {ID: "profile", Title: "Profile", Body: profileForm},
     {ID: "security", Title: "Security", Body: securityForm},
   },
})

Types

type DashboardProps

type DashboardProps struct {
	utils.BaseProps

	// Title and Subtitle render in a display.PageHeader at the top of the
	// content column.
	Title    string
	Subtitle string
	// Breadcrumb is an optional templ.Component slot (typically
	// navigation.Breadcrumbs) rendered above the title in the PageHeader.
	Breadcrumb templ.Component
	// Sidebar is the desktop sidebar slot (typically navigation.SidebarNav).
	// Required for the dashboard layout; pass nil for a sidebar-less shell.
	Sidebar templ.Component
	// MobileNav is the below-lg mobile navigation slot (typically
	// display.Drawer). Optional.
	MobileNav templ.Component
	// Header is the sticky top header slot (typically navigation.Nav). Optional.
	Header templ.Component
	// HeaderActions is rendered on the right side of the PageHeader (above
	// the stat grid). Use it for "Add" buttons, filters, or time-range
	// pickers. Optional.
	HeaderActions templ.Component
	// StatCards is the slice of display.StatCard components rendered in a
	// responsive 4-up grid at the top of the dashboard body.
	StatCards []templ.Component
	// Charts is the slice of chart/visualization components rendered below
	// the stat grid in a responsive 2-up grid. Each chart should be wrapped
	// in a display.Card by the consumer.
	Charts []templ.Component
	// SidebarWidth controls the AppShell sidebar width. Default
	// layout.SidebarWidthMD (16rem).
	SidebarWidth layout.SidebarWidth
}

DashboardProps configures a recipes.Dashboard screen. A dashboard is an AppShell with a stat-card grid and arbitrary chart/content slots. Every slot is a templ.Component so the consumer controls the actual content — recipes.Dashboard provides the layout scaffold only.

Pass slots via templ.Component (Card.Body, navigation.Nav, display.Grid, etc.). The Sidebar slot is typically navigation.SidebarNav; the Header slot is typically navigation.Nav or navigation.SimpleNav. StatCards is a slice of display.StatCard components rendered inside a display.Grid. Charts is a slice of arbitrary chart components (display.Card-wrapped) rendered below the stat grid.

func DefaultDashboardProps

func DefaultDashboardProps() DashboardProps

DefaultDashboardProps returns sensible defaults (MD sidebar, no slots).

type LoginCardProps

type LoginCardProps struct {
	utils.BaseProps

	// Title renders as the card header. Default: "Sign in".
	Title string
	// Subtitle renders as muted text under the Title. Optional.
	Subtitle string
	// FormBody is the main form content (email + password + submit button).
	// Typically a forms.Form with Layout: forms.FormLayoutStack. Required.
	FormBody templ.Component
	// OAuthButtons renders below the form body, separated by a divider.
	// Use it for "Continue with Google/GitHub" buttons. Optional.
	OAuthButtons templ.Component
	// Footer renders below everything (typically "Don't have an account?
	// Sign up"). Optional.
	Footer templ.Component
}

LoginCardProps configures a recipes.LoginCard screen — the canonical centered Card with email + password form, optional OAuth slots, and "remember me" / "forgot password" affordances.

The form body and OAuth buttons are consumer-supplied templ.Component slots so the consumer controls the actual input fields, validation, and HTMX wiring. LoginCard provides the layout: a centered max-w card with a title header and a vertical form stack body.

func DefaultLoginCardProps

func DefaultLoginCardProps() LoginCardProps

DefaultLoginCardProps returns sensible defaults (Title: "Sign in").

type SettingsLayoutProps

type SettingsLayoutProps struct {
	utils.BaseProps

	// Title and Subtitle render at the top of the page.
	Title    string
	Subtitle string
	// Aside is the section navigation slot (typically a Card-wrapped list
	// of links to #section-id anchors). Required.
	Aside templ.Component
	// Sections is the list of form sections rendered in the main column.
	// Each section is rendered as a Card with Title + a form body. The
	// Section.ID becomes the card's id (for anchor navigation from Aside).
	Sections []SettingsSection
}

SettingsLayoutProps configures a recipes.SettingsLayout screen — the canonical "section nav on the left, form content on the right" pattern used by almost every settings page in every admin panel.

The aside is a vertical list of section links; the main is a stack of Card-wrapped forms (one per section). Both are consumer-supplied templ.Component slots.

func DefaultSettingsLayoutProps

func DefaultSettingsLayoutProps() SettingsLayoutProps

DefaultSettingsLayoutProps returns sensible defaults (empty).

type SettingsSection

type SettingsSection struct {
	// ID is used as the anchor target (id attribute) so the Aside links
	// can jump to it. Optional but recommended.
	ID string
	// Title renders as the Card header.
	Title string
	// Subtitle renders as muted text under the Title. Optional.
	Subtitle string
	// Body is the form content of the section. Typically a forms.Form
	// or a Card.Body slot. Required.
	Body templ.Component
}

SettingsSection is one titled section of a settings page.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL