@cystackapp/ui

Reusable React UI components used across CyStack's platform dashboards. Built with React 18, TypeScript and Tailwind CSS v4.

Installation

yarn add @cystackapp/ui
# or
npm install @cystackapp/ui

Peer dependencies

Install these in the host app if not already present:

yarn add react react-dom react-router-dom react-i18next i18next @untitled-ui/icons-react

| Package | Version | | -------------------------- | ------------ | | react | ^18.0.0 | | react-dom | ^18.0.0 | | react-router-dom | ^6.0.0 | | react-i18next | ^15.0.0 | | i18next | 23.7.7 | | @untitled-ui/icons-react | ^0.1.4 |

Setup

The package ships components and a Tailwind theme stylesheet. The host app must use Tailwind CSS v4 and import the theme once in its root stylesheet:

/* src/app/index.css (or your global CSS) */
@import "tailwindcss";
@import "@cystackapp/ui/theme.css";

theme.css registers CSS variables (color tokens, spacing, etc.) and a @source directive so Tailwind can scan the package's classes.

Usage

import { Badge, Tooltip, Popover, cn } from "@cystackapp/ui";

export const Example = () => (
  <Tooltip content="Hello">
    <Badge color="brand" size="md">
      New
    </Badge>
  </Tooltip>
);

Available exports

Components

• Badge, BadgeTag, BadgeMore
• Combobox
• ErrorState
• PageTitle
• Popover
• Switch
• Tooltip

Hooks

• useResizeObserver
• useScrollListener
• useWindowResizeListener
• useMutationObserver
• useTransitionEndListener
• useAnimationFrame
• useElementShift
• usePopoverCoord
• useValidatedCombobox

Utilities

• cn — clsx + tailwind-merge wrapper for conditional class names
• getBadgeAutoColor, TAG_ICON_COLOR_CLASSES

Types

• BadgeProps, BadgeColor, BadgeSize, BadgeType
• ComboboxSuggestionItem
• PopoverPosition

The authoritative list lives in src/index.ts — anything not exported there is internal and may change without notice.

Versioning

Semver via Changesets. Release notes in CHANGELOG.md.

License

MIT