npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

hdx-ui-components

v1.0.2

Published

Component library for the Hydrolix products

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

msandoval-hdxmsandoval-hdx

Keywords

reactuicomponentshydrolixradix-uinext.jsdesign-systemtypescript

Readme

hdx-ui-components

Shared UI component library for the Hydrolix SaaS console and admin app. Includes reusable React components, hooks, utilities, i18n support, and theme tokens — built on Radix UI Themes and Next.js.

Installation

npm install hdx-ui-components

Peer Dependencies

Install the required peer dependencies in your project if not already present:

npm install react react-dom next @radix-ui/themes

Usage

1. Import the styles

Import the stylesheet once in your root layout:

// app/layout.tsx
import 'hdx-ui-components/dist/hdx-ui-components.css';

2. Wrap your app with <Theme>

Components rely on Radix UI's Theme context. Add light-theme or dark-theme to <html> for FOUC prevention:

// app/layout.tsx
import { Theme } from '@radix-ui/themes';
import 'hdx-ui-components/dist/hdx-ui-components.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en" className="light-theme">
      <body>
        <Theme>{children}</Theme>
      </body>
    </html>
  );
}

light-theme / dark-theme is required. The stylesheet sets visibility: hidden on <html> until one of these classes is present (FOUC prevention). Without it the page will appear blank.

3. Import components

import { Button, Badge, Dialog, Spinner, DialogVariant } from 'hdx-ui-components';

Components

Common

| Component | Description | |---|---| | Accordion / AccordionList | Collapsible content sections | | AlertDialog | Confirmation dialogs requiring user action | | Avatar | User avatar with fallback initials | | Badge | Status/label badges | | BarChart / LineChart / DonutChart | ECharts-based data visualisations | | BrandLogo / BrandedSpinner | Hydrolix-branded logo and loading spinner | | Button | Primary action button | | Calendar | Date picker calendar | | Callout | Inline alert/notification banners | | Chip | Tag-style chips | | ConfirmationDialog / Dialog | Modal dialogs | | ContextMenu / DropdownMenu | Right-click and dropdown menus | | DataList / DataSourceCard | Data display components | | EmptyState | Empty state placeholder | | ExternalLink | Styled external anchor | | Footer / Header | Page layout primitives | | HoverCard | Hover-triggered card popover | | List / TableList / TableListBodyRow | List and table components | | LoadingOverlay / Spinner / TableSkeleton | Loading states | | MainPanel | Main content panel wrapper | | OnboardingHeader | Onboarding flow header | | Pagination | Page navigation | | Popover | Floating content popover | | ProgressBar | Linear progress indicator | | Separator | Visual divider | | Stepper | Multi-step progress indicator | | TabList | Tabbed navigation | | ToastAlert | Toast notification | | Tooltip | Hover tooltip | | Transition | Animated transitions | | Unauthorized | 403 / unauthorised state |

Forms

| Component | Description | |---|---| | Checkbox | Controlled checkbox (react-hook-form) | | RadioGroup / CardFieldView | Radio group variants | | Switch | Toggle switch | | Textarea | Multiline text input | | InputField | Text / email / password input | | SearchInput | Search input with clear button | | SelectField | Dropdown select | | TreeField | Checkbox tree selector | | FormHeader | Form section header | | LoginForm | Pre-built SSO login form |

Sidebar

| Component | Description | |---|---| | Sidebar | Collapsible navigation sidebar | | SidebarMenuItem | Individual sidebar menu item |

Context & Providers

| Export | Description | |---|---| | AuthProvider / useAuth | Amplify-based authentication | | ApiProvider / useApiContext | API client context | | ProjectProvider / useProjectContext | Project selection context | | SidebarProvider / useSidebar | Sidebar state | | ThemeContextWrapper | Radix theme wrapper | | BrandThemeProvider / useThemeSwitch | Light/dark theme switching | | ToastContextProvider / useToasts | Toast notifications | | IntlProviderWrapper | react-intl provider |

Hooks

useAppContext, useCustomer, useProjects, useUserPreferences, useEndUserClient

HOCs

withAuth, withAuthRedirect, withGuest

Utilities

DateUtils, StringUtils, useTranslation

Local Development

Prerequisites

  • Node.js >= 20.0.0
  • npm >= 10.0.0

Install dependencies

npm install

Run Storybook

npm run storybook

Build the library

npm run build:lib

Run tests

npm test

Project Structure

app/
  components/   # React components (common, forms, sidebar, context, hooks, hocs)
  api/          # API utilities
  types/        # Shared TypeScript types and enums
config/         # Configuration (Amplify SSO)
i18n/           # Internationalisation strings
theme/          # Theme tokens
utils/          # Utility functions (DateUtils, StringUtils)

Peer Dependencies

| Package | Version | |---|---| | react | ^18.2.0 | | react-dom | ^18.2.0 | | next | ^15.3.3 | | @radix-ui/themes | ^3.0.0 |