Halftone UI

# npm i @halftone-ui/vue

<script setup>
import { HButton, HMeter } from "@halftone-ui/vue"
</script>

<template>
  <HButton color="purple">Create account</HButton>
  <HMeter label="Memory" :value="68" />
</template>

# npm i @halftone-ui/react

import { Button, Meter } from "@halftone-ui/react"

export function Panel() {
  return (
    <>
      <Button color="purple">Create account</Button>
      <Meter label="Memory" value={68} />
    </>
  )
}

<HCard>
  <HBadge color="green">stable</HBadge>
  <HMeter label="Usage" :value="64" />
  <HButton color="purple" block>Deploy</HButton>
</HCard>

<Card>
  <Badge color="green">stable</Badge>
  <Meter label="Usage" value={64} />
  <Button color="purple" block>Deploy</Button>
</Card>

<HWash color="pink" :reveal="revealed" />
<HButton color="pink" @click="replay">Replay</HButton>

<Wash color="pink" reveal={revealed} />
<Button color="pink" onClick={replay}>Replay</Button>

<HCard wash="purple">
  <HInput v-model="name" placeholder="Ada Byte" />
  <HSegmented v-model="plan" :options="['Free','Pro','Scale']" />
  <HButton color="purple" block>Create account</HButton>
</HCard>

<Card wash="purple">
  <Input value={name} onChange={setName} placeholder="Ada Byte" />
  <Segmented value={plan} onChange={setPlan} options={["Free", "Pro", "Scale"]} />
  <Button color="purple" block>Create account</Button>
</Card>

<HMeter label="Disk"   :value="35" />
<HMeter label="Memory" :value="68" />
<HMeter label="CPU"    :value="92" />

<Meter label="Disk"   value={35} />
<Meter label="Memory" value={68} />
<Meter label="CPU"    value={92} />

<HStat label="requests/min" value="4,812" :trend="reqs" />
<HStat label="uptime, 30d" value="99.98%" :trend="uptime" />
<HMeter label="Disk" :value="41" />

<Stat label="requests/min" value="4,812" trend={reqs} />
<Stat label="uptime, 30d" value="99.98%" trend={uptime} />
<Meter label="Disk" value={41} />

<HShell>
  <template #nav><HNav :items="nav" /></template>
  <router-view />
</HShell>

<Shell nav={<Nav items={nav} />}>
  <Outlet />
</Shell>

<HTable :rows="members">
  <template #status="{ row }">
    <HBadge :color="row.color">{{ row.status }}</HBadge>
  </template>
</HTable>

<Table rows={members} columns={[
  { key: "status", cell: (row) => <Badge color={row.color}>{row.status}</Badge> },
]} />

<HMeter label="API calls" :value="62" caption="6.2M / 10M" />
<HTable :rows="invoices" />

<Meter label="API calls" value={62} caption="6.2M / 10M" />
<Table rows={invoices} />

<HCard wash="blue">
  <HInput v-model="email" type="email" />
  <HInput v-model="password" type="password" />
  <HButton color="blue" block>Sign in</HButton>
</HCard>

<Card wash="blue">
  <Input value={email} onChange={setEmail} type="email" />
  <Input value={password} onChange={setPassword} type="password" />
  <Button color="blue" block>Sign in</Button>
</Card>

<HCard wash="green">
  <HInput v-model="email" type="email" />
  <HButton color="green" block>Email me a link</HButton>
</HCard>

<Card wash="green">
  <Input value={email} onChange={setEmail} type="email" />
  <Button color="green" block>Email me a link</Button>
</Card>

<HCard wash="orange">
  <HOtpField v-model="code" :length="6" />
  <HButton color="orange" block>Verify</HButton>
</HCard>

<Card wash="orange">
  <OtpField value={code} onChange={setCode} length={6} />
  <Button color="orange" block>Verify</Button>
</Card>

<HPricingCard v-for="plan in plans" :key="plan.name"
  :plan="plan" :featured="plan.name === 'Pro'" />

