@aristobyte-ui/anchor

@aristobyte-ui/anchor

A fully-typed, ripple-enabled Anchor component for AristoByteUI with multiple variants and seamless integration with SCSS modules and design tokens.

📦 Installation

# Install via Yarn
yarn add -D @aristobyte-ui/anchor

# Or via npm
npm install -D @aristobyte-ui/anchor

# Or via pnpm
pnpm add -D @aristobyte-ui/anchor

🛠 Usage

import { Anchor } from "@aristobyte-ui/anchor";

<Anchor href="https://aristobyte.com" variant="primary">
  Visit AristoByte
</Anchor>;

📂 Presets Available Variants: default | primary | secondary

Ripple effect automatically applied on click

🔧 Example in a Package

<Anchor href="/docs" variant="secondary">
  Documentation
</Anchor>

📊 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 and ripple-enabled interactive feedback.

🏆 Philosophy

• Modular architecture: Anchor component is fully composable.
• 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