orb-style
v0.0.2
Published
Orb design system
Maintainers
pgreen00Readme
Orb Design System
A modern, framework-agnostic web component library built with Stencil. Orb provides a comprehensive set of reusable UI components that work seamlessly across all major frameworks and vanilla JavaScript applications.
🚀 Features
- Framework Agnostic: Built with Web Components, works with React, Angular, Vue, or no framework at all
- TypeScript Support: Full TypeScript definitions for all components
- Accessible: WCAG compliant components with proper ARIA attributes
- Customizable: Extensive theming support with CSS custom properties
- Lightweight: Tree-shakeable components for optimal bundle sizes
- Modern: Built with modern web standards and best practices
🛠️ Installation
Vanilla JavaScript/HTML
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://unpkg.com/orb-style@latest/dist/loader.js"></script>
<link rel="stylesheet" href="https://unpkg.com/orb-style@latest/styles/core.css"/>
</head>
<body>
<orb-button>Click me!</orb-button>
</body>
</html>Angular
npm install orb-style// app.config.ts
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
//start the auto loader
import 'orb-style/loader'
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
provideRouter(routes)
]
};//app.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-root',
imports: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<orb-button color="primary" (click)="handleClick()">Click me!</orb-button>
`,
})
export class App {
handleClick() {
console.log('clicked')
}
}React
//Can optionally import individual components instead of using loader
import 'orb-style/orb-button';
function App() {
return (
<orb-button color="primary" onClick={() => console.log('clicked')}>
Click me!
</orb-button>
);
}📚 Documentation
Visit the documentation site for:
- Component API reference
- Usage examples
- Theming guide
- Tutorials
- Installation instructions
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- Built with Stencil
- Popovers and tooltips powered by Floating UI
- Date and calendar components utilize date-fns