A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation
A comprehensive React TypeScript UI component library built on top of Base UI, providing 35+ accessible, customizable components with full TypeScript support.
- 🎨 35+ Components: Comprehensive set of UI 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 5.9, Vite 7
``bashnpm
npm install @als-tp/als-react-ts-ui
$3
This library requires the following peer dependencies:
bash
pnpm install react@19.0.0 react-dom@19.0.0 @base-ui/react@1.0.0-rc.0
`Usage
$3
First, import the CSS in your application entry point:
typescript
import '@als-tp/als-react-ts-ui/styles';
`$3
typescript
import { ALSButton, ALSDialog, ALSInput } from '@als-tp/als-react-ts-ui';function App() {
return (
Click me
);
}
`$3
All components are fully typed. TypeScript will provide autocomplete and type checking:
typescript
import type { ALSButtonProps } from '@als-tp/als-react-ts-ui';const buttonProps: ALSButtonProps = {
variant: 'primary',
size: 'lg',
onClick: () => console.log('clicked')
};
`Available Components
$3
- - 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$3
- MainLayout - Main application layout
- ALSSeparator - Visual separator
- ALSScrollArea - Scrollable container
- ALSTabs - Tab navigation
- ALSToolbar - Toolbar container$3
- ALSDialog - Modal dialog
- ALSAlertDialog - Alert/confirmation dialog
- ALSPopover - Popover overlay
- ALSTooltip - Tooltip
- ALSMenu - Dropdown menu
- ALSContextMenu - Context menu
- ALSMenubar - Menu bar
- ALSNavigationMenu - Navigation menu$3
- ALSToast - Toast notifications
- ALSProgress - Progress indicator
- ALSMeter - Meter/gauge$3
- ALSAccordion - Expandable accordion
- ALSCollapsible - Collapsible content
- ALSAvatar - User avatar
- ALSPreviewCard - Preview card$3
- ALSToggle - Toggle button
- ALSToggleGroup - Toggle button groupCustomization
The library uses CSS variables for theming. You can override these in your global CSS:
`css
:root {
/ Typography Scale /
--font-family-base: "F37 Beckett", "Segoe UI", system-ui, -apple-system,
"Helvetica Neue", arial, sans-serif;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-base: 1.5;
--line-height-relaxed: 1.75; / Fluid Typography Scale /
--font-h1: clamp(2.5rem, 4vw + 1rem, 3.5rem); / 40-56px /
--font-h2: clamp(2rem, 3vw + 0.5rem, 2.75rem); / 32-44px /
--font-h3: clamp(1.5rem, 2vw + 0.5rem, 2rem); / 24-32px /
--font-h4: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); / 20-28px /
--font-h5: clamp(1.125rem, 1vw + 0.5rem, 1.5rem); / 18-24px /
--font-h6: clamp(1rem, 0.5vw + 0.5rem, 1.25rem); / 16-20px /
--font-base: 1rem; / 16px /
--font-small: 0.875rem; / 14px /
--font-tiny: 0.75rem; / 12px /
/ Spacing Scale /
--space-xs: 0.25rem; / 4px /
--space-sm: 0.5rem; / 8px /
--space-md: 1rem; / 16px /
--space-lg: 1.5rem; / 24px /
--space-xl: 2rem; / 32px /
--space-2xl: 3rem; / 48px /
--space-3xl: 4rem; / 64px /
/ Border Radius /
--radius-sm: 0.25rem; / 4px /
--radius-md: 0.5rem; / 8px /
--radius-lg: 0.75rem; / 12px /
--radius-xl: 1rem; / 16px /
--radius-full: 9999px;
/ Shadows /
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%),
0 2px 4px -2px rgb(0 0 0 / 10%);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%),
0 4px 6px -4px rgb(0 0 0 / 10%);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%),
0 8px 10px -6px rgb(0 0 0 / 10%);
/ Transitions /
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-duration-fast: 150ms;
--transition-duration-base: 250ms;
--transition-duration-slow: 350ms;
/ Z-Index Scale /
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
/ ALS Color Palette /
--color-als-white: #fff;
--color-als-black: #000;
/ ALS Grays /
--color-als-gray-100: #f2f5f7;
--color-als-gray-500: #d9e1e5;
--color-als-gray-900: #b0b9be;
/ ALS Blues /
/ Dark blue /
--color-als-dark-blue-700: #1f3349;
/ Primary blue /
--color-als-blue-100: #d9ecf9;
--color-als-blue-500: #9fd7ff;
--color-als-blue-900: #45b1ff;
/ Aux blue /
--color-als-aux-blue-100: #c9f1ff;
--color-als-aux-blue-200: #93e2ff;
--color-als-aux-blue-300: #5dd4ff;
--color-als-aux-blue-500: #00b0f0;
--color-als-aux-blue-800: #0084b4;
--color-als-aux-blue-900: #005878;
/ ALS Beiges /
--color-als-beige-100: #ffedcb;
--color-als-beige-500: #ecd8b3;
--color-als-beige-900: #cfb88e;
/ ALS Greens /
--color-als-green-100: #d0eed5;
--color-als-green-500: #a8d3af;
--color-als-green-900: #7ec68a;
/ ALS Reds /
--color-als-red-100: #ffdfdf;
--color-als-red-500: #ff6f6f;
--color-als-red-900: #f00;
/ Semantic Colors /
--color-success: var(--color-als-green-500);
--color-warning: var(--color-als-beige-500);
--color-error: var(--color-als-red-500);
--color-info: var(--color-als-blue-500);
/ Background Colors /
--bg-primary: var(--color-als-gray-100);
/ Text Colors /
--text-primary: var(--color-als-dark-blue-700);
--text-secondary: var(--color-als-gray-900); / o el color que prefieras /
/ Border Colors /
--border-primary: var(--color-als-gray-500);
--border-secondary: var(--color-als-gray-100);
--border-focus: var(--color-als-blue-500);
/ Menu Size /
--sidenav-width-expanded: 16rem; / 256px /
--sidenav-width-collapsed: 4rem; / 64px /
/ Header Size /
--header-height: 4rem; / 64px /
}
`Development
$3
bash
pnpm run build:lib
`$3
bash
pnpm storybook
`$3
bash
pnpm test
``MIT © ALS TP