Svelte Read Sections (CRUD) - Flowbite Svelte Blocks

Get started with a collection of responsive website sections to show details about data entries from your database based on the CRUD layouts.

Default read section #

Use this free example of a “read” CRUD layout section to show details of an existing data entry from your database.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><section class="relative py-6 sm:py-10"><div class="py-8 px-4 mx-auto max-w-2xl lg:py-16"><h2 class="text-xl font-semibold leading-none md:text-2xl text-gray-900 dark:text-white w-full mb-2">Apple iMac 25&quot;</h2>  <p class="text-xl text-gray-900 dark:text-white font-extrabold text-left whitespace-normal mb-4 leading-none md:text-2xl">$2999</p>  <dl data-svelte-h="svelte-11qhf3n"><dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Details</dt><dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">Standard glass ,3.8GHz 8-core 10th-generation Intel Core i7 processor, Turbo Boost up to 5.0GHz, 16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT with 8GB of GDDR6 memory, 256GB SSD storage, Gigabit Ethernet, Magic Mouse 2, Magic Keyboard - US.</dd></dl> <dl class="flex items-center space-x-6" data-svelte-h="svelte-1aed05h"><div><dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Category</dt> <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">Electronics/PC</dd> </div><div><dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Item weight</dt> <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">12kg</dd></div></dl> <div class="flex items-center space-x-4"><button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg"><svg aria-hidden="true" class="mr-1 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
Edit</button>  <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus-within:ring-red-300 dark:focus-within:ring-red-900 rounded-lg"><svg aria-hidden="true" class="w-5 h-5 mr-1.5 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
Delete</button> </div></div></section> </div>
Svelte
<script lang="ts">
  import { Section } from 'flowbite-svelte-blocks';
  import { Button, Heading, P } from 'flowbite-svelte';
</script>

<Section name="crudreadsection">
  <Heading tag="h2" customSize="text-xl font-semibold leading-none text-gray-900 md:text-2xl" class="mb-2">Apple iMac 25"</Heading>
  <P class="mb-4 leading-none md:text-2xl" weight="extrabold" size="xl">$2999</P>
  <dl>
    <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Details</dt>
    <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">Standard glass ,3.8GHz 8-core 10th-generation Intel Core i7 processor, Turbo Boost up to 5.0GHz, 16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT with 8GB of GDDR6 memory, 256GB SSD storage, Gigabit Ethernet, Magic Mouse 2, Magic Keyboard - US.</dd>
  </dl>
  <dl class="flex items-center space-x-6">
    <div>
      <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Category</dt>
      <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">Electronics/PC</dd>
    </div>
    <div>
      <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Item weight</dt>
      <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">12kg</dd>
    </div>
  </dl>
  <div class="flex items-center space-x-4">
    <Button>
      <svg aria-hidden="true" class="mr-1 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /></svg>
      Edit
    </Button>
    <Button color="red">
      <svg aria-hidden="true" class="w-5 h-5 mr-1.5 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>
      Delete
    </Button>
  </div>
</Section>

Component data

CRUD Read Modals

CRUD Success Message