{plans.map((plan) => (
  <PricingCard key={plan.name} plan={plan} featured={plan.name === "Pro"} />
))}

<HFeed :items="events">
  <template #item="{ event }">
    <HDot :color="event.color" /> {{ event.text }}
  </template>
</HFeed>

<Feed items={events} renderItem={(event) => (
  <><Dot color={event.color} /> {event.text}</>
)} />

<HChangelog :releases="releases" />

<Changelog releases={releases} />

<AreaChart :data="data" :config="config">
  <Grid />
  <XAxis dataKey="month" />
  <YAxis />
  <Area dataKey="desktop" />
  <Area dataKey="mobile" />
  <Legend />
  <Tooltip labelKey="month" />
</AreaChart>

<AreaChart data={data} config={config}>
  <Grid />
  <XAxis dataKey="month" />
  <YAxis />
  <Area dataKey="desktop" />
  <Area dataKey="mobile" />
  <Legend />
  <Tooltip labelKey="month" />
</AreaChart>

<BarChart :data="deploys" :config="config">
  <XAxis dataKey="week" />
  <Bar dataKey="count" is-clickable />
</BarChart>

<BarChart data={deploys} config={config}>
  <XAxis dataKey="week" />
  <Bar dataKey="count" isClickable />
</BarChart>

<Sparkline :data="reqs" color="blue" />

<Sparkline data={reqs} color="blue" />

<HLineChart :data="requests" color="blue" />

<LineChart :data="requests" color="blue" />

<HPieChart :slices="[42, 25, 19, 14]"
  :colors="['blue', 'orange', 'green', 'grey']" />

<PieChart slices={[42, 25, 19, 14]}
  colors={["blue", "orange", "green", "grey"]} />

<HRadarChart :axes="['speed', 'a11y', 'dx', 'size', 'ssr']"
  :values="[84, 58, 74, 46, 68]" color="purple" />

<RadarChart axes={["speed", "a11y", "dx", "size", "ssr"]}
  values={[84, 58, 74, 46, 68]} color="purple" />

<HButton color="green">Save</HButton>
<HButton color="red">Export</HButton>
<HButton color="grey" variant="outline">Cancel</HButton>

<Button color="green">Save</Button>
<Button color="red">Export</Button>
<Button color="grey" variant="outline">Cancel</Button>

<HBadge color="green">stable</HBadge>

<Badge color="green">stable</Badge>

<HTabs v-model="tab" :tabs="['Overview','Metrics','Logs']" />

<Tabs value={tab} onChange={setTab} tabs={["Overview", "Metrics", "Logs"]} />

<HMeter label="Build cache" :value="54" :low="40" :high="80" />

<Meter label="Build cache" value={54} low={40} high={80} />

import { toast } from "@halftone-ui/vue"

toast("Deploy finished", { color: "blue", duration: 3500 })

import { toast } from "@halftone-ui/react"

toast("Deploy finished", { color: "blue", duration: 3500 })

<HAvatar :seed="user.id" />

<Avatar seed={user.id} />

<HSkeleton :lines="3" />

<Skeleton lines={3} />

<HGradient color="purple" drift />

<Gradient color="purple" drift />

<HImage src="/eric.jpg" :grain="1.9" />

<Image src="/eric.jpg" :grain="1.9" />

<HSwitch v-model="notify" color="green" />

<Switch checked={notify} onCheckedChange={setNotify} color="green" />

<HCheckbox v-model="email">Email me on deploy</HCheckbox>

<Checkbox checked={email} onCheckedChange={setEmail}>Email me on deploy</Checkbox>

<HCheckboxGroup v-model="targets">
  <HCheckbox value="vue">Vue</HCheckbox>
  <HCheckbox value="react">React</HCheckbox>
  <HCheckbox value="svelte">Svelte</HCheckbox>
</HCheckboxGroup>

