Card

Displays a card with header, content, and footer.

Preview

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

Mark all as read

Code

import Button from '@dinui/react/button'
import Card from '@dinui/react/card'
import Switch from '@dinui/react/switch'
import { cn } from '@dinui/react/utils'
import { IconBell, IconCheck } from '@tabler/icons-react'

const notifications = [
  {
    title: 'Your call has been confirmed.',
    description: '1 hour ago',
  },
  {
    title: 'You have a new message!',
    description: '1 hour ago',
  },
  {
    title: 'Your subscription is expiring soon!',
    description: '2 hours ago',
  },
]

type CardProps = React.ComponentProps<typeof Card>

export default function CardDemo({ className, ...props }: CardProps) {
  return (
    <Card className={cn('w-[380px]', className)} {...props}>
      <Card.Title>Notifications</Card.Title>
      <Card.Description>You have 3 unread messages.</Card.Description>

      <div className="mt-6 grid gap-4">
        <div className=" flex items-center space-x-4 rounded-md border p-4">
          <IconBell />
          <div className="flex-1 space-y-1">
            <p className="text-sm font-medium leading-none">Push Notifications</p>
            <p className="text-sm text-fg-weaker">Send notifications to device.</p>
          </div>
          <Switch />
        </div>
        <div>
          {notifications.map((notification, index) => (
            <div
              key={index}
              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
            >
              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
              <div className="space-y-1">
                <p className="text-sm font-medium leading-none">{notification.title}</p>
                <p className="text-sm text-fg-weaker">{notification.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <Card.Actions>
        <Button className="w-full">
          <Button.LeftIcon>
            <IconCheck />
          </Button.LeftIcon>
          Mark all as read
        </Button>
      </Card.Actions>
    </Card>
  )
}

With Form

Preview

Create project

Deploy your new project in one-click.

Name

FrameworkSelect

CancelDeploy

Code

import Button from '@dinui/react/button'
import Card from '@dinui/react/card'
import Input from '@dinui/react/input'
import Label from '@dinui/react/label'
import Select from '@dinui/react/select'

export default function CardWithForm() {
  return (
    <Card className="w-[350px]">
      <Card.Title>Create project</Card.Title>
      <Card.Description>Deploy your new project in one-click.</Card.Description>

      <form className="mt-6">
        <div className="grid w-full items-center gap-4">
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="name">Name</Label>
            <Input id="name" placeholder="Name of your project" />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="framework">Framework</Label>
            <Select>
              <Select.Trigger id="framework">
                <Select.Value placeholder="Select" />
              </Select.Trigger>
              <Select.Content position="popper">
                <Select.Item value="next">Next.js</Select.Item>
                <Select.Item value="sveltekit">SvelteKit</Select.Item>
                <Select.Item value="astro">Astro</Select.Item>
                <Select.Item value="nuxt">Nuxt.js</Select.Item>
              </Select.Content>
            </Select>
          </div>
        </div>

        <Card.Actions className="flex justify-between">
          <Button variant="outline">Cancel</Button>
          <Button>Deploy</Button>
        </Card.Actions>
      </form>
    </Card>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add card

   yarn

   yarn dlx @dinui/cli@latest add card

   pnpm

   pnpm dlx @dinui/cli@latest add card

   bun

   bunx @dinui/cli@latest add card

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-slot tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-slot tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-slot tailwind-variants type-fest

   bun

   bun add @radix-ui/react-slot tailwind-variants type-fest

3. Copy and paste the following code into your project

   import { Slot } from '@radix-ui/react-slot'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const card = tv({
     slots: {
       root: 'rounded-xl border bg-surface shadow p-6',
       title: 'font-semibold leading-none tracking-tight',
       description: 'mt-1.5 text-sm text-fg-weaker',
       actions: 'mt-6 flex items-center',
     },
   })
   
   const CardRoot = forwardRef<
     HTMLDivElement,
     Merge<
       React.HTMLAttributes<HTMLDivElement>,
       {
         asChild?: boolean
       }
     >
   >(({ asChild, ...props }, ref) => {
     const { root } = card()
   
     const Comp = asChild ? Slot : 'div'
     return <Comp {...props} ref={ref} className={root({ className: props.className })} />
   })
   CardRoot.displayName = 'Card'
   
   const CardTitle = forwardRef<
     HTMLParagraphElement,
     Merge<
       React.HTMLAttributes<HTMLHeadElement>,
       {
         asChild?: boolean
       }
     >
   >(({ asChild, ...props }, ref) => {
     const { title } = card()
   
     const Comp = asChild ? Slot : 'h3'
     return <Comp {...props} ref={ref} className={title({ className: props.className })} />
   })
   CardTitle.displayName = 'CardTitle'
   
   const CardDescription = forwardRef<
     HTMLParagraphElement,
     Merge<
       React.HTMLAttributes<HTMLParagraphElement>,
       {
         asChild?: boolean
       }
     >
   >(({ asChild, ...props }, ref) => {
     const { description } = card()
   
     const Comp = asChild ? Slot : 'p'
     return <Comp {...props} ref={ref} className={description({ className: props.className })} />
   })
   CardDescription.displayName = 'CardDescription'
   
   const CardActions = forwardRef<
     HTMLDivElement,
     Merge<
       React.HTMLAttributes<HTMLDivElement>,
       {
         asChild?: boolean
       }
     >
   >(({ asChild, ...props }, ref) => {
     const { actions } = card()
   
     const Comp = asChild ? Slot : 'div'
     return <Comp {...props} ref={ref} className={actions({ className: props.className })} />
   })
   CardActions.displayName = 'CardActions'
   
   const Card = Object.assign(CardRoot, {
     Title: CardTitle,
     Description: CardDescription,
     Actions: CardActions,
   })
   
   export default Card
   export { card }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.