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.
Rendered live, with the same build of the library you install.
This is sample card.
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;
| Name | Type | Default | Details |
|---|---|---|---|
| className | string | ' ' | You can customise by passing tailwind classes. |
| children | React.ReactNode | Required | You can pass card content as children. |
| onClick | (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void | Optional | You can get callback when card is clicked. |
Other components solving nearby problems.
- React Card
- React Card Component
- React UI Card
- Example React Card
- React Card Design
- Responsive React Card
- Styling React Card
- React Card Layout
- Card Animation in React
- React Image Card
- React Card Header
- React Card Footer
- React Card List
- React Card Interaction
- React Flip Card
- Elevated Card in React
- React Card Group
- Custom Card in React
- React Card with Image
- React Card Component Library
- Card UI Component
- React Card Tutorial
- Card Design System
- React Card TypeScript
- Mobile Card React
- Card Best Practices
- React Card Performance
- Card UI Library
- Product Card React
- Content Card Component
- Material Card React
- Card Grid Component