Card

The Card component displays a card with a header, content, and footer. It provides an organized way to present information with optional loading states and alignment features.

Preview

Usage

import { Card } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <Card title='Card Title' description='Card Description'>
      Card content goes here.
    </Card>
  );
}

Props

Prop	Description	Required	Value
center	align the card in the center of it's parent	optional	boolean
children	children to render	required	component(s)
className	custom style	optional	SCSS or Tailwind
description	header description	optional	string
loading	toggle the loading spinner	optional	boolean
title	header title	optional	string

Example

import { Card, Table, useAPI } from 'components/lib';

function Example({ ...props }){

 const { data, loading } from useAPI('/api/user');

  return (
    <div>
      <Card title='Card Title' description='Card Description' loading={ loading }>
        <Table data={ data }/>
      </Card>
    </div>
  );
}

Notes

• The Card component uses cn and Loader from 'components/lib'.

• The center prop aligns the card in the center of its parent.

• The loading prop toggles a loading animation.

• The children prop can include a React component(s) or CardHeader, CardContent, and CardFooter components.

• For more details, refer to the Shadcn Card documentation.