Card

Composable card primitives inspired by shadcn/ui. Combine Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter.

Login Card

Login to your account

Enter your email below to login to your account

Email

PasswordForgot your password?

<script setup lang="ts">
import {
  VxCard, VxCardHeader, VxCardTitle, VxCardDescription,
  VxCardAction, VxCardContent, VxCardFooter,
  VxButton, VxInput
} from 'veloxui'
</script>

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Login to your account</VxCardTitle>
      <VxCardDescription>
        Enter your email below to login to your account
      </VxCardDescription>
      <VxCardAction>
        <VxButton variant="link">Sign Up</VxButton>
      </VxCardAction>
    </VxCardHeader>
    <VxCardContent>
      <form @submit.prevent>
        <div style="display: flex; flex-direction: column; gap: 16px;">
          <div style="display: flex; flex-direction: column; gap: 6px;">
            <label>Email</label>
            <VxInput type="email" placeholder="m@example.com" />
          </div>
          <div style="display: flex; flex-direction: column; gap: 6px;">
            <div style="display: flex; align-items: center;">
              <label>Password</label>
              <a href="#" style="margin-left: auto;">Forgot your password?</a>
            </div>
            <VxInput type="password" />
          </div>
        </div>
      </form>
    </VxCardContent>
    <VxCardFooter>
      <VxButton style="width: 100%;">Login</VxButton>
      <VxButton variant="outline" style="width: 100%;">Login with Google</VxButton>
    </VxCardFooter>
  </VxCard>
</template>

Simple Card

Notifications

You have 3 unread messages.

Your call has been confirmed.

1 hour ago

You have a new message!

2 hours ago

Your subscription is expiring soon!

5 hours ago

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Notifications</VxCardTitle>
      <VxCardDescription>You have 3 unread messages.</VxCardDescription>
    </VxCardHeader>
    <VxCardContent>
      <!-- notification items -->
    </VxCardContent>
  </VxCard>
</template>

Stats Cards

Total Revenue

$45,231.89

+20.1% from last month

Subscriptions

+2,350

+180.1% from last month

Active Now

+573

+201 since last hour

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardDescription>Total Revenue</VxCardDescription>
      <VxCardTitle style="font-size: 24px;">$45,231.89</VxCardTitle>
    </VxCardHeader>
    <VxCardContent>
      <div>+20.1% from last month</div>
    </VxCardContent>
  </VxCard>
</template>

With Action

Use VxCardAction inside VxCardHeader to place a button in the top-right corner. The header automatically switches to a 2-column grid layout.

Team Members

Invite your team members to collaborate.

Sofia Davis

sofia@example.com

Owner

Jackson Lee

jackson@example.com

Member

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Team Members</VxCardTitle>
      <VxCardDescription>Invite your team members to collaborate.</VxCardDescription>
      <VxCardAction>
        <VxButton size="sm">Invite</VxButton>
      </VxCardAction>
    </VxCardHeader>
    <VxCardContent>
      <!-- team member list -->
    </VxCardContent>
  </VxCard>
</template>

With Footer

Create project

Deploy your new project in one-click.

Name

Description

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Create project</VxCardTitle>
      <VxCardDescription>Deploy your new project in one-click.</VxCardDescription>
    </VxCardHeader>
    <VxCardContent>
      <VxInput placeholder="Name of your project" />
      <VxInput placeholder="Describe your project" />
    </VxCardContent>
    <VxCardFooter>
      <div style="display: flex; justify-content: flex-end; gap: 8px; width: 100%;">
        <VxButton variant="outline">Cancel</VxButton>
        <VxButton>Deploy</VxButton>
      </div>
    </VxCardFooter>
  </VxCard>
</template>

Accent Border

Add a colored accent stripe on the left or top edge.

Info

Blue left accent

Success

Green left accent

Error

Red left accent

Warning

Yellow left accent

<template>
  <VxCard accent="#3b82f6">
    <VxCardHeader>
      <VxCardTitle>Info</VxCardTitle>
      <VxCardDescription>Blue left accent</VxCardDescription>
    </VxCardHeader>
  </VxCard>

  <!-- Top accent -->
  <VxCard accent="#ef4444" accent-position="top">
    <VxCardHeader>
      <VxCardTitle>Error</VxCardTitle>
    </VxCardHeader>
  </VxCard>
</template>

Top Accent

Purple top

Accent on the top edge

Pink top

Accent on the top edge

<template>
  <VxCard accent="#8b5cf6" accent-position="top">...</VxCard>
</template>

Divider

Use VxCardDivider to separate sections within a card.

Account Settings

Manage your account preferences.

---

Email notifications

Receive emails about activity

Marketing emails

Receive promotional content

---

<script setup lang="ts">
import {
  VxCard, VxCardHeader, VxCardTitle, VxCardDescription,
  VxCardContent, VxCardDivider, VxCardFooter,
  VxButton, VxSwitch
} from 'veloxui'
</script>

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Account Settings</VxCardTitle>
      <VxCardDescription>Manage your account preferences.</VxCardDescription>
    </VxCardHeader>
    <VxCardDivider />
    <VxCardContent>
      <!-- settings rows -->
    </VxCardContent>
    <VxCardDivider />
    <VxCardFooter>
      <VxButton variant="outline">Cancel</VxButton>
      <VxButton>Save</VxButton>
    </VxCardFooter>
  </VxCard>
</template>

Components

Component	Element	Description
VxCard	<div>	Root — border, rounded-xl, shadow, gap 24px, py 24px
VxCardHeader	<div>	CSS grid — switches to 2-column when VxCardAction is present
VxCardTitle	<h3>	16px semibold heading
VxCardDescription	<p>	14px muted description
VxCardAction	<div>	Top-right header action — auto-positioned via grid
VxCardContent	<div>	Body — horizontal padding 24px
VxCardDivider	<hr>	Horizontal separator line
VxCardFooter	<div>	Footer — flex column, gap 8px, horizontal padding 24px

Card Props

Prop	Type	Default	Description
accent	string	''	Accent border color (any CSS color)
accentPosition	'left' | 'top'	'left'	Which edge gets the accent

All sub-components are zero-prop primitives — style with classes or inline styles.