Component

Neo Card

A flexible content container. Features a thick border, a dedicated title slot, and that signature hard shadow.

01 Installation

Copy the source code below into your project.

Source Code

New Component

src/components/neo/

NeoCard.tsx

Or switch to the "Code" tab to view manually

02 Basic Usage

Simple Card

My Card

This is a simple card. It has a title and some content. The hard shadow makes it pop off the page.

03 Colors

Use the `color` prop to set the background. High contrast combinations are handled automatically.

Color Variants

Standard White

Clean and simple. Good for dense information.

Warning Yellow

Great for highlighting important alerts or notices.

Acid Lime

Use this for success states or positive actions.

Dark Mode

Inverted colors for maximum impact. Text automatically white.

04 Rich Content

Cards are versatile containers. Here are examples of complex layouts using standard Tailwind classes.

NFT Anime Card

Live

Cyber Waifu #09

Rare Edition

Current Bid

2.45

Ending In

04h 20m

Ecommerce Product

-50%

Neo Kicks

Lifestyle

$200

$100

(420 reviews)

Props API

Prop	Type	Default	Description
children	ReactNode	-	The content inside the card.
title	string	undefined	Optional header text. Adds a border-bottom when present.
color	"white" \| "yellow" \| "lime" \| "pink" \| "purple" \| "black"	"white"	Background color theme.
hoverEffect	boolean	true	Whether the card moves on hover.