<CheckboxGroup value={targets} onChange={setTargets}>
  <Checkbox value="vue">Vue</Checkbox>
  <Checkbox value="react">React</Checkbox>
  <Checkbox value="svelte">Svelte</Checkbox>
</CheckboxGroup>

<HRadioGroup v-model="density"
  :options="['Comfortable', 'Compact', 'Dense']" />

<RadioGroup value={density} onChange={setDensity}
  options={["Comfortable", "Compact", "Dense"]} />

<HToggle v-model="fav">★ Favorite</HToggle>

<Toggle pressed={fav} onPressedChange={setFav}>★ Favorite</Toggle>

<HToggleGroup v-model="align"
  :options="['Left', 'Center', 'Right']" />

<ToggleGroup value={align} onChange={setAlign}
  options={["Left", "Center", "Right"]} />

<HSlider v-model="volume" color="blue" />

<Slider value={volume} onChange={setVolume} color="blue" />

<HProgress indeterminate color="purple" />

<Progress indeterminate color="purple" />

<HSpinner color="blue" />

<Spinner color="blue" />

<HInput v-model="email" label="Email" type="email" />

<Input value={email} onChange={setEmail} label="Email" type="email" />

<HTextarea v-model="notes" label="Release notes" :rows="4" />

<Textarea value={notes} onChange={setNotes} label="Release notes" rows={4} />

<HField label="Display name" hint="Shown on your public profile.">
  <HInput v-model="name" />
</HField>

<Field label="Display name" hint="Shown on your public profile.">
  <Input value={name} onChange={setName} />
</Field>

<HFieldset legend="Notifications">
  <HCheckbox v-model="deploys">Deploy succeeded</HCheckbox>
  <HCheckbox v-model="digest">Weekly digest</HCheckbox>
</HFieldset>

<Fieldset legend="Notifications">
  <Checkbox checked={deploys} onCheckedChange={setDeploys}>Deploy succeeded</Checkbox>
  <Checkbox checked={digest} onCheckedChange={setDigest}>Weekly digest</Checkbox>
</Fieldset>

<HForm @submit="create">
  <HInput v-model="project" label="Project" />
  <HSelect v-model="region" label="Region" :options="regions" />
  <HButton color="green" type="submit" block>Create project</HButton>
</HForm>

<Form onSubmit={create}>
  <Input value={project} onChange={setProject} label="Project" />
  <Select value={region} onChange={setRegion} label="Region" options={regions} />
  <Button color="green" type="submit" block>Create project</Button>
</Form>

<HNumberField v-model="seats" :min="0" />

<NumberField value={seats} onChange={setSeats} min={0} />

<HOtpField v-model="code" :length="6" />

<OtpField value={code} onChange={setCode} length={6} />

<HSelect v-model="region" label="Region" :options="regions" />

<Select value={region} onChange={setRegion} label="Region" options={regions} />

<HCombobox v-model="fw" :options="frameworks" />

<Combobox value={fw} onChange={setFw} options={frameworks} />

<HAutocomplete v-model="city" :suggestions="cities" />

<Autocomplete value={city} onChange={setCity} suggestions={cities} />

Press <HKbd>⌘</HKbd> <HKbd>K</HKbd> to open the command menu.

Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command menu.

<HSeparator />

<Separator />

<HCollapsible label="Advanced options">
  Seed pinning, plate order, misregistration.
</HCollapsible>

<Collapsible label="Advanced options">
  Seed pinning, plate order, misregistration.
</Collapsible>

<HAccordion :items="faq" />

<Accordion :items="faq" />

<HDialog v-model:open="open" title="Rename workspace">
  This changes the URL of every published board.
  <template #footer>
    <HButton variant="outline" @click="open = false">Cancel</HButton>
    <HButton color="blue" @click="rename">Rename</HButton>
  </template>
</HDialog>

<Dialog open={open} onOpenChange={setOpen} title="Rename workspace">
  This changes the URL of every published board.
  <DialogFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button color="blue" onClick={rename}>Rename</Button>
  </DialogFooter>
</Dialog>

