WinCard

A clickable card using WinBox as a wrapper. Renders as an <a> tag with block display.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinCard } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Props

All available props for the WinCard component.

Usage

Example showing the component in a typical context:

import { WinCard } from 'win2k-ui'

export function Example() {
  return (
    <WinCard href="/docs/components/win-box">
      <strong>WinBox</strong>
      <p className="text-[12px] mt-1">The foundational container component.</p>
    </WinCard>
  )
}