https://github.com/uncinq/css-components
Framework-agnostic CSS component implementations — actual styles built on top of design and component tokens.
https://github.com/uncinq/css-components
css css-components css-layers
Last synced: 2 days ago
JSON representation
Framework-agnostic CSS component implementations — actual styles built on top of design and component tokens.
- Host: GitHub
- URL: https://github.com/uncinq/css-components
- Owner: uncinq
- License: mit
- Created: 2026-04-03T09:01:42.000Z (6 days ago)
- Default Branch: main
- Last Pushed: 2026-04-03T10:16:11.000Z (6 days ago)
- Last Synced: 2026-04-03T15:51:36.957Z (6 days ago)
- Topics: css, css-components, css-layers
- Language: CSS
- Homepage:
- Size: 14.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @uncinq/css-components
> Framework-agnostic CSS component implementations — actual styles built on top of design and component tokens.
## What is this?
`@uncinq/css-components` provides the CSS implementations of common UI components. It sits at the top of the CSS stack:
```text
@uncinq/design-tokens ← primitive + semantic CSS custom properties
@uncinq/component-tokens ← component-scoped CSS custom properties
@uncinq/css-base ← base CSS rules
@uncinq/css-components ← actual CSS rules (this package)
```
Each component file contains only CSS rules, using the tokens defined in the two packages above. No JavaScript, no markup opinions — just portable, layered CSS.
---
## CSS cascade layers
All component styles are declared inside `@layer components`:
```css
@layer config, base, layouts, vendors, components;
```
This means:
- Components never bleed into base or layout styles
- Project-level `@layer components` rules always win over these defaults
- Vendors (e.g. Splide) sit below project components but above base
---
## Prerequisites
This package consumes tokens from:
- [@uncinq/design-tokens](https://github.com/uncinq/design-tokens) — semantic CSS custom properties
- [@uncinq/component-tokens](https://github.com/uncinq/component-tokens) — component-scoped CSS custom properties
- [@uncinq/css-base](https://github.com/uncinq/css-base) — base CSS rules
Import them before this package:
```css
@import '@uncinq/design-tokens';
@import '@uncinq/component-tokens';
@import '@uncinq/css-base';
@import '@uncinq/css-components';
```
---
## Installation
```bash
npm install @uncinq/css-components
# or
yarn add @uncinq/css-components
```
### Usage — full import
```css
@import '@uncinq/design-tokens';
@import '@uncinq/component-tokens';
@import '@uncinq/css-base';
@import '@uncinq/css-components';
```
### Usage — per component
```css
@import '@uncinq/design-tokens';
@import '@uncinq/component-tokens';
@import '@uncinq/css-base';
@import '@uncinq/css-components/css/component/nav.css';
@import '@uncinq/css-components/css/component/pagination.css';
```
### Usage — CDN (no build step)
```html
```
---
## File structure
```text
css/
index.css ← imports all component files
component/
alert.css ← alert / notification banner
badge.css ← badge / pill / tag
banner.css ← full-width banner strip
breadcrumb.css ← breadcrumb navigation
button.css ← button (all variants)
card.css ← card container
dropdown.css ← dropdown menu
embed.css ← video / iframe embed wrapper
list.css ← styled list
map.css ← embedded map
media.css ← media object (image + text)
nav.css ← navigation bar
nav-accessibility.css ← accessibility skip links / focus helpers
offcanvas.css ← off-canvas panel / drawer
pagination.css ← pagination control
```
---
## References
- [@uncinq/design-tokens](https://github.com/uncinq/design-tokens) — primitive + semantic layers
- [@uncinq/component-tokens](https://github.com/uncinq/component-tokens) — component token layer
- [@uncinq/css-base](https://github.com/uncinq/css-base) — base CSS rules
- [MDN: CSS cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)