How to Use

How to Use Nebula Components

Browsing Components

Navigate to the Components section to see all available components. Each component is displayed with:

• Live Preview: See the component rendered with its styles
• Code View: View the HTML and Tailwind CSS source code
• Copy Button: Copy the code to your clipboard
• Component Info: Title, description, category, and tags

Creating New Components

Use the “Create New” page to add components to the library:

1. Enter a title and description
2. Select a category or create a new one
3. Add relevant tags
4. Write your HTML code with Tailwind CSS classes
5. Toggle preview on/off
6. Save to Cloudflare KV

Code Format

Components should use standard HTML with Tailwind CSS classes:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

Tips

• Use semantic HTML elements when possible
• Include responsive classes for mobile-first design
• Add meaningful class names for better readability
• Test your components in the preview before saving