Card stacks are a fancy and modern way to display a collection of cards in a single view. They can be used to display a wide variety of content such as previews of blog posts, user profiles, pricing plans, and more.
You can use the <CardStack> component to display a collection of children with a draggable effect. Feel free to use the <Card> component or any other component as children.
import { CardStack } from "pol-ui";Default card stack
Use this example to show a simple card component with a title and description and apply the href tag to the <Card> component to set a hyperlink to the card.
Default card stack
import { CardStack } from "pol-ui";
import { twMerge } from "tailwind-merge";
import React from "react";
const Example = (props: React.HTMLAttributes<HTMLDivElement>) => {
return (
<div
{...props}
className={twMerge(
"w-[150px] text-2xl h-[150px] rounded-3xl bg-primary grid place-items-center",
props.className
)}
>
{props.children ?? "Example"}
</div>
);
};
const CardStackComponent = () => {
return (
<CardStack>
<Example className="bg-red-200">1</Example>
<Example className="bg-green-200">2</Example>
<Example className="bg-blue-200">3</Example>
<Example className="bg-purple-200">4</Example>
<Example className="bg-orange-200">5</Example>
</CardStack>
);
};
export default CardStackComponent;Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode[] | - | The children to display in the component |
| className | string | - | The class name to apply to the component |
|
Variants
Just with one element
Just in case you just have one item to display, the component is ready to handle it. The element dragged won't be deleted and will be returned to it's position.
Default card stack
import { CardStack } from "pol-ui";
import { twMerge } from "tailwind-merge";
import React from "react";
const Example = (props: React.HTMLAttributes<HTMLDivElement>) => {
return (
<div
{...props}
className={twMerge(
"w-[150px] text-2xl h-[150px] rounded-3xl bg-primary grid place-items-center",
props.className
)}
>
{props.children ?? "Example"}
</div>
);
};
const CardStackComponent = () => {
return (
<CardStack>
<Example className="bg-red-200">1</Example>
</CardStack>
);
};
export default CardStackComponent;Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface CardTheme {
root: {
base: string;
children: string;
horizontal: IBoolean;
href: string;
};
img: {
base: string;
horizontal: IBoolean;
};
}