@als-tp/als-react-ts-ui

A comprehensive React TypeScript UI component library built on top of Base UI, providing 50+ accessible, customizable components with full TypeScript support, including AI and layout primitives.

Features

• 🎨 50+ Components: UI, AI, Strapi, and layout components
• 💪 TypeScript First: Full type safety and IntelliSense support
• ♿ Accessible: Built on Base UI with ARIA compliance
• 🎭 Customizable: CSS Modules with CSS variables for theming
• 📦 Tree-shakeable: Import only what you need
• 🔧 Modern Stack: React 19, TypeScript 6, Vite 8

Installation

# npm
npm install @als-tp/als-react-ts-ui

# pnpm
pnpm add @als-tp/als-react-ts-ui

# yarn
yarn add @als-tp/als-react-ts-ui

Peer Dependencies

This library requires the following peer dependencies:

pnpm install react react-dom @base-ui/react@^1.4.0

Usage

Import Styles

First, import the CSS tokens and the style domains you need in your application entry point:

import '@als-tp/als-react-ts-ui/styles/tokens';
import '@als-tp/als-react-ts-ui/styles/components';

If you need the full stylesheet instead of domain splitting:

import '@als-tp/als-react-ts-ui/styles';

Import Components

import { ALSButton, ALSDialog, ALSInput } from '@als-tp/als-react-ts-ui';

function App() {
  return (
    <div>
      <ALSButton variant="primary" size="md">
        Click me
      </ALSButton>
      
      <ALSInput placeholder="Enter text..." />
    </div>
  );
}

TypeScript Support

All components are fully typed. TypeScript will provide autocomplete and type checking:

import type { ALSButtonProps } from '@als-tp/als-react-ts-ui';

const buttonProps: ALSButtonProps = {
  variant: 'primary',
  size: 'lg',
  onClick: () => console.log('clicked')
};

Available Components

Form Components

• ALSButton - Versatile button with variants and sizes
• ALSInput - Text input field
• ALSCheckbox - Checkbox with label
• ALSCheckboxGroup - Group of checkboxes
• ALSRadio - Radio button
• ALSSwitch - Toggle switch
• ALSSelect - Dropdown select
• ALSCombobox - Autocomplete combobox
• ALSAutocomplete - Autocomplete input
• ALSNumberField - Numeric input
• ALSSlider - Range slider
• ALSField - Form field wrapper
• ALSFieldset - Form fieldset
• ALSForm - Form container

Layout Components

• MainLayout - Main application layout
• ALSSeparator - Visual separator
• ALSScrollArea - Scrollable container
• ALSTabs - Tab navigation
• ALSToolbar - Toolbar container

Overlay Components

• ALSDialog - Modal dialog
• ALSAlertDialog - Alert/confirmation dialog
• ALSPopover - Popover overlay
• ALSTooltip - Tooltip
• ALSMenu - Dropdown menu
• ALSContextMenu - Context menu
• ALSMenubar - Menu bar
• ALSNavigationMenu - Navigation menu

Feedback Components

• ALSToast - Toast notifications
• ALSProgress - Progress indicator
• ALSMeter - Meter/gauge

Content Components

• ALSAccordion - Expandable accordion
• ALSCollapsible - Collapsible content
• ALSAvatar - User avatar
• ALSPreviewCard - Preview card

Interactive Components

• ALSToggle - Toggle button
• ALSToggleGroup - Toggle button group

Customization

The library uses --als-* CSS variables for theming.

Import the library tokens first, then the style domains you use, and finally your theme overrides:

import '@als-tp/als-react-ts-ui/styles/tokens';
import '@als-tp/als-react-ts-ui/styles/components';
import './als-theme.css';

Available style entrypoints:

• @als-tp/als-react-ts-ui/styles for the full CSS bundle
• @als-tp/als-react-ts-ui/styles/tokens for public CSS variables and font declarations only
• @als-tp/als-react-ts-ui/styles/components for core components and Strapi styles
• @als-tp/als-react-ts-ui/styles/ai for AI component styles
• @als-tp/als-react-ts-ui/styles/layout for layout styles

For this repository's local demo and Storybook shell, the global demo bootstrap lives in src/styles/init.css. Package consumers should import the package style entrypoints above instead of referencing that file directly.

Global Theme Override

Use :root if you want the whole application to use your theme:

:root {
    --als-color-brand: #d92d20;
    --als-color-brand-strong: #b42318;
    --als-color-brand-subtle: #fee4e2;

    --als-color-accent: #f97316;
    --als-color-accent-strong: #c2410c;

    --als-color-border-focus: var(--als-color-brand);

    --als-color-text-primary: #1f2937;
    --als-color-text-secondary: #667085;

    --als-color-surface-page: #f8fafc;
    --als-color-surface-default: #ffffff;
    --als-color-surface-subtle: #f1f5f9;

    --als-font-family-base: "Inter", system-ui, sans-serif;
    --als-font-size-base: 1rem;
    --als-radius-md: 0.75rem;
}

Scoped Theme Override

Use a wrapper class if you only want part of the app to use a custom theme:

.als-theme-acme {
    --als-color-brand: #0f766e;
    --als-color-brand-strong: #115e59;
    --als-color-brand-subtle: #ccfbf1;
}

<div className="als-theme-acme">
  <ALSButton variant="primary">Save</ALSButton>
</div>

Recommended Tokens To Override First

• Brand: --als-color-brand, --als-color-brand-strong, --als-color-brand-subtle
• Text: --als-color-text-primary, --als-color-text-secondary
• Surfaces: --als-color-surface-page, --als-color-surface-default, --als-color-surface-subtle
• Borders and focus: --als-color-border-default, --als-color-border-subtle, --als-color-border-focus
• Typography: --als-font-family-base, --als-font-size-base
• Shape and spacing: --als-radius-*, --als-space-*

Notes

• For new integrations, prefer the --als-* tokens instead of the old legacy variable names.
• Most components use semantic tokens such as --als-color-brand instead of raw palette values, so changing these top-level tokens is usually enough to rebrand the library.
• If you need the full list of available tokens, see src/styles/tokens.css.

Development

Building the Library

pnpm run build:lib

Running Storybook

pnpm storybook

Running Tests

pnpm test

License

MIT © ALS TP

Links

• Base UI Documentation