Card

The ownable Card install gives your app a local wrapper shell for common content grouping patterns while keeping the generated markup and styling surface editable beside the feature that owns the presentation.

Why own Card locally

Card shells usually become product-specific quickly once teams add editorial spacing, dashboard treatments, campaign surfaces, or linked summary patterns. Local ownership keeps those layout decisions versioned with the feature instead of buried in a distant package.

Adjust shell density, spacing, and footer layout without waiting on a package release.
Compose feature-specific content inside the generated wrapper with local naming and structure.
Extend the installed card locally if your app later needs extra regions like media or dividers.

What the install includes

The current registry-backed card install writes the local wrapper source for the base shell: card, header, title, description, content, footer, the shared stylesheet, and the primitive bridge file. More specialized regions can be added in your app once the local source is in place.

Ownable Install

Install Card from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add card

npx tailng add card

Generated files

The command scaffolds local files under src/app/tailng-ui/card.

src/app/tailng-ui/card/tng-card-primitive.ts
src/app/tailng-ui/card/tng-card.ts
src/app/tailng-ui/card/tng-card.html
src/app/tailng-ui/card/tng-card-header.html
src/app/tailng-ui/card/tng-card-title.html
src/app/tailng-ui/card/tng-card-description.html
src/app/tailng-ui/card/tng-card-content.html
src/app/tailng-ui/card/tng-card-footer.html
src/app/tailng-ui/card/tng-card.css
src/app/tailng-ui/card/index.ts

Import in your feature module/component

import { TngCard, TngCardHeader, TngCardTitle, TngCardDescription, TngCardContent, TngCardFooter, TngCardPrimitive, TngCardHeaderPrimitive, TngCardTitlePrimitive, TngCardDescriptionPrimitive, TngCardContentPrimitive, TngCardFooterPrimitive } from './tailng-ui/card';

Usage

<tng-card>
  <tng-card-header>
    <tng-card-title>Release notes</tng-card-title>
    <tng-card-description>Track rollout status and follow-up actions.</tng-card-description>
  </tng-card-header>
  <tng-card-content>
    <p>Build artifacts are ready for production promotion.</p>
  </tng-card-content>
  <tng-card-footer>
    <button type="button">View details</button>
  </tng-card-footer>
</tng-card>