Cascade layers
The two layers this package owns, why panel.css is imported last, and how to override a component cleanly.
Read more
Search
Search
Framework-agnostic CSS component implementations, driven entirely by component tokens and scoped to @layer components.
@uncinq/css-components is the top of the stack: 29 components and 1 utility, written as plain CSS, reading their values from @uncinq/component-tokens and adding no values of their own.
@uncinq/design-tokens primitive + semantic values
@uncinq/component-tokens component-scoped values
@uncinq/css-base reset, native elements, layouts
@uncinq/css-components ← this package
Every rule lives in @layer components, except the scroll-snap utility which lives in @layer utilities. There is no build step, no preprocessor, and no JavaScript shipped in the package. Three components do expect a script you provide, and each one documents the contract it needs.
| Page | Covers |
|---|---|
| Buttons | .btn with its colour, size and style variants, plus 7 specialised buttons |
| Overlays | .panel, .modal, .drawer, .dropdown |
| Content | .alert, .badge, .banner, .card, .items, .list, .media, .surtitle |
| Navigation | .nav, .nav-title, .nav-accessibility, .breadcrumb-wrapper, .pagination |
| Embeds | .embed, .video, .map |
| Forms | .form, .form-check and the form layout helpers |
| Utilities | .scrollsnap, turning a grid into a snap carousel |
Read Cascade layers first if you are wiring this into a project for the first time.
All three packages below are required. The tokens resolve the custom properties, and css-base provides the reset and the element styles the components build on.
npm install @uncinq/design-tokens @uncinq/component-tokens @uncinq/css-base @uncinq/css-components
@layer reset, tokens, libs, vendors, base, layouts, components, pages, utilities;
@import '@uncinq/design-tokens'; /* @layer tokens */
@import '@uncinq/css-base'; /* @layer reset, base, layouts */
@import '@uncinq/component-tokens'; /* @layer tokens */
@import '@uncinq/css-components'; /* @layer components, utilities */
Per component, when you only need a few:
@import '@uncinq/css-components/css/components/button.css';
@import '@uncinq/css-components/css/components/alert.css';
@import '@uncinq/css-components/css/utilities/scrollsnap.css';
Without a build step:
<link rel="stylesheet" href="https://unpkg.com/@uncinq/css-components">
Note that @uncinq/css-base is a genuine prerequisite but is not declared in peerDependencies. Install it explicitly.
css/index.css imports the components alphabetically, with two deliberate exceptions.
components/panel.css is imported last among the components. Its .panel-inline-* variants have to beat .modal and .drawer, and they do so on source order rather than on specificity, because most of the file is wrapped in :where() and carries no specificity at all.
utilities/scrollsnap.css comes after everything, in @layer utilities, because it has to win over the grid a component declares for itself in @layer components.
If you import file by file rather than using the barrel, preserve those two positions.
No JavaScript. .modal, .drawer and .dropdown expect a script. The CSS defines the classes and attributes that script must toggle, and each page documents the contract.
No .item. Despite what a couple of source comments still suggest, .item is not defined here. It lives in the Hugolify design system theme. This package ships .card, a complete implementation in its own right, and .items, a grid whose children you provide. See Content.
No icons. Components that show a glyph, such as .pagination controls, expect the theme to supply it through ::before or ::after content.