CRATE // NEXTUI

Card

Origin card with shipping label aesthetic, tape motif, dashed borders, and slight rotation transform. Displays weight, roast, origin, and date fields.

$npx @voltenworks/shipui add card --theme crate
Or install the base component for free:
Live Preview
Open full demo
voltenworks.com/shipui/crate/demo/components#04-card
CRATE // NEXT Setup GuideDesign tokens, component styles, and dependencies
Usage
TSX
<Card card={{ region: "SOUTH AMERICA", name: "Huila, Colombia", notes: "Bright citrus notes with a chocolate finish.", meta: [{ label: "WEIGHT", value: "340g" }, { label: "ROAST", value: "Medium" }] }} />
Source
TSX
import { cn } from '@/lib/utils'
import type { OriginCard } from '@/types'

interface CardProps {
  card:       OriginCard
  className?: string
}

export function Card({ card, className }: CardProps): React.JSX.Element {
  return (
    <div className={cn('crate-card', className)}>
      <div className="crate-card-region">{card.region}</div>
      <div className="crate-card-title">{card.name}</div>
      <p className="crate-card-notes">{card.notes}</p>
      <div className="crate-card-meta">
        {card.meta.map((m) => (
          <div key={m.label} className="crate-card-meta-item">
            {m.label}
            <strong>{m.value}</strong>
          </div>
        ))}
      </div>
    </div>
  )
}
Preview in theme demoGet full theme, $29
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from CRATE // NEXT
CRATE // NEXTUI

Button

Kraft-paper button with primary, secondary, ghost, and accent variants in three sizes. Archivo Black labels, warm cardboard palette. Renders as a Next.js Link when an href is provided.

View sourcePreview
CRATE // NEXTUI

Badge

Artisanal badge with accent, ink, kraft, stamp, and faded variants. Uppercase tracking on warm cardboard surfaces.

View sourcePreview
CRATE // NEXTUI

Text

Polymorphic text component with body, caption, label, and code variants. Archivo Black for display, DM Sans for body.

View sourcePreview