Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

Component Library

Browse and explore components

Cards

A Card is a UI component used to group related information and actions within a contained, visually distinct box.

Default Card

Noteworthy technology acquisitions

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using more-or-less normal distribution of letters, as opposed to using more-or-less normal distribution of letters

import { Card } from 'flowbite-react'

const DefaultCardCode = () => {
  return (
    <>
      <div>
        <Card href='#' className='max-w-sm'>
          <h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white'>
            Noteworthy technology acquisitions
          </h5>
          <p className='font-normal'>
            It is a long established fact that a reader will be distracted by
            the readable content of a page when looking at its layout. The point
            of using Lorem Ipsum is that it has a more-or-less normal
            distribution of letters, as opposed to using more-or-less normal
            distribution of letters, as opposed to using more-or-less normal
            distribution of letters
          </p>
        </Card>
      </div>
    </>
  )
}

export default DefaultCardCode

Card With CTA Button

Noteworthy technology acquisitions

Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.It is a long established fact that a reader will be distracted by the readable content of a page.

import { Card, Button } from 'flowbite-react'

const CTACardButtonCode = () => {
  return (
    <>
      <div>
        <Card className='max-w-sm'>
          <h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white'>
            Noteworthy technology acquisitions
          </h5>
          <p className='font-normal pb-[0.625rem]'>
            Here are the biggest enterprise technology acquisitions of 2024 so
            far, in reverse chronological order.It is a long established fact
            that a reader will be distracted by the readable content of a page.
          </p>
          <Button color='primary' className='w-fit'>
            Read more
            <svg
              className='-mr-1 ml-2 h-4 w-4'
              fill='currentColor'
              viewBox='0 0 20 20'
              xmlns='http://www.w3.org/2000/svg'>
              <path
                fillRule='evenodd'
                d='M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z'
                clipRule='evenodd'
              />
            </svg>
          </Button>
        </Card>
      </div>
    </>
  )
}

export default CTACardButtonCode

Card With Image

Meaningful alt text for an image that is not purely decorative

Noteworthy technology acquisitions

Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.

import { Card } from 'flowbite-react'

const CardWithImageCode = () => {
  return (
    <>
      <div>
        <Card
          className='max-w-sm'
          imgAlt='Meaningful alt text for an image that is not purely decorative'
          imgSrc='/images/blog/blog-img2.jpg'>
          <h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white pt-3'>
            Noteworthy technology acquisitions
          </h5>
          <p className='font-normal'>
            Here are the biggest enterprise technology acquisitions of 2024 so
            far, in reverse chronological order.
          </p>
        </Card>
      </div>
    </>
  )
}

export default CardWithImageCode

Image Render Function

Noteworthy technology acquisitions

Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.

import { Card } from 'flowbite-react'

const CustomImageREnderCode = () => {
  return (
    <>
      <div>
        <Card
          className='max-w-sm'
          renderImage={() => (
            <img
              width={300}
              height={200}
              src='/images/blog/blog-img2.jpg'
              alt='image 1'
            />
          )}>
          <h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white pt-4'>
            Noteworthy technology acquisitions
          </h5>
          <p className='font-normal'>
            Here are the biggest enterprise technology acquisitions of 2024 so
            far, in reverse chronological order.
          </p>
        </Card>
      </div>
    </>
  )
}

export default CustomImageREnderCode

Horizontal Card

Noteworthy technology acquisitions

Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.

Noteworthy technology acquisitions

Here are the biggest enterprise technology acquisitions of 2024 so far, in reverse chronological order.

import { Card } from 'flowbite-react'

const HorizontalCardCode = () => {
  return (
    <>
      <div className='grid grid-cols-12 gap-5 sm:gap-7'>
        <div className='lg:col-span-6 col-span-12'>
          <Card
            className='max-w-sm'
            imgSrc='/images/blog/blog-img3.jpg'
            horizontal>
            <h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white p-4'>
              Noteworthy technology acquisitions
            </h5>
            <p className='font-normal pl-4'>
              Here are the biggest enterprise technology acquisitions of 2024 so
              far, in reverse chronological order.
            </p>
          </Card>
        </div>
        <div className='lg:col-span-6 col-span-12'>
          <Card
            className='max-w-sm'
            imgSrc='/images/blog/blog-img4.jpg'
            horizontal>
            <h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white p-4'>
              Noteworthy technology acquisitions
            </h5>
            <p className='font-normal pl-4'>
              Here are the biggest enterprise technology acquisitions of 2024 so
              far, in reverse chronological order.
            </p>
          </Card>
        </div>
      </div>
    </>
  )
}

