Natura11y Core

Core CSS, vanilla JavaScript, Sass source, and utility exports for the Natura11y Design Ecosystem.

This package is maintained in the public Natura11y monorepo.

https://gonatura11y.com

Install

npm install @natura11y/core

Import the compiled CSS and JavaScript once from your application entry point:

import '@natura11y/core/css';
import '@natura11y/core';

Or load the Sass source from your Sass bundle:

@use '@natura11y/core/scss';

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@natura11y/[email protected]/dist/natura11y.css">
<script src="https://cdn.jsdelivr.net/npm/@natura11y/[email protected]/dist/natura11y.js"></script>

What's Included

• CSS custom properties, cascade layers, layout utilities, components, and accessibility helpers.
• Vanilla JavaScript for interactive components such as accordion, alert, collapse, dropdown, flyout, lightbox, modal, tabs, table, and track.
• Sass source files for teams that want to customize or bundle Natura11y from source.
• Shared JavaScript utilities used by other Natura11y packages.
• Static HTML examples for the core component patterns.

Utility Exports

import { getFocusableElements, focusTrap } from '@natura11y/core/utilities/focus';
import { getCurrentBreakpoint } from '@natura11y/core/utilities/getCurrentBreakpoint';
import { handleArrowKeyNavigation } from '@natura11y/core/utilities/keyboardNavigation';
import { handleOverlayOpen, handleOverlayClose } from '@natura11y/core/utilities/overlay';

Related

• Natura11y Core on GitHub
• Natura11y Core on NPM
• Natura11y Icons on NPM
• Natura11y React on NPM
• Natura11y Docs