<HAlertDialog v-model:open="open" tone="danger"
  title="Delete ink-press?" confirm="Delete forever" @confirm="destroy" />

<AlertDialog open={open} onOpenChange={setOpen} tone="danger"
  title="Delete ink-press?" confirm="Delete forever" onConfirm={destroy} />

<HDrawer v-model:open="open" side="right" title="Press settings">
  <HInput v-model="seed" label="Seed" />
</HDrawer>

<Drawer open={open} onOpenChange={setOpen} side="right" title="Press settings">
  <Input value={seed} onChange={setSeed} label="Seed" />
</Drawer>

<HPopover label="Share">
  Anyone with the link can view this board.
  <HButton size="sm">Copy link</HButton>
</HPopover>

<Popover label="Share">
  Anyone with the link can view this board.
  <Button size="sm">Copy link</Button>
</Popover>

<HTooltip text="Average dot pitch in CSS px.">grain</HTooltip>

<Tooltip text="Average dot pitch in CSS px.">grain</Tooltip>

<HPreviewCard href="https://github.com/ecgang/halftone-ui">
  @halftone-ui
</HPreviewCard>

<PreviewCard href="https://github.com/ecgang/halftone-ui">
  @halftone-ui
</PreviewCard>

<HMenu label="Actions">
  <HMenuItem @select="rename">Rename</HMenuItem>
  <HMenuItem kbd="⌘D" @select="dup">Duplicate</HMenuItem>
  <HMenuItem tone="danger" @select="del">Delete</HMenuItem>
</HMenu>

<Menu label="Actions">
  <MenuItem onSelect={rename}>Rename</MenuItem>
  <MenuItem kbd="⌘D" onSelect={dup}>Duplicate</MenuItem>
  <MenuItem tone="danger" onSelect={del}>Delete</MenuItem>
</Menu>

<HContextMenu>
  <HMenuItem @select="inspect">Inspect plate</HMenuItem>
  <HMenuItem @select="copySeed">Copy seed</HMenuItem>
</HContextMenu>

<ContextMenu>
  <MenuItem onSelect={inspect}>Inspect plate</MenuItem>
  <MenuItem onSelect={copySeed}>Copy seed</MenuItem>
</ContextMenu>

<HMenubar :menus="[fileMenu, editMenu, viewMenu]" />

<Menubar :menus="[fileMenu, editMenu, viewMenu]" />

<HToolbar>
  <HToggle v-model="bold">B</HToggle>
  <HToggle v-model="italic">I</HToggle>
  <HSeparator vertical />
  <HButton variant="ghost">Link</HButton>
</HToolbar>

<Toolbar>
  <Toggle pressed={bold} onPressedChange={setBold}>B</Toggle>
  <Toggle pressed={italic} onPressedChange={setItalic}>I</Toggle>
  <Separator vertical />
  <Button variant="ghost">Link</Button>
</Toolbar>

<HNavigationMenu :items="nav" v-model="current" />

<NavigationMenu items={nav} value={current} onChange={setCurrent} />

<HBreadcrumb :items="['Home', 'Projects', 'ink-press']" />

<Breadcrumb items={["Home", "Projects", "ink-press"]} />

<HPagination v-model="page" :total="4" />

<Pagination page={page} onChange={setPage} total={4} />

<HSidebar :items="nav" v-model="current" />

<Sidebar items={nav} value={current} onChange={setCurrent} />

<HScrollArea :height="150">…</HScrollArea>

<ScrollArea :height="150">…</ScrollArea>

<HRating v-model="stars" :max="5" />

<Rating value={stars} onChange={setStars} max={5} />

<HStepper v-model="step"
  :steps="['Account', 'Workspace', 'Invite']" />

<Stepper value={step} onChange={setStep}
  steps={["Account", "Workspace", "Invite"]} />

<HTimeline :events="history" />

<Timeline :events="history" />

<HInkPanel pattern="hatch" :inks="['blue','orange']" :body="0.7"
           :misreg="1" :scale="3.4" paper="light" />

<InkPanel pattern="hatch" inks={['blue','orange']} body={0.7}
          misreg={1} scale={3.4} paper="light" />

<HInkPanel pattern="hatch" :inks="['purple','pink']" paper="dark" :misreg="1.2">
  <HInput v-model="email" type="email" />
  <HInput v-model="password" type="password" />
  <HButton pattern="hatch" :inks="['purple','pink']" :body="0.7" block>Sign in</HButton>
</HInkPanel>

<InkPanel pattern="hatch" inks={['purple','pink']} paper="dark" misreg={1.2}>
  <Input value={email} onChange={setEmail} type="email" />
  <Input value={password} onChange={setPassword} type="password" />
  <Button pattern="hatch" inks={['purple','pink']} body={0.7} block>Sign in</Button>
</InkPanel>

<HAreaChart :data="revenue" pattern="hatch" :inks="['green','blue']"
            :body="0.7" :misreg="1" :scale="3.2" />

<AreaChart data={revenue} pattern="hatch" inks={['green','blue']}
           body={0.7} misreg={1} scale={3.2} />

<HBarChart :data="deploys" pattern="hatch" :inks="['red','black']"
           :body="0.7" :misreg="0.8" :scale="3" />

<BarChart data={deploys} pattern="hatch" inks={['red','black']}
          body={0.7} misreg={0.8} scale={3} />

<HLineChart :data="latency" pattern="hatch" :inks="['pink','blue']"
            :body="0.65" :misreg="0.9" :scale="2.8" />

<LineChart data={latency} pattern="hatch" inks={['pink','blue']}
           body={0.65} misreg={0.9} scale={2.8} />

<HDonut :value="0.72" pattern="hatch" :inks="['red','yellow']"
        :body="0.65" :misreg="0.9" :scale="3" />

<Donut value={0.72} pattern="hatch" inks={['red','yellow']}
       body={0.65} misreg={0.9} scale={3} />

<HHeatmap :data="commits" pattern="hatch" :inks="['blue','orange']"
          :body="0.65" :misreg="0.7" :scale="2.8" />

<Heatmap data={commits} pattern="hatch" inks={['blue','orange']}
         body={0.65} misreg={0.7} scale={2.8} />

<HButton pattern="waves" :inks="['blue','orange']">Print</HButton>
<HButton pattern="lines" :inks="['purple','pink']" :body="0.5">Preview</HButton>
<HButton pattern="hatch" :inks="['blue','orange']" :body="0.7">Overprint</HButton>
<HButton pattern="waves" :inks="['orange','blue']" paper="dark">Black tee</HButton>

<Button pattern="waves" inks={['blue','orange']}>Print</Button>
<Button pattern="lines" inks={['purple','pink']} body={0.5}>Preview</Button>
<Button pattern="hatch" inks={['blue','orange']} body={0.7}>Overprint</Button>
<Button pattern="waves" inks={['orange','blue']} paper="dark">Black tee</Button>

<HMeter label="Coverage" :value="72" pattern="hatch" :inks="['purple','pink']" />

<Meter label="Coverage" value={72} pattern="hatch" inks={['purple','pink']} />

<HInkMark shape="bolt" :inks="['blue','orange']" :size="58" />
<HInkMark shape="star" :inks="['red','black']" :size="58" />

<InkMark shape="bolt" inks={['blue','orange']} size={58} />
<InkMark shape="star" inks={['red','black']} size={58} />

<HInkImage src="/assets/eric-gang.jpg" pattern="hatch" :inks="['green','orange']"
           :body="0.62" :misreg="1.1" :scale="2.9" />

<InkImage src="/assets/eric-gang.jpg" pattern="hatch" inks={['green','orange']}
          body={0.62} misreg={1.1} scale={2.9} />

<HInkMark name="smudge" :inks="['red', 'black']" :scale="2.8" />

<InkMark name="smudge" inks={["red", "black"]} scale={2.8} />