export default HorizontalCardCode

User Profile Card

Bonnie Green

Visual Designer

Add friend Message

import { Card, Dropdown, DropdownItem } from 'flowbite-react'

const UserProfileCardCode = () => {
  return (
    <div>
      <div>
        <Card className='max-w-sm'>
          <div className='flex justify-end px-4'>
            <Dropdown label='' inline className='cursor-pointer'>
              <DropdownItem>
                <a
                  href='#'
                  className='block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white'>
                  Edit
                </a>
              </DropdownItem>
              <DropdownItem>
                <a
                  href='#'
                  className='block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white'>
                  Export Data
                </a>
              </DropdownItem>
              <DropdownItem>
                <a
                  href='#'
                  className='block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:text-red-600 dark:hover:bg-gray-600 dark:hover:text-white'>
                  Delete
                </a>
              </DropdownItem>
            </Dropdown>
          </div>
          <div className='flex flex-col items-center'>
            <img
              alt='Bonnie image'
              height={96}
              src='/images/profile/user-3.jpg'
              width={96}
              className='mb-3 rounded-full shadow-lg'
            />
            <h5 className='mb-1 text-xl font-medium text-gray-900 dark:text-white'>
              Bonnie Green
            </h5>
            <span className='text-sm text-gray-500 dark:text-gray-400'>
              Visual Designer
            </span>
            <div className='mt-4 flex space-x-3 lg:mt-6'>
              <a
                href='#'
                className='inline-flex items-center rounded-lg bg-primary  px-4 py-2 text-center text-sm font-medium text-white focus:outline-hidden dark:bg-primary dark:hover:bg-primaryemphasis'>
                Add friend
              </a>
              <a
                href='#'
                className='inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-hidden focus:ring-0 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-700'>
                Message
              </a>
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default UserProfileCardCode

Card With Form

import { Card, Label, TextInput, Checkbox, Button } from 'flowbite-react'

const CardWithFormCode = () => {
  return (
    <div>
      <Card className='max-w-sm'>
        <form className='flex flex-col gap-4'>
          <div>
            <div className='mb-2 block'>
              <Label htmlFor='email1'>Your email</Label>
            </div>
            <TextInput
              id='email1'
              type='email'
              placeholder='info@matdash.com'
              className='!form-control'
              required
            />
          </div>
          <div>
            <div className='mb-2 block'>
              <Label htmlFor='password1'>Your password</Label>
            </div>
            <TextInput
              id='password1'
              type='password'
              className='!form-control'
              required
            />
          </div>
          <div className='flex items-center gap-2'>
            <Checkbox id='remember' className='checkbox' />
            <Label htmlFor='remember'>Remember me</Label>
          </div>
          <Button type='submit' color='primary' className='w-fit px-10'>
            Submit
          </Button>
        </form>
      </Card>
    </div>
  )
}

export default CardWithFormCode

Card With List

Latest Customers

View all

Neil Sims
email@windster.com
$320
Bonnie Green
email@windster.com
$3467
Michael Gough
email@windster.com
$67
Lana Byrd
email@windster.com
$367
Thomes Lean
email@windster.com
$2367
Thomes Alia
email@windster.com
$1267

import { Card } from 'flowbite-react'
import Image from 'next/image'

const CardWithListCode = () => {
  return (
    <div>
      <Card className='max-w-sm'>
        <div className='mb-4 flex items-center justify-between'>
          <h5 className='text-xl font-bold leading-none text-gray-900 dark:text-white'>
            Latest Customers
          </h5>
          <a
            href='#'
            className='text-sm font-medium text-primary hover:underline dark:text-primary'>
            View all
          </a>
        </div>
        <div className='flow-root'>
          <ul className='divide-y divide-gray-200 dark:divide-gray-700'>
            <li className='py-3 sm:py-4'>
              <div className='flex items-center space-x-4'>
                <div className='shrink-0'>
                  <Image
                    alt='Neil image'
                    height='32'
                    src='/images/profile/user-2.jpg'
                    width='32'
                    className='rounded-full'
                  />
                </div>
                <div className='min-w-0 flex-1'>
                  <p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
                    Neil Sims
                  </p>
                  <p className='truncate text-sm text-gray-500 dark:text-gray-400'>
                    email@windster.com
                  </p>
                </div>
                <div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
                  $320
                </div>
              </div>
            </li>
            <li className='py-3 sm:py-4'>
              <div className='flex items-center space-x-4'>
                <div className='shrink-0'>
                  <Image
                    alt='Bonnie image'
                    height='32'
                    src='/images/profile/user-3.jpg'
                    width='32'
                    className='rounded-full'
                  />
                </div>
                <div className='min-w-0 flex-1'>
                  <p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
                    Bonnie Green
                  </p>
                  <p className='truncate text-sm text-gray-500 dark:text-gray-400'>
                    email@windster.com
                  </p>
                </div>
                <div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
                  $3467
                </div>
              </div>
            </li>
            <li className='py-3 sm:py-4'>
              <div className='flex items-center space-x-4'>
                <div className='shrink-0'>
                  <Image
                    alt='Michael image'
                    height='32'
                    src='/images/profile/user-4.jpg'
                    width='32'
                    className='rounded-full'
                  />
                </div>
                <div className='min-w-0 flex-1'>
                  <p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
                    Michael Gough
                  </p>
                  <p className='truncate text-sm text-gray-500 dark:text-gray-400'>
                    email@windster.com
                  </p>
                </div>
                <div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
                  $67
                </div>
              </div>
            </li>
            <li className='py-3 sm:py-4'>
              <div className='flex items-center space-x-4'>
                <div className='shrink-0'>
                  <Image
                    alt='Lana image'
                    height='32'
                    src='/images/profile/user-5.jpg'
                    width='32'
                    className='rounded-full'
                  />
                </div>
                <div className='min-w-0 flex-1'>
                  <p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
                    Lana Byrd
                  </p>
                  <p className='truncate text-sm text-gray-500 dark:text-gray-400'>
                    email@windster.com
                  </p>
                </div>
                <div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
                  $367
                </div>
              </div>
            </li>
            <li className='py-3 sm:py-4'>
              <div className='flex items-center space-x-4'>
                <div className='shrink-0'>
                  <Image
                    alt='Thomas image'
                    height='32'
                    src='/images/profile/user-6.jpg'
                    width='32'
                    className='rounded-full'
                  />
                </div>
                <div className='min-w-0 flex-1'>
                  <p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
                    Thomes Lean
                  </p>
                  <p className='truncate text-sm text-gray-500 dark:text-gray-400'>
                    email@windster.com
                  </p>
                </div>
                <div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
                  $2367
                </div>
              </div>
            </li>
            <li className='py-3 sm:py-4'>
              <div className='flex items-center space-x-4'>
                <div className='shrink-0'>
                  <Image
                    alt='Thomas image'
                    height='32'
                    src='/images/profile/user-7.jpg'
                    width='32'
                    className='rounded-full'
                  />
                </div>
                <div className='min-w-0 flex-1'>
                  <p className='truncate text-sm font-medium text-gray-900 dark:text-white'>
                    Thomes Alia
                  </p>
                  <p className='truncate text-sm text-gray-500 dark:text-gray-400'>
                    email@windster.com
                  </p>
                </div>
                <div className='inline-flex items-center text-base font-semibold text-gray-900 dark:text-white'>
                  $1267
                </div>
              </div>
            </li>
          </ul>
        </div>
      </Card>
    </div>
  )
}

export default CardWithListCode

Pricing Card

Standard plan

$49/month

2 team members
20GB Cloud storage
Integration help
Sketch Files
API Access
Complete documentation
24×7 phone & email support

import { Card } from 'flowbite-react'

const PricingCardCode = () => {
  return (
    <div>
      <Card className='max-w-sm'>
        <h5 className='mb-4 text-xl font-medium text-gray-500 dark:text-gray-400'>
          Standard plan
        </h5>
        <div className='flex items-baseline text-gray-900 dark:text-white'>
          <span className='text-3xl font-semibold'>$</span>
          <span className='text-5xl font-extrabold tracking-tight'>49</span>
          <span className='ml-1 text-xl font-normal text-gray-500 dark:text-gray-400'>
            /month
          </span>
        </div>
        <ul className='my-7 space-y-5'>
          <li className='flex space-x-3'>
            <svg
              className='h-5 w-5 shrink-0 text-primary dark:text-primary'
              fill='currentColor'
              viewBox='0 0 20 20'
              xmlns='http://www.w3.org/2000/svg'>
              <path
                fillRule='evenodd'
                d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
                clipRule='evenodd'
              />
            </svg>
            <span className='text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
              2 team members
            </span>
          </li>
          <li className='flex space-x-3'>
            <svg
              className='h-5 w-5 shrink-0 text-primary dark:text-primary'
              fill='currentColor'
              viewBox='0 0 20 20'
              xmlns='http://www.w3.org/2000/svg'>
              <path
                fillRule='evenodd'
                d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
                clipRule='evenodd'
              />
            </svg>
            <span className='text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
              20GB Cloud storage
            </span>
          </li>
          <li className='flex space-x-3'>
            <svg
              className='h-5 w-5 shrink-0 text-primary dark:text-primary'
              fill='currentColor'
              viewBox='0 0 20 20'
              xmlns='http://www.w3.org/2000/svg'>
              <path
                fillRule='evenodd'
                d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
                clipRule='evenodd'
              />
            </svg>
            <span className='text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
              Integration help
            </span>
          </li>
          <li className='flex space-x-3 line-through decoration-gray-500'>
            <svg
              className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500'
              fill='currentColor'
              viewBox='0 0 20 20'
              xmlns='http://www.w3.org/2000/svg'>
              <path
                fillRule='evenodd'
                d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
                clipRule='evenodd'
              />
            </svg>
            <span className='text-base font-normal leading-tight text-gray-500'>
              Sketch Files
            </span>
          </li>
          <li className='flex space-x-3 line-through decoration-gray-500'>
            <svg
              className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500'
              fill='currentColor'
              viewBox='0 0 20 20'
              xmlns='http://www.w3.org/2000/svg'>
              <path
                fillRule='evenodd'
                d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
                clipRule='evenodd'
              />
            </svg>
            <span className='text-base font-normal leading-tight text-gray-500'>
              API Access
            </span>
          </li>
          <li className='flex space-x-3 line-through decoration-gray-500'>
            <svg
              className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500'
              fill='currentColor'
              viewBox='0 0 20 20'
              xmlns='http://www.w3.org/2000/svg'>
              <path
                fillRule='evenodd'
                d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
                clipRule='evenodd'
              />
            </svg>
            <span className='text-base font-normal leading-tight text-gray-500'>
              Complete documentation
            </span>
          </li>
          <li className='flex space-x-3 line-through decoration-gray-500'>
            <svg
              className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500'
              fill='currentColor'
              viewBox='0 0 20 20'
              xmlns='http://www.w3.org/2000/svg'>
              <path
                fillRule='evenodd'
                d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
                clipRule='evenodd'
              />
            </svg>
            <span className='text-base font-normal leading-tight text-gray-500'>
              24×7 phone & email support
            </span>
          </li>
        </ul>
        <button
          type='button'
          className='inline-flex w-full justify-center rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary focus:outline-none focus:ring-0 focus:ring-cyan-200 dark:focus:ring-cyan-900 hover:cursor-pointer'>
          Choose plan
        </button>
      </Card>
    </div>
  )
}

export default PricingCardCode

E-commerce card

Apple Watch Series 7 in colors pink, silver, and black

The Ultimate Aluminium Case in Starlight Sport

5.0

$599Add to cart

CTA card

Work fast from anywhere

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web It is a long 'lorem ipsum' will uncover many web It is a long

API ( Card )

Prop	Description	Type	Default
href	Specifies the URL to navigate to when the card is clicked.	string	null
imgAlt	Provides alternative text for the image, improving accessibility.	string	null
imgSrc	Specifies the source URL of the image to be displayed in the card.	string	null
renderImage	Allows custom rendering of the image component. If provided, `imgSrc` and `imgAlt` are ignored.	() => <Image width={500} height={500} src="/images/blog/image-1.jpg" alt="image 1" />	null
horizontal	Displays the card in a horizontal layout, placing the image beside the content.	boolean	false

Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

Component Library

INPUTS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

Cards

Default Card

Noteworthy technology acquisitions

Sample Code

Card With CTA Button

Noteworthy technology acquisitions

Sample Code

Card With Image

Noteworthy technology acquisitions

Sample Code

Image Render Function

Noteworthy technology acquisitions

Sample Code

Horizontal Card

Noteworthy technology acquisitions

Noteworthy technology acquisitions

Sample Code

User Profile Card

Bonnie Green

Sample Code

Card With Form

Sample Code

Card With List

Latest Customers

Sample Code

Pricing Card

Standard plan

Sample Code

E-commerce card

The Ultimate Aluminium Case in Starlight Sport

CTA card

Work fast from anywhere

API ( Card )