# Precision Card

> The PrecisionCard component is a fully configurable, responsive UI block built with shadcn/ui that showcases dual-themed content — a light informational card and a dark futuristic insights card. It’s ideal for landing pages, industrial automation showcases, or tech product sections that emphasize innovation and precision. The component’s props allow full customization of headings, descriptions, badges, and button labels without altering the structure. The demo page demonstrates how to use the component in real-world contexts, maintaining a modern, minimal design with accessible typography, balanced spacing, and seamless dark/light theme integration.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/precision-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/precision-card?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt