Card · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JCard } from '@juxtui/ui'

Usage #

<JCard title="Usage" description="Resets on the 1st of each month.">
  …
</JCard>

Variants & examples #

Add a CNAME record for app.acme.com pointing to cname.juxt.dev. Changes can take up to an hour.

<template>
  <JCard title="Custom domain" description="Point your domain at juxt.ui to go live.">
    <template #actions>
      <JBadge variant="warning" dot>Pending</JBadge>
    </template>
    <p>Add a CNAME record for <code class="font-mono text-xs text-fg">app.acme.com</code> pointing to <code class="font-mono text-xs text-fg">cname.juxt.dev</code>. Changes can take up to an hour.</p>
    <template #footer>
      <JButton variant="ghost" size="sm">Remove</JButton>
      <JButton size="sm">Verify</JButton>
    </template>
  </JCard>
</template>

Muted#

Recedes into the page — useful for secondary panels and empty states.

No deployments yet

Push to your main branch to trigger the first one.

<script setup lang="ts">
import { Inbox } from '@lucide/vue'
</script>

<template>
  <JCard variant="muted" padding="lg">
    <div class="flex flex-col items-center py-4 text-center">
      <Inbox class="size-5 text-fg-muted" :stroke-width="1.5" />
      <p class="mt-3 text-sm font-medium text-fg">No deployments yet</p>
      <p class="mt-1 text-sm">Push to your main branch to trigger the first one.</p>
    </div>
  </JCard>
</template>

API #

Props

Prop	Type	Default	Description
title	`string`	—	Heading.
description	`string`	—	Supporting line under the title.
variant	`'outline' \| 'muted'`	`'outline'`	Outline sits on the page; muted recedes into it.
padding	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Inner spacing: 0, 12, 20 or 24px.
as	`string \| Component`	`'div'`	Root element, e.g. `section` or `article`.

Slots

Slot	Props	Description
default	—	Body.
actions	—	Right of the title — a button, badge or menu.
footer	—	Separated by a hairline; right-aligned.
header	—	Replace the title block.

Accessibility #