BLUEPRINT // NEXTUI

Card

Engineering-blueprint card with registration-mark corner accents at all four corners. Composable with any children.

$npx @voltenworks/shipui add card --theme blueprint
Or install the base component for free:
Live Preview
Open full demo
voltenworks.com/shipui/blueprint/demo/components#04-card
BLUEPRINT // NEXT Setup GuideDesign tokens, component styles, and dependencies
Usage
TSX
<Card>
  <p className="bp-card-label">Module 03</p>
  <h3 className="bp-card-title">CI/CD pipeline</h3>
</Card>
Variants
<Card><p className="bp-card-label">Module 01</p><h3 className="bp-card-title">Build system</h3></Card>
<Card><p className="bp-card-label">Module 02</p><h3 className="bp-card-title">Test runner</h3><p className="bp-card-desc">Parallel test execution.</p></Card>
<Card><p className="bp-card-label">Module 03</p><h3 className="bp-card-title">CI/CD pipeline</h3></Card>
Source
TSX
import { cn } from '@/lib/utils'

interface CardProps {
  className?: string
  children:   React.ReactNode
}

export function Card({ className, children }: CardProps): React.JSX.Element {
  return (
    <div className={cn('bp-card', className)}>
      <div className="bp-reg-mark-tl" aria-hidden="true" />
      <div className="bp-reg-mark-tr" aria-hidden="true" />
      <div className="bp-reg-mark-bl" aria-hidden="true" />
      <div className="bp-reg-mark-br" aria-hidden="true" />
      {children}
    </div>
  )
}
Preview in theme demoGet full theme, $29
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from BLUEPRINT // NEXT
BLUEPRINT // NEXTUI

Button

Technical dark-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.

View sourcePreview
BLUEPRINT // NEXTUI

Badge

Technical badge for status indicators and tags in the BLUEPRINT dark engineering palette.

View sourcePreview
BLUEPRINT // NEXTUI

Text

Polymorphic text primitive with body, caption, label, and code variants styled for the BLUEPRINT dark technical palette.

View sourcePreview