I'll create a design properties panel component that mimics the styling interface shown in the images. This will include collapsible sections for Tailwind classes, positioning, layout, styles, and text properties.

I've created a design properties panel component that closely resembles the interface shown in the images. The component includes:

1. Collapsible panels for different property categories:

   • Tailwind Classes
   • Position & Dimensions
   • Flexbox & Layout
   • Styles
   • Text

2. Each panel contains property rows with:

   • Labels on the left
   • Controls on the right (inputs, dropdowns, buttons)

3. Various input types:

   • Text inputs with unit selectors (px, %)
   • Color pickers with hex values
   • Toggle buttons for alignment and style options
   • Dropdowns for selection options

4. The dark theme matches the design with:

   • Dark backgrounds (zinc-950, zinc-900)
   • Light text for contrast
   • Border styling to separate elements

The component is fully responsive and can be used in any Next.js application.

I'll refactor the design properties panel to use shadcn/ui components and improve the styling to better match the original design.

I've refactored the design properties panel to use shadcn/ui components and improved the styling to better match the original design. Here are the key improvements:

1. Used shadcn/ui components:

   • Replaced custom panels with shadcn's Accordion component
   • Used shadcn's Input component for text fields
   • Used shadcn's Select component for dropdowns
   • Used shadcn's Button component for all buttons

2. Improved styling:

   • Adjusted the dark theme colors to match the original design (zinc-950 for background, zinc-900 for inputs)
   • Fixed the height of inputs and buttons to be consistent (h-8)
   • Improved spacing and alignment between elements
   • Added proper hover states for interactive elements
   • Made sure borders use the correct color (zinc-700)

3. Enhanced functionality:

   • Added proper Select components with dropdown options
   • Improved the InputWithUnit component to use shadcn's Select for unit selection
   • Made the accordion panels properly collapsible

The component now looks much closer to the original design while using shadcn/ui components for a more consistent and accessible interface.