First steps
Open setup guidance
First steps
Complete these optional setup steps when ready.
- 1
Connect a bank account
Import accounts and reconcile current balances.
Complete: Review imported accounts
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let setupSteps =
[ FirstStep.create "connect-bank" "Connect a bank account"
|> FirstStep.withDescription "Import accounts and reconcile current balances."
|> FirstStep.withAction (a { _href "/components/collection"; _class "text-sm font-semibold text-[var(--fve-brand-text)] underline-offset-2 hover:underline"; "Connect account" })
FirstStep.create "review-accounts" "Review imported accounts"
|> FirstStep.complete ]
let firstStepsExample =
FirstSteps.create "ledger-first-steps" "First steps" setupSteps
|> FirstSteps.withinContainer
|> FirstSteps.renderMinimized guidance
First steps
Complete these optional setup steps when ready.
- 1
Connect a bank account
Import accounts and reconcile current balances.
Complete: Review imported accounts
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let setupSteps =
[ FirstStep.create "connect-bank" "Connect a bank account"
|> FirstStep.withDescription "Import accounts and reconcile current balances."
|> FirstStep.withAction (a { _href "/components/collection"; _class "text-sm font-semibold text-[var(--fve-brand-text)] underline-offset-2 hover:underline"; "Connect account" })
FirstStep.create "review-accounts" "Review imported accounts"
|> FirstStep.complete ]
let minimizedFirstStepsExample =
FirstSteps.create "minimized-first-steps" "First steps" setupSteps
|> FirstSteps.withinContainer
|> FirstSteps.minimized
|> FirstSteps.renderDismissed with restore
First steps
Complete these optional setup steps when ready.
- 1
Connect a bank account
Import accounts and reconcile current balances.
Complete: Review imported accounts
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let setupSteps =
[ FirstStep.create "connect-bank" "Connect a bank account"
|> FirstStep.withDescription "Import accounts and reconcile current balances."
|> FirstStep.withAction (a { _href "/components/collection"; _class "text-sm font-semibold text-[var(--fve-brand-text)] underline-offset-2 hover:underline"; "Connect account" })
FirstStep.create "review-accounts" "Review imported accounts"
|> FirstStep.complete ]
let dismissedFirstStepsExample =
FirstSteps.create "dismissed-first-steps" "First steps" setupSteps
|> FirstSteps.withinContainer
|> FirstSteps.dismissed
|> FirstSteps.render