@slm-solusi-digital/telescope-ui

A React UI component library built on HeroUI v2 — by SLM Solusi Digital.

Installation

npm install @slm-solusi-digital/telescope-ui @heroui/react framer-motion

Peer Dependencies

This library requires the following peer dependencies:

| Package | Version | |---|---| | react | ^18.0.0 \|\| ^19.0.0 | | react-dom | ^18.0.0 \|\| ^19.0.0 | | @heroui/react | ^2.8.0 | | framer-motion | >=10.0.0 |

Setup

1. Configure Tailwind CSS v4

Create a plugin file:

// src/heroui-plugin.ts
import { heroui } from "@heroui/react";
export default heroui();

Add to your CSS entry:

/* src/index.css */
@import "tailwindcss";
@plugin "./heroui-plugin.ts";
@source "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";

2. Wrap with HeroUIProvider

import { HeroUIProvider } from "@slm-solusi-digital/telescope-ui";

function App() {
  return (
    <HeroUIProvider>
      <YourApp />
    </HeroUIProvider>
  );
}

Usage

import { Button, Input, Modal } from "@slm-solusi-digital/telescope-ui";

function Example() {
  return (
    <div>
      <Button color="primary">Click me</Button>
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}

Components

Button

Wraps HeroUI Button with sensible defaults.

<Button color="primary" variant="solid">Submit</Button>
<Button color="danger" variant="flat">Cancel</Button>
<Button isLoading>Loading...</Button>

Input

Wraps HeroUI Input with bordered variant as default.

<Input label="Username" placeholder="Enter username" />
<Input label="Password" type="password" />

Modal

Wraps HeroUI Modal with convenient title and footer props.

<Modal isOpen={isOpen} onOpenChange={setOpen} title="Confirm Action">
  <p>Are you sure you want to proceed?</p>
</Modal>

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build the library
npm run build

Publishing

# Build first
npm run build

# Publish (scoped public package)
npm publish --access public

License

MIT