Docs
Card
Card
Displays a card with header, content, and footer.
Loading...
Loading...
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,
selector: 'card-with-form-new-york',
imports: [
UbCardDirective,
UbCardHeaderDirective,
UbCardTitleDirective,
UbCardDescriptionDirective,
UbCardContentDirective,
UbCardFooterDirective,
UbInputDirective,
UbLabelDirective,
UbButtonDirective,
],
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 '@/registry/new-york/ui/button'
import {
UbCardContentDirective,
UbCardDescriptionDirective,
UbCardDirective,
UbCardFooterDirective,
UbCardHeaderDirective,
UbCardTitleDirective,
} from '@/registry/new-york/ui/card'
import { UbInputDirective } from '@/registry/new-york/ui/input'
import { UbLabelDirective } from '@/registry/new-york/ui/label'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'card-with-form-default',
imports: [
UbCardDirective,
UbCardHeaderDirective,
UbCardTitleDirective,
UbCardDescriptionDirective,
UbCardContentDirective,
UbCardFooterDirective,
UbInputDirective,
UbLabelDirective,
UbButtonDirective,
],
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
npx shadcn-ng@latest add card
npm
yarn
pnpm
bun
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-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()),
)
}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()),
)
}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>