wehub-resource-sync
67 lines
1.4 KiB
Markdown
67 lines
1.4 KiB
Markdown
# @insforge/ui
|
|
|
|
Shared React UI components, design tokens, and Tailwind preset used across InsForge apps.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @insforge/ui
|
|
```
|
|
|
|
Required peer dependencies:
|
|
|
|
```bash
|
|
npm install react react-dom tailwindcss
|
|
```
|
|
|
|
## Setup
|
|
|
|
1. Import styles once in your app entry CSS:
|
|
|
|
```css
|
|
@import '@insforge/ui/styles.css';
|
|
```
|
|
|
|
2. Add the InsForge Tailwind preset:
|
|
|
|
```js
|
|
import insforgeTailwindPreset from '@insforge/ui/tailwind-preset';
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
presets: [insforgeTailwindPreset],
|
|
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
};
|
|
```
|
|
|
|
3. Use components:
|
|
|
|
```tsx
|
|
import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input } from '@insforge/ui';
|
|
|
|
export function Example() {
|
|
return (
|
|
<Dialog>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Update profile</DialogTitle>
|
|
</DialogHeader>
|
|
<Input placeholder="Name" />
|
|
<Button className="mt-3">Save</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Exports
|
|
|
|
- Components: `Button`, `Badge`, `Checkbox`, `CopyButton`, `Dialog`, `DropdownMenu`, `Input`, `InputField`, `MenuDialog`, `Pagination`, `SearchInput`, `Select`, `Switch`, `Tabs`, `Tooltip`, `CodeBlock`
|
|
- Utilities: `cn`
|
|
- Styling entrypoints: `@insforge/ui/styles.css`, `@insforge/ui/tailwind-preset`
|
|
|
|
## Theming
|
|
|
|
- Token variables are provided in `styles.css`.
|
|
- Dark mode is enabled by adding the `dark` class on a parent element.
|