https://github.com/lordsarcastic/coss-ui-angular
Accessible Angular components inspired by the public COSS UI catalogue at coss.com/ui/docs.
https://github.com/lordsarcastic/coss-ui-angular
angular angular-coss coss-ui
Last synced: 7 days ago
JSON representation
Accessible Angular components inspired by the public COSS UI catalogue at coss.com/ui/docs.
- Host: GitHub
- URL: https://github.com/lordsarcastic/coss-ui-angular
- Owner: lordsarcastic
- Created: 2026-05-26T21:29:44.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-27T22:51:58.000Z (2 months ago)
- Last Synced: 2026-07-22T05:05:39.622Z (10 days ago)
- Topics: angular, angular-coss, coss-ui
- Language: TypeScript
- Homepage: https://coss-ui.lordsarcastic.dev
- Size: 233 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - coss-ui-angular - Accessible Angular components inspired by the public [COSS UI catalogue](https://www.coss.com/ui/docs). (Third Party Components / UI Libraries)
- fucking-awesome-angular - coss-ui-angular - Accessible Angular components inspired by the public [COSS UI catalogue](https://www.coss.com/ui/docs). (Third Party Components / UI Libraries)
README
# COSS UI Angular
Accessible Angular components inspired by the public COSS UI catalogue at `coss.com/ui/docs`.
Hosted documentation: https://coss-ui.lordsarcastic.dev
This repository contains:
- `projects/coss-ui-angular`: publishable Angular library.
- `projects/docs`: documentation website built with the library components.
- `.github/workflows/ci.yml`: CI for Biome formatting/linting, Angular tests, and production builds.
## Quick Start
```bash
npm install
npm start
```
Build everything:
```bash
npm run build
```
Run checks:
```bash
npm run ci
```
## Use the Library
Install the package after it is published:
```bash
npm install @lordsarcastic/coss-ui-angular
```
Import individual standalone components or directives:
```ts
import { Component } from '@angular/core';
import { CossButtonDirective, CossInputDirective, CossFieldComponent } from '@lordsarcastic/coss-ui-angular';
@Component({
standalone: true,
imports: [CossButtonDirective, CossInputDirective, CossFieldComponent],
template: `
Email
Save
`,
})
export class ExampleComponent {}
```
Or import the full collection:
```ts
import { COSS_COMPONENTS } from '@lordsarcastic/coss-ui-angular';
```
## Tailwind Setup
The components are styled with Tailwind utility classes and CSS variables. Add the library to your Tailwind content scan:
```js
export default {
content: ['./src/**/*.{html,ts}', './node_modules/@lordsarcastic/coss-ui-angular/**/*.{mjs,js}'],
};
```
Define the design tokens in your global stylesheet:
```css
:root {
--background: 5 5 9;
--foreground: 255 255 255;
--card: 10 10 15;
--card-foreground: 255 255 255;
--popover: 10 10 15;
--popover-foreground: 255 255 255;
--primary: 246 166 35;
--primary-foreground: 5 5 9;
--secondary: 38 38 45;
--secondary-foreground: 255 255 255;
--muted: 38 38 45;
--muted-foreground: 163 163 163;
--accent: 39 39 42;
--accent-foreground: 255 255 255;
--destructive: 239 68 68;
--destructive-foreground: 255 255 255;
--border: 38 38 38;
--input: 38 38 38;
--ring: 246 166 35;
--info: 59 130 246;
--info-foreground: 255 255 255;
--success: 34 197 94;
--success-foreground: 5 5 9;
--warning: 245 158 11;
--warning-foreground: 5 5 9;
}
```
## Component Coverage
The library exports Angular versions of the COSS UI surface: accordion, alert, alert dialog, autocomplete, avatar, badge, breadcrumb, button, calendar, card, checkbox, checkbox group, collapsible, combobox, command, date picker, dialog, drawer, empty state, field, fieldset, form, frame, group, input, input group, keyboard key, label, menu, meter, number field, OTP field, pagination, popover, preview card, progress, radio group, scroll area, select, separator, sheet, skeleton, slider, spinner, switch, table, tabs, textarea, toast, toggle, toggle group, toolbar, and tooltip.
## Accessibility
Native controls are preferred where they provide the strongest behavior: `button`, `a`, `input`, `select`, `textarea`, `details`, `summary`, date input, radio input, and form elements. Composite components expose ARIA roles and state such as `dialog`, `menu`, `radiogroup`, `checkbox`, `switch`, `progressbar`, `meter`, `tablist`, `aria-expanded`, `aria-selected`, and `aria-current`.
## Publishing
Build the library before publishing:
```bash
npm run build:lib
cd dist/coss-ui-angular
npm publish
```