draupnir-ds

Draupnir DS

My personal design system.
Explore the docs »

View Demo · Report Bug / Feature · Status Application

About The Project

Draupnir, the design system created in a flexible way using RadixUI in its composition with tailwindcss based on styling, standardizing the way I build my personal applications.

Getting Started

Prerequisites

• npm

  npm install npm@latest -g

• tailwindcss

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

  npm i draupnir-ds@latest

Installation

To get correct styles in your application using tailwindcss, you will need to follow the following steps:

1 - on layout.tsx root import

import 'draupnir-ds/src/app/globals.css'

2- Next you will need to add the content settings to tailwind.config.{ts,js}

  "./node_modules/draupnir-ds/src/components/**/*.{js,ts,jsx,tsx,mdx}"

3 - add a section on tailwind.config.{ts,js}

  presets: [
    require("draupnir-ds/tailwind.config.ts")
  ]

Example configuration tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/draupnir-ds/src/components/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {},
  plugins: [],
  presets: [
    require("draupnir-ds/tailwind.config.ts")
  ]
};
export default config;

4 - on your next.config.mjs set this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['draupnir-ds'],
}
 
module.exports = nextConfig

Usage

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Author

---

Antonio Silva 📖 👀