Components
Loading preview...
This React component efficiently displays data in a visually appealing and responsive grid of cards. It's designed to present key metrics or information concisely, making it ideal for dashboards or summary views. The component leverages the shadcn/ui library for styling and accessibility, ensuring a consistent and professional look and feel across light and dark themes. Each card displays a title, value, description, and optionally an icon and an action button. The component handles various scenarios, including cases with no data, and provides clear ARIA attributes for accessibility. The `CardDisplay` component accepts an array of `CardDisplayItem` objects, each defining the content of a single card. Each `CardDisplayItem` includes properties for `id`, `title`, `value`, `description`, an optional `icon` (which can be a React component or function), an optional `actionLabel`, a boolean `isDisabled` flag for the action button, and an `onActionClick` callback function. The component dynamically renders the cards in a responsive grid layout, adjusting the number of columns based on the screen size. It uses the `cn` utility function (likely from shadcn/ui) to efficiently manage CSS classes. For example, it can be used to display key performance indicators (KPIs) on a dashboard, showing metrics like active users, revenue, or task completion rates. Each card could link to a more detailed view using the optional action button. The component's use of ARIA attributes ensures it is accessible to users of assistive technologies. The component gracefully handles the case where no data is provided, displaying a user-friendly message. This allows for flexibility and robustness in different application contexts.
npx shadcn@latest add https://21st.dev/r/uniquesonu/data-card-displayimport ExampleUsage from "@/components/ui/data-card-display";
export default function DemoOne() {
return (
<ExampleUsage />
);
};