Website Editor - Built with @shadcn/designer

A fully-featured website editor built using the powerful @shadcn/designer components. This editor provides a professional design tool experience with infinite canvas, layer management, and comprehensive design controls.

🚀 Features

• Infinite Canvas: Zoom, pan, and navigate your design space
• Layer Management: Organize and manage multiple design layers
• Professional Tools: Text, image, frame, and shape tools
• Real-time Controls: Position, size, rotation, and style controls
• Responsive Design: Works on desktop and mobile devices
• Export/Import: Save and load your designs
• History Management: Undo/redo functionality
• Custom Themes: Light and dark mode support

📋 Prerequisites

• Node.js 18+
• Yarn package manager
• @shadcn/designer business license

🛠️ Installation

1. Clone the Repository

git clone <your-repo-url>
cd shadashboard

2. Install Dependencies

yarn install

3. Install @shadcn/designer

Important: You need a business license to install this package. Purchase one from https://ds.shadcn.com/pricing.

yarn add "https://ds.shadcn.com/registry?version=1.0.0&license=YOUR_LICENSE_KEY"

Replace YOUR_LICENSE_KEY with your actual license key.

4. Start Development Server

yarn dev

🏗️ Project Structure

src/
├── components/
│   ├── DesignerHeader.tsx    # Header with title and controls
│   ├── DesignerToolbar.tsx   # Main toolbar with tools
│   ├── PanelLeft.tsx         # Left panel (layers, pages, history)
│   └── PanelRight.tsx        # Right panel (layer properties)
├── App.tsx                   # Main application component
└── index.css                 # Tailwind CSS imports

🎨 Components Overview

DesignerHeader

• Project branding and title
• Mode switching (design/preview)
• Theme controls
• Fullscreen toggle

DesignerToolbar

• Selection and move tools
• Layer creation tools (text, image, frame, shape)
• Zoom controls
• History controls (undo/redo)
• Save and preview actions

PanelLeft

• Project information
• Pages management
• Layer tree view
• History timeline
• Export/import operations

PanelRight

• Layer properties (position, size, opacity)
• Transform controls (rotation, skew, scale)
• Style controls (fill, border, shadow, padding)
• Text-specific controls (font, color, alignment)
• Image-specific controls (fit, filters)

🎯 Usage

Basic Operations

1. Add Layers: Use toolbar buttons or press keyboard shortcuts

   • T - Add text layer
   • I - Add image layer
   • F - Add frame layer

2. Select Layers: Click on layers or use the selection tool

3. Move Layers: Drag layers around the canvas

4. Resize Layers: Use the resize handles on selected layers

5. Edit Properties: Use the right panel to modify layer properties

Advanced Features

• Zoom: Use zoom tools or mouse wheel
• Pan: Hold space and drag to move around the canvas
• Multi-select: Hold Shift to select multiple layers
• Grouping: Select multiple layers and group them together
• Export: Save your design as an image or export the project file

🔧 Customization

Adding Custom Actions

You can create custom actions using the provided hooks:

import { createLayerCssVarAction, useLayerCssVarAction } from "@shadcn/designer";

const customAction = createLayerCssVarAction("--custom-property", "default-value");
const [value, setValue] = useLayerCssVarAction(customAction);

Custom Layer Types

Extend the designer with your own layer types:

import { createCustomLayer } from "@shadcn/designer";

const customLayer = createCustomLayer({
  type: "custom",
  render: (props) => <YourCustomComponent {...props} />,
  // ... other configuration
});

📱 Responsive Design

The editor is built with responsive design in mind:

• Adapts to different screen sizes
• Touch-friendly controls for mobile devices
• Optimized performance for various devices

🚀 Deployment

Build for Production

yarn build

Deploy to Vercel

yarn add -D vercel
vercel --prod

Deploy to Netlify

yarn add -D netlify-cli
netlify deploy --prod

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is licensed under the MIT License. However, the @shadcn/designer package requires a separate business license.

🙏 Acknowledgments

• Built with @shadcn/designer
• Powered by React and Tailwind CSS
• Developed with Vite

📞 Support

For issues related to this project, please open an issue on GitHub.

For @shadcn/designer support, visit https://ds.shadcn.com/docs

---

Built with ❤️ using @shadcn/designer