Add Playground feature for live component preview #98
Description
We need to implement a Playground feature in nur/ui on this page nurui playground
. This will allow users to test and preview our components in real-time interactively.
Requirements:
Create a new Playground page/section in the documentation site.
- Integrate a code editor (e.g., react-live, sandpack-react, or monaco-editor).
- Support live editing of component props and styles.
- Display rendered output alongside the editable code.
- Ensure the Playground matches the overall design system of nur/ui.
- Provide a few preloaded examples (e.g., buttons, cards, inputs) for quick testing.
Why is this needed?
- Helps developers quickly test components without needing to clone the repository.
- Improves developer experience and documentation usability.
- Demonstrates the flexibility and customization of nur/ui components.
Acceptance Criteria:
- A Playground page exists in the docs.
- Users can edit code and see results instantly.
- Components from nur/ui load correctly in the Playground.
- The Playground is responsive and styled consistently with nur/ui.
Additional Notes:
Potential libraries to consider:
react-live
sandpack-react
monaco-editor