seekho-ui

A React component library built with TypeScript and Tailwind CSS — pre-built CSS included, works with any Tailwind version or no Tailwind at all.

Components

| Export | Description | | ------ | ----------- | | <Modal> | Confirmation/dialog modal with hotkey support (Enter to confirm, Esc to close), loading state, and warning variant | | <AutoComplete> | Fully custom autocomplete with keyboard navigation, filtering, loading state, and custom render support | | <SearchBar> | Search input with clear button and URL param support | | <ReadMore> | Truncated text with expand/collapse and optional copy | | <CopyId> | Pill button that copies an ID to clipboard | | <ButtonLoader> | Animated spinner for button loading states | | <CustomAnchor> | Anchor tag with new tab support | | useLocalStorage | useState backed by localStorage | | cn() | Utility to merge Tailwind class names | | handleCopyTextToClipboard() | Cross-browser clipboard copy (Chrome + Safari) |

Installation

npm install @seekho/ui

Peer dependencies

npm install react-hotkeys-hook

Import styles

Add once to your app's entry file:

import "@seekho/ui/styles.css";

Theming

Override the primary color via a CSS variable:

:root {
  --color-primary: #534f8f; /* defaults to #534f8f if not set */
}

Usage

import { Modal, AutoComplete, SearchBar } from "@seekho/ui";

Development

npm install
npm run storybook     # component playground at http://localhost:6006
npm run build         # build dist/
npm run lint          # type check

Contributing

src/components/
└── MyComponent/
    ├── MyComponent.tsx
    ├── MyComponent.stories.tsx
    └── index.ts

Add export * from "./MyComponent" to src/components/index.ts.

Project structure

seekho-ui/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   └── index.ts
├── .storybook/
├── tailwind.config.js
└── tsup.config.ts