Web Dev
Quick start
All components in the design system uses the npm scopes
@ntds. The following show how you install and import a Button from the @ntds/button:
yarn add @ntds/buttonNow you can use them:
import { Button } from '@ntds/button';Each component will have the details on how you install and import them.
How to configure ntds to work with a Next.js project
.npmrc
To be able to consume components from @ntds write the following in a .npmrc file:
//registry.npmjs.org/:_authToken=YOUR_TOKENAdd @ntds/core package
tailwind.config.js
Add the following code to tailwind.config.js:
const ntdsPreset = require("@ntds/core/tailwind.preset");
module.exports = {
presets: [ntdsPreset],
content: [
// 🐢 for the jit-mode to work
"./node_modules/@ntds/*/**/*.js",
"./node_modules/@ntds/core/css/src/*",
],
safelist: [
"ntds-fade-out-right",
"ntds-hover-grow-md",
"ntds-hover-grow-lg",
"ntds-hover-grow-xl",
],
// other config here
}