cristrasp_astro-ui
v0.0.4
Published
A modern, framework-agnostic web component library built with Stencil.js
Readme
Astro UI
A modern, framework-agnostic web component library built with Stencil.js. These components work seamlessly across any frontend framework or vanilla JavaScript application.
Installation
npm install cristrasp_astro-uiUsage
Lazy Loading (Recommended)
Load components automatically as they're used:
<script type="module" src="https://unpkg.com/cristrasp_astro-ui/dist/astro-ui/astro-ui.esm.js"></script>
<astro-button variant="primary" size="medium">Click me</astro-button>Standalone Components
Import individual components directly:
import 'cristrasp_astro-ui/dist/components/astro-button';
// Use in your HTML
<astro-button variant="secondary" disabled>Disabled Button</astro-button>React Integration
import { AstroButton } from 'cristrasp_astro-ui/react';
function App() {
return (
<AstroButton
variant="primary"
size="large"
onClick={() => console.log('Button clicked!')}
>
Submit
</AstroButton>
);
}Angular Integration
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'cristrasp_astro-ui/dist/components/astro-button';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}<!-- app.component.html -->
<astro-button variant="primary" (click)="handleClick()">
Save Changes
</astro-button>Vue Integration
<template>
<astro-button
variant="secondary"
size="small"
@click="handleClick"
>
Cancel
</astro-button>
</template>
<script>
import 'cristrasp_astro-ui/dist/components/astro-button';
export default {
methods: {
handleClick() {
console.log('Button clicked!');
}
}
}
</script>Vanilla JavaScript
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://unpkg.com/cristrasp_astro-ui/dist/astro-ui/astro-ui.esm.js"></script>
</head>
<body>
<astro-button id="myButton" variant="primary">
Click me
</astro-button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});
</script>
</body>
</html>Component Properties
astro-button
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'outline' | 'primary' | Button style variant |
| size | 'small' \| 'medium' \| 'large' | 'medium' | Button size |
| disabled | boolean | false | Whether the button is disabled |
| type | 'button' \| 'submit' \| 'reset' | 'button' | Button type attribute |
TypeScript Support
The library includes TypeScript definitions for all components:
import { AstroButton } from 'cristrasp_astro-ui/react';
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline';
size?: 'small' | 'medium' | 'large';
disabled?: boolean;
}
const Example: React.FC = () => {
return (
<AstroButton
variant="primary"
size="large"
onClick={() => console.log('Clicked!')}
>
Submit Form
</AstroButton>
);
};License
MIT# Astro UI
A modern, framework-agnostic web component library built with Stencil.js. These components work seamlessly across any frontend framework or vanilla JavaScript application.
Installation
npm install cristrasp_astro-uiUsage
Lazy Loading (Recommended)
Load components automatically as they're used:
<script type="module" src="https://unpkg.com/cristrasp_astro-ui/dist/astro-ui/astro-ui.esm.js"></script>
<astro-button variant="primary" size="medium">Click me</astro-button>Standalone Components
Import individual components directly:
import 'cristrasp_astro-ui/dist/components/astro-button';
// Use in your HTML
<astro-button variant="secondary" disabled>Disabled Button</astro-button>React Integration
import { AstroButton } from 'cristrasp_astro-ui/react';
function App() {
return (
<AstroButton
variant="primary"
size="large"
onClick={() => console.log('Button clicked!')}
>
Submit
</AstroButton>
);
}Angular Integration
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'cristrasp_astro-ui/dist/components/astro-button';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}<!-- app.component.html -->
<astro-button variant="primary" (click)="handleClick()">
Save Changes
</astro-button>Vue Integration
<template>
<astro-button
variant="secondary"
size="small"
@click="handleClick"
>
Cancel
</astro-button>
</template>
<script>
import 'cristrasp_astro-ui/dist/components/astro-button';
export default {
methods: {
handleClick() {
console.log('Button clicked!');
}
}
}
</script>Vanilla JavaScript
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://unpkg.com/cristrasp_astro-ui/dist/astro-ui/astro-ui.esm.js"></script>
</head>
<body>
<astro-button id="myButton" variant="primary">
Click me
</astro-button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});
</script>
</body>
</html>Component Properties
astro-button
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'outline' | 'primary' | Button style variant |
| size | 'small' \| 'medium' \| 'large' | 'medium' | Button size |
| disabled | boolean | false | Whether the button is disabled |
| type | 'button' \| 'submit' \| 'reset' | 'button' | Button type attribute |
TypeScript Support
The library includes TypeScript definitions for all components:
import { AstroButton } from 'cristrasp_astro-ui/react';
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline';
size?: 'small' | 'medium' | 'large';
disabled?: boolean;
}
const Example: React.FC = () => {
return (
<AstroButton
variant="primary"
size="large"
onClick={() => console.log('Clicked!')}
>
Submit Form
</AstroButton>
);
};License
MIT