AristoByteUI

AristoByteUI is a performance-first, fully typed React component library designed for enterprise-grade frontends, internal tools, and modular web applications. Every package is optimized for TypeScript, SCSS modularity, and seamless integration into modern monorepo architectures powered by TurboRepo.

---

📦 Packages Overview

AristoByteUI consists of a curated set of components and utilities:

1. @aristobyte-ui/button

• Exports: Button, ButtonGroup
• Features: Ripple-enabled interactive feedback, multiple variants, appearances, sizes, border-radius options, icons, loading states, and fully composable button groups.
• Use case: Buttons and grouped controls across applications with consistent design tokens.

2. @aristobyte-ui/dropdown

• Exports: Dropdown, DropdownOptions
• Features: Fully interactive dropdowns leveraging Button for triggers, supports multiple variants, sizes, radius, and customizable option lists.
• Use case: Select menus, action lists, or contextual menus with consistent styling.

3. @aristobyte-ui/anchor

• Exports: Anchor
• Features: Variants with ripple-enabled interactions, lightweight CSS, fully typed props, seamless design token integration.
• Use case: Links, call-to-actions, and navigational elements with interactive feedback.

4. @aristobyte-ui/radio

• Exports: Radio, RadioGroup
• Features: Modular, accessible radio buttons supporting multiple variants, sizes, alignments, and label highlights.
• Use case: Forms, surveys, and selection interfaces.

5. @aristobyte-ui/switch

• Exports: Switch
• Features: Toggle components with accessible states, customizable colors, and smooth transition animations.
• Use case: Form toggles, feature flags, and interactive on/off controls.

6. @aristobyte-ui/spinner

• Exports: Spinner
• Features: Fully typed spinners with multiple sizes, types, and variants for loading states.
• Use case: Indicators for asynchronous operations or content loading.

7. @aristobyte-ui/message-box

• Exports: MessageBox
• Features: Modular message boxes supporting variants, types, icons, and border-radius options.
• Use case: Alerts, notifications, and inline feedback components.

8. @aristobyte-ui/jest-config

• Exports: jest.config.js
• Features: Preconfigured Jest environment optimized for TypeScript monorepo projects.
• Use case: Unit testing setup for all internal packages.

9. @aristobyte-ui/eslint-config

• Exports: ESLint configuration presets
• Features: Strict linting rules for TypeScript and React, consistent code style.
• Use case: Code quality enforcement across all monorepo packages.

10. @aristobyte-ui/typescript-config

• Exports: TypeScript configuration presets
• Features: Optimized tsconfig.json setups for monorepo modular development.
• Use case: Ensures type safety and consistent compiler behavior across packages.

---

🔧 Installation

Globally:

# Yarn
yarn add @aristobyte-ui

# NPM
npm install @aristobyte-ui

# PNPM
pnpm add @aristobyte-ui

Individual Package:

# Yarn
yarn add @aristobyte-ui/$PACKAGE

# NPM
npm install @aristobyte-ui/$PACKAGE

# PNPM
pnpm add @aristobyte-ui/$PACKAGE

Dev tools (eslint-config, jest-config, typescript-config) can be installed individually if needed.

📊 Why This Matters

• Performance-first: Lightweight CSS ensures fast rendering and smooth transitions.
• Fully typed: TypeScript-first API ensures predictable usage and IDE autocomplete.
• AristoByteUI ready: Seamlessly integrates with design tokens and SCSS modules.
• Flexible: Supports multiple variants, appearances, sizes, radius options, icons, ripple-enabled feedback, and composable groups.

🏆 Philosophy

• Modular architecture: Components are fully composable for scalable UI design.
• Declarative styling: SCSS modules keep styles maintainable and scoped.
• Strict typing & runtime flexibility: Props fully typed while allowing runtime overrides.
• Developer experience optimized: Easy to use with predictable behavior and minimal boilerplate.

📜 License

MIT © AristoByte

🛡 Shields Showcase