DM
Davide Marchica

Dashboard - Copy this React, Tailwind Component to your project

"Design a modern, interactive UI dashboard for a website builder inspired by Elementor. The layout should feature a top toolbar with clearly defined options such as 'Grids' (which allows toggling between pixel based structured grids), 'Elements' (which expands into components like widgets, text, and plugins), 'Text' (offering choices for special text styles), 'Components', and 'Plugins' (with options to import or customize written code). A 'Preview' button should allow live previewing of the project, and there should be an AI Assistant tool that can be dragged into elements or text to enhance design suggestions. The left sidebar should have the following features: Layers section: Visualize layers, group elements, rename, move up or down, lock, copy/paste, and unlock. Pages section: Switch between pages, rename, and delete pages. Mobile/Tablet/Desktop toggle: Switch between these views for responsive design testing. The main workspace should enable drag and drop functionality, with a sticky BottomBar for further customization whenever an element is selected, offering options like opacity, gradients, shadows, blur, alignment, and layout settings (height, width, and color). The design should have a brand identity section featuring: Logo and Icon options, with a primary color of #0054c5 (blue), secondary color #ffffff (white), and alert color #D9D9D9 (light pink). Fonts should use Montserrat in bold, semibold, and regular weights. Ensure there are clear indications of actions such as importing models, choosing templates, and guided design processes. The overall design should use a clean, modern aesthetic, leveraging purple (#0054c5) and secondary colors, with a focus on ease of navigation and visual clarity. Add a 5° angle to the buttons for a unique touch, and the system should offer prebuilt palettes and brand identity suggestions."

Prompt
Component Preview

About

Dashboard - Create a modern UI with a top toolbar, drag-and-drop workspace, layers, responsive views, and brand identity options, buil. Get code instantly!

Share

Last updated 1 month ago