Card

Docs

Card

Displays a card with header, content, and footer.

Preview

Code

import { UbButtonDirective } from '@/components/ui/button'
import {
  UbCardContentDirective,
  UbCardDescriptionDirective,
  UbCardDirective,
  UbCardFooterDirective,
  UbCardHeaderDirective,
  UbCardTitleDirective,
} from '@/components/ui/card'
import { UbInputDirective } from '@/components/ui/input'
import { UbLabelDirective } from '@/components/ui/label'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  imports: [
    UbCardDirective,
    UbCardHeaderDirective,
    UbCardTitleDirective,
    UbCardDescriptionDirective,
    UbCardContentDirective,
    UbCardFooterDirective,

    UbInputDirective,
    UbLabelDirective,
    UbButtonDirective,
  ],
  selector: 'card-with-form-new-york',
  template: `
    <div ubCard class="w-[350px]">
        <div ubCardHeader>
            <h3 ubCardTitle>Create project</h3>
            <p ubCardDescription>Deploy your new project in one-click.</p>
        </div>

        <div ubCardContent>
            <form>
                <div class="grid w-full items-center gap-4">
                    <div class="flex flex-col space-y-1.5">
                        <label ubLabel htmlFor="name">Name</label>
                        <input ubInput type="text" id="name" placeholder="Name of your project" />
                    </div>
                </div>
            </form>
        </div>

        <div ubCardFooter class="flex justify-between">
            <button ubButton variant="outline">Cancel</button>
            <button ubButton>Deploy</button>
        </div>

    </div>
 `,
})
export class CardWithFormNewYork { }

import { UbButtonDirective } from '@/components/ui/button'
import {
  UbCardContentDirective,
  UbCardDescriptionDirective,
  UbCardDirective,
  UbCardFooterDirective,
  UbCardHeaderDirective,
  UbCardTitleDirective,
} from '@/components/ui/card'
import { UbInputDirective } from '@/components/ui/input'
import { UbLabelDirective } from '@/components/ui/label'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  imports: [
    UbCardDirective,
    UbCardHeaderDirective,
    UbCardTitleDirective,
    UbCardDescriptionDirective,
    UbCardContentDirective,
    UbCardFooterDirective,

    UbInputDirective,
    UbLabelDirective,
    UbButtonDirective,
  ],
  selector: 'card-with-form-default',
  template: `
    <div ubCard class="w-[350px]">

        <div ubCardHeader>
            <h3 ubCardTitle>Create project</h3>
            <p ubCardDescription>Deploy your new project in one-click.</p>
        </div>

        <div ubCardContent>
            <form>
                <div class="grid w-full items-center gap-4">
                    <div class="flex flex-col space-y-1.5">
                        <label ubLabel htmlFor="name">Name</label>
                        <input ubInput type="text" id="name" placeholder="Name of your project" />
                    </div>
                </div>
            </form>
        </div>

        <div ubCardFooter class="flex justify-between">
            <button ubButton variant="outline">Cancel</button>
            <button ubButton>Deploy</button>
        </div>

    </div>
 `,
})
export class CardWithFormDefault { }

Installation

CLI

Manual

npx shadcn-ng@latest add card

Copy and paste the following code into your project.

import { cn } from '@/lib/utils'

import { computed, Directive, input } from '@angular/core'

@Directive({
  standalone: true,
  selector: 'div[ubCard]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('rounded-lg border bg-card text-card-foreground shadow-sm', this.class()),
  )
}

@Directive({
  standalone: true,
  selector: 'div[ubCardHeader]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardHeaderDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('flex flex-col space-y-1.5 p-6', this.class()),
  )
}

@Directive({
  standalone: true,
  selector: 'h3[ubCardTitle]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardTitleDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('text-2xl font-semibold leading-none tracking-tight', this.class()),
  )
}

@Directive({
  standalone: true,
  selector: 'p[ubCardDescription]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardDescriptionDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('text-sm text-muted-foreground', this.class()),
  )
}

@Directive({
  standalone: true,
  selector: 'div[ubCardContent]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardContentDirective {
  readonly class = input<string>()
  protected computedClass = computed(() => cn('p-6 pt-0', this.class()))
}

@Directive({
  standalone: true,
  selector: 'div[ubCardFooter]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardFooterDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('flex items-center p-6 pt-0', this.class()),
  )
}

import { cn } from '@/lib/utils'

import { computed, Directive, input } from '@angular/core'

@Directive({
  standalone: true,
  selector: 'div[ubCard]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('rounded-xl border bg-card text-card-foreground shadow', this.class()),
  )
}

@Directive({
  standalone: true,
  selector: 'div[ubCardHeader]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardHeaderDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('flex flex-col space-y-1.5 p-6', this.class()),
  )
}

@Directive({
  standalone: true,
  selector: 'h3[ubCardTitle]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardTitleDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('font-semibold leading-none tracking-tight', this.class()),
  )
}

@Directive({
  standalone: true,
  selector: 'p[ubCardDescription]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardDescriptionDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('text-sm text-muted-foreground', this.class()),
  )
}

@Directive({
  standalone: true,
  selector: 'div[ubCardContent]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardContentDirective {
  readonly class = input<string>()
  protected computedClass = computed(() => cn('p-6 pt-0', this.class()))
}

@Directive({
  standalone: true,
  selector: 'div[ubCardFooter]',
  host: {
    '[class]': 'computedClass()',
  },
})
export class UbCardFooterDirective {
  readonly class = input<string>()
  protected computedClass = computed(() =>
    cn('flex items-center p-6 pt-0', this.class()),
  )
}

Update the import paths to match your project setup.

Usage

import {
  UbCardContentDirective,
  UbCardDescriptionDirective,
  UbCardDirective,
  UbCardFooterDirective,
  UbCardHeaderDirective,
  UbCardTitleDirective,
} from '@/components/ui/card'

 <div ubCard>
    <div ubCardHeader>
        <h3 ubCardTitle>Card Title</h3>
        <p ubCardDescription>Card Description</p>
    </div>
    <div ubCardContent>
       <p>Card Content</p>
    </div>
    <div ubCardFooter>
        <p>Card Footer</p>
    </div>
</div>

Button Input