SWS Astro Site UI

Shared Astro UI components and utilities library for use across different SweetSoft sites.

Installation

Using npm

Install the published package from npm:

npm install sws-astro-site-ui

Or with pnpm:

pnpm add sws-astro-site-ui

Using Git Dependency

Add this library to your Astro project via git:

npm install git+https://github.com/iash44/sws-astro.git
# or with a specific branch/tag
npm install git+https://github.com/iash44/sws-astro.git#main

Or add directly to your package.json:

{
  "dependencies": {
    "sws-astro-site-ui": "git+https://github.com/iash44/sws-astro.git"
  }
}

Using Local Path (for development)

npm install /path/to/sws-astro

Or in package.json:

{
  "dependencies": {
    "sws-astro-site-ui": "file:../sws-astro"
  }
}

Usage

Importing Components

---
import Logo from 'sws-astro-site-ui/components/Logo.astro';
import MegaMenu from 'sws-astro-site-ui/components/MegaMenu.astro';
import Steps from 'sws-astro-site-ui/components/Steps.astro';
---

<Logo />
<MegaMenu />
<Steps />

Importing Types

import type { YourType } from 'sws-astro-site-ui';
// or specific type imports
import type { MenuType } from 'sws-astro-site-ui/types/menu.ts';

Importing Utilities

import { resend } from 'sws-astro-site-ui/utils/resend.ts';

Using SVG Icons

---
import IcDev from 'sws-astro-site-ui/svg/ic_dev.svg';
---

<img src={IcDev.src} alt="Development" />

Development Workflow

For Library Consumers

1. Install the library from npm
2. Import components/utilities as needed
3. Update to latest version: npm update sws-astro-site-ui

For Library Developers

1. Make changes to this repository
2. Commit and push changes
3. Consumer projects can update by running npm update sws-astro-site-ui

Using npm link for Local Development

If you're actively developing the library while using it:

# In the library directory
cd /path/to/sws-astro
npm link

# In your consuming project
cd /path/to/your-project
npm link sws-astro-site-ui

To unlink:

# In your consuming project
npm unlink sws-astro-site-ui

# In the library directory
npm unlink

Structure

src/
├── components/    # Astro components
├── icons/         # Icon components
├── svg/           # SVG assets
├── types/         # TypeScript type definitions
├── utils/         # Utility functions
└── index.ts       # Main entry point

Tailwind CSS v4 Integration

This library uses Tailwind CSS v4 with CSS-based configuration. You have two integration options:

Option 1: Import Library Styles (Recommended)

Import the library's CSS in your main layout to get the theme and utilities:

---
import 'sws-astro-site-ui/styles';
---

Then configure your project's CSS to include the library's source files:

/* your-project/src/styles/global.css */
@import "tailwindcss";

/* Scan library components for Tailwind classes */
@source "../../node_modules/sws-astro-site-ui/src/**/*.astro";
@source "../../node_modules/sws-astro-site-ui/src/**/*.{js,jsx,ts,tsx}";

/* Your project sources */
@source "../**/*.astro";
@source "../**/*.{js,jsx,ts,tsx}";

/* Your custom theme */
@theme {
  /* Override or extend library theme here */
}

Option 2: Pre-built CSS (Simpler, Static)

Use the pre-built CSS file (already includes all library styles):

---
import 'sws-astro-site-ui/styles.css';
---

Note: This approach uses the pre-built CSS from the library. To update it:

cd node_modules/sws-astro-site-ui
npm run build:css

Custom Theme

The library provides:

Custom Colors:

• primary-50 through primary-900 (CSS variables: --color-primary-*)

Custom Utilities:

• .container-custom - Responsive container with custom padding

You can override these in your project's @theme block:

@theme {
  --color-primary-500: #your-color;
}

Requirements

• Astro ^5.0.0
• Tailwind CSS ^4.0.0 (via @tailwindcss/vite or @tailwindcss/cli)

License

Proprietary - SweetSoft internal use only

Publishing

Before publishing a new version:

pnpm pack:check

Publish to npm:

npm publish

If this package should stay private on npm, publish it to a private npm organization or switch to a scoped package and private registry configuration before releasing.