Skip to content

[FEATURE] Improve SDK Component Customization, Error Display in WebUI, and Layout Flexibility #642

@starrylight90

Description

@starrylight90

Is your feature request related to a problem? Please describe.
Yes, while building the UI using the provided SDK, I encountered multiple issues with missing attributes in several components. For instance, the Table component lacks commonly expected attributes like size, and many other components fail to expose enough props to allow basic customization. It becomes especially frustrating when debugging, as errors like "class required" are only visible in logs (which don't seem to work reliably), and nothing is visibly shown on screen in the WebUI.

This made it difficult to understand what went wrong until I had to clone and run the entire project locally. I expected a more transparent and interactive developer experience with clearer error messages in the WebUI.

Describe the solution you'd like

  • Implement meaningful on-screen error messages or visual cues when required attributes are missing or incorrect (e.g., "Missing required class", "Invalid value for prop x").
  • Fix or enhance log output so developers can rely on it without needing to clone and run the SDK locally.
  • Provide more flexible and configurable SDK components, such as Table, with props like: dense / compact (commonly used to reduce row height and make tables look tighter). rowHeight, maxRows, pagination, etc.
  • Expose more layout control features to align components horizontally. Currently, everything renders in a single column with no grid/flex layout support, making it difficult to structure meaningful UIs.
  • Consider directly importing or proxying attributes from the base component libraries (e.g., ShadCN, Tailwind UI, Material, etc.) so developers don’t need to redefine basic behavior from scratch.

Describe alternatives you've considered

  • I cloned and ran the WebUI project locally from GitHub just to read the logs and understand what was silently failing.
  • Since the Table component couldn't handle layout control, I worked around it by manually rendering search results using multiple Text() components for each item, followed by a summary line like "and x more..." to control the display length and avoid overflow.
  • I also tried inspecting component definitions in the SDK repo to see what props they might support — this approach is not ideal or sustainable for teams working on tight deadlines.

Additional context
A more configurable Table component (inspired by libraries like Flutter’s DataTable or MUI's Table with size="small") would greatly help in making dense, readable UIs.

Regards,
Swayam

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions