Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Card overview

Card wraps the primitive slot contract with baseline shell styles and variant inputs while leaving the content structure inside each region under your control.

Imports

Import the wrapper components when you want the default shell styling and variant inputs.

Component import

ts
import {
  TngCardActionsComponent,
  TngCardComponent,
  TngCardContentComponent,
  TngCardDescriptionComponent,
  TngCardFooterComponent,
  TngCardHeaderComponent,
  TngCardTitleComponent,
} from '@tailng-ui/components';

Status card variants

The same wrapper card rendered with local CSS or a Tailwind utility shell around the default component styles.

Plain CSS release status card

Release status

Production rollout is complete and monitoring is stable.

  • Latency is below 120ms across all regions.
  • Error rate remained under 0.2% for the last hour.

Accessibility baseline

  • Use semantic regions (article, header, footer) when possible.
  • Keep actionable controls inside the card keyboard reachable in natural tab order.
  • Use one primary action per card to avoid conflicting intent.