Card

A Card component is a versatile UI element used to display content in a structured and visually appealing way. It typically contains related information, such as text, images, buttons, and other elements, within a bordered or shadowed container. Cards are often used for presenting individual items, like products, articles, or profiles, making the content easy to scan and interact with.

Demo

Rendered live, with the same build of the library you install.

This is sample card.

Usage

Card.tsx
import { NCard } from '@nayan-ui/react';
const Card = () => {
return (
<div>
<NCard className="p-3">This is sample card.</NCard>
</div>
);
};
export default Card;

Attributes

3 props
NameTypeDefaultDetails
classNamestring' 'You can customise by passing tailwind classes.
childrenReact.ReactNodeRequiredYou can pass card content as children.
onClick(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => voidOptionalYou can get callback when card is clicked.

Tags

Other components solving nearby problems.