A reusable React component
npm install serverkit-ide-libYou can install this package via npm:
``bash`
npm install serverkit-ide-lib
---
- Installation: Instructions for installing serverkit-ide-lib.Theme
- Usage: How to use in an app, wrapping the entire application.example
- Component Examples in the folder, each with a brief description, making it easier to locate and understand how to use each component.
A Dialog component based on Radix UI's Dialog system, providing customizable content, layout, and controls.
Here's how to use the Dialog component, including examples of common props like isOpen, onClose, and title:
`typescript
interface DialogProps {
isOpen: boolean;
onClose: () => void;
title?: string | React.ReactNode;
children: React.ReactNode;
footer?: React.ReactNode;
header?: React.ReactNode;
body?: React.ReactNode;
size?: 1 | 2 | 3 | 4 | 5;
showCloseIcon?: boolean;
}
isOpen={isDialogOpen}
onClose={() => setDialogOpen(false)}
title="Sample Dialog"
footer={
}
size={2}
showCloseIcon={true}
>
This is the dialog content.
Button Component
A
Button component based on Radix UI's Button system, supporting all Radix UI Button props.Usage
Import and use the
Button component in your app:`typescript
`Badge Component
A
Badge component based on Radix UI's Badge system, supporting all Radix UI Badge props.Usage
`typescript
`Toast Component
A
Toast component based on react-toastifyUsage
`typescript
Props {
content: string,
type: "info" | "success" | "warning" | "error" = "info"
}
``