React CRUD Layouts - Flowbite

Use the CRUD layout components to create, read, update, and delete data from your application based on a table layout with modals and drawers coded with Tailwind CSS.


Default CRUD layout

Use this free component to show data from your application inside a table with create, read, update, and delete modals.

View on GitHub
Product nameCategoryBrandDescriptionPriceActions
Apple iMac 27"PCAppleWhat is a product description?$2999
Apple iMac 20"PCAppleWhat is a product description?$1499
Apple iPhone 14"PCAppleWhat is a product description?$2999
Apple iPad AirPCAppleWhat is a product description?$1199
Xbox Series SGaming/ConsoleMicrosoftWhat is a product description?$299
PlayStation 5Gaming/ConsoleSonyWhat is a product description?$799
Xbox Series XGaming/ConsoleMicrosoftWhat is a product description?$699
Apple Watch SEWatchAppleWhat is a product description?$399
NIKON D850CameraNikonWhat is a product description?$599
Monitor BenQ EX2710QTV/MonitorBenQWhat is a product description?$499

CRUD layout for product management

Use this component to show a list of products inside a table featuring bulk actions, images, tags, reviews, and CRUD actions using drawers.

View on GitHub
All Products: 1234561-100 (436)
ProductCategoryStockSales/DaySales/MonthRatingSalesRevenueLast Update
Apple iMac 27"Desktop PC
95
1.470.47

5.0

1.6M
$3.2M
Apple iMac 20"Desktop PC
108
1.150.32

5.0

6M
$785K
Apple iPhone 14Phone
24
1.000.99

4.0

1.2M
$3.2M
Apple iPad AirTablet
287
0.471.00

4.0

298K
$425K
Xbox Series SGaming/Console
450
1.610.30

5.0

99
$345K
PlayStation 5Gaming/Console
2435
1.410.11

4.0

2.1M
$4.2M
Xbox Series XGaming/Console
235
7.093.32

5.0

989K
$2.27M

CRUD layout with expandable rows

This table layout can be used to show expandable rows to show more information about a data entry including the CRUD actions and modals.

View on GitHub
Flowbite Products
6,560 results
More info
Expand/Collapse RowProductCategoryBrandPriceStockTotal SalesStatus
Apple iMac 27"PCApple$2999200245Active
Apple iMac 20"PCApple$149912372000Active
Apple iPhone 14PhoneApple$999300466Active
Apple iPad AirTabletApple$1199457690Active
Xbox Series SGaming/ConsoleMicrosoft$299563087Active
PlayStation 5Gaming/ConsoleSony$799782999Active
Xbox Series XGaming/ConsoleMicrosoft$6992001870Active
Purchase price
$ 3,567,890
Total selling price
$ 8,489,400

CRUD layout for user management

This example can be used to manage users inside an application system using CRUD action modals and featuring table filtering options.

View on GitHub
All Users
Show:
UserUser RoleEmailAccount typeRatingCountryStatusActions
iMac FrontJese Leos
Administrator
jese@example.com
PRO
4.7
United States
Active
iMac FrontBonnie Green
Viewer
bonnie@example.com
PRO
3.9
United States
Active
iMac FrontLeslie Livingston
Moderator
leslie@example.com
PRO
4.8
United States
Inactive
iMac FrontMicheal Gough
Moderator
michael@example.com
Basic
5
France
Active
iMac FrontJoseph McFall
Viewer
joseph@example.com
Basic
4.2
England
Active
iMac FrontRobert Brown
Viewer
robert@example.com
Basic
4.5
Canada
Inactive
iMac FrontKaren Nelson
Viewer
karen@example.com
PRO
4.1
Canada
Inactive
Total users: 1867

CRUD layout with horizontal cards

Use this example to show a list of items from your database inside a list of cards with CRUD actions including creating, reading, updating, and deleting data.

View on GitHub

Apple iMac 27"

Category

PC/Desktop PC

Price

$2999

Stock

300

Total Sales

466

Xbox Series S

Category

Gaming/Console

Price

$299

Stock

56

Total Sales

3040

PlayStation 5

Category

Gaming/Console

Price

$799

Stock

78

Total Sales

2999

Monitor BenQ EX2710Q

Category

TV/Monitor

Price

$499

Stock

354

Total Sales

76

Apple iPhone 14

Category

Phone

Price

$999

Stock

1237

Total Sales

2000