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

arxatec-ui

v0.1.41

Published

React component library for building Arxatec product UIs—built on established ecosystem libraries for a consistent, efficient workflow. More at https://arxatec.net.

Downloads

2,884

Vulnerabilities

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

Links

Git

Maintainers

arxatecarxatec

Keywords

reactreact-componentsuidesign-systemcomponent-librarytailwindcsstailwind-v4shadcnshadcn-uiradixradix-uiaccessibletypescriptesmlucide-reactcvaarxatec

Readme

arxatec-ui

React component kit for Arxatec products: primitives built on Radix UI, styling with Tailwind CSS v4, animations, and ready-made pieces for forms, data, maps, and more.

Requirements

  • React 18 or 19 (react and react-dom are peer dependencies).
  • A bundler that supports ESM (recommended: Vite).
  • Tailwind CSS v4 and the @tailwindcss/vite plugin (or an equivalent pipeline that processes the library stylesheet).

Installation

npm install arxatec-ui

Make sure React is installed in your app:

npm install react react-dom

Global styles

The package exposes a single stylesheet (theme tokens, Tailwind, shadcn-style utilities):

// e.g. in main.tsx or App.tsx
import "arxatec-ui/styles.css";

That CSS uses Tailwind v4 features (@import "tailwindcss", @theme, etc.). Your build must process it with Tailwind (serving the raw file without compiling is not enough).

The same stylesheet also appends CSS extracted from the library build (TipTap / RichTextEditor, hashed classes from CSS modules such as DescriptionMarkdownEditor, etc.). You do not import those files separately; arxatec-ui/styles.css is the one entry for consumers.

Vite + Tailwind v4

  1. Install Tailwind and the official Vite plugin:

    npm install tailwindcss @tailwindcss/vite

  2. In vite.config.ts:

    import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

  3. If production builds drop classes that only appear inside node_modules/arxatec-ui, point Tailwind at the library’s compiled JS, for example in your entry CSS (Tailwind v4):

    @source "../../node_modules/arxatec-ui/dist/**/*.js";

    Adjust the path relative to your CSS file.

Dark mode

The theme expects a .dark ancestor (e.g. className="dark" on <html>).

Basic usage

import { Button, Card, CardHeader, CardTitle, CardContent } from "arxatec-ui";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Action</Button>
      </CardContent>
    </Card>
  );
}

Patterns follow shadcn-style APIs (compound components with named exports).

Package exports

Components (overview)

  • Forms & text: Button, Input, Textarea, Label, Checkbox, RadioGroup, Select, Slider, Toggle, InputOTP, FileDropZone, LocationInput, DateRangePicker, Calendar, AsyncSelect, DescriptionMarkdownEditor, RichTextEditor, and more.
  • Surfaces & navigation: Card, Dialog, Sheet, Drawer, Popover, Tooltip, DropdownMenu, ContextMenu, Tabs, Breadcrumb, Pagination, PaginationController, Sidebar, Command, Collapsible, and more.
  • Data & feedback: Table, Badge, Skeleton, Progress, StatusMessage, AsyncBoundary, AsyncCommandList, Chart, Carousel, and more.
  • Maps: MapView, MapPicker.
  • Extras: Toaster (Sonner), IconPicker, EmojiPicker, brand icons, animated icons, etc.

The full list matches the export * entries in src/index.ts.

Hooks

  • useDebounce

Types

  • PaginationState: { page, limit, total, total_pages } (useful with PaginationController).

Utilities

  • cn: class merging (clsx + tailwind-merge).
  • Image crop helpers for ImageCropDialog.
  • classNameControl: optional Storybook control metadata.

Toasts (Sonner)

Render Toaster once near the app root and call toast(...) per the sonner docs.

Maps (Leaflet)

import "leaflet/dist/leaflet.css";

Developing this repo

| Command | Description | | ------------------- | ------------------------------ | | npm run dev | Vite playground (style guide). | | npm run storybook | Storybook on port 6006. | | npm run build:lib | Build dist/ for npm. | | npm run build | Playground production build. | | npm run lint | ESLint. |

Publishing to npm requires 2FA; use npm publish --otp=... when prompted.

License

MIT. See LICENSE.