Installation

How to install and configure d12-ui in your project.

Requirements

Before installing d12-ui, make sure you have the following:

React 18.0 or later
Node.js 16.0 or later
TypeScript 4.5 or later (recommended)
Tailwind CSS 3.0 or later

Install d12-ui

Install d12-ui using your preferred package manager:

npm

npm i d12-ui

yarn

yarn add d12-ui

pnpm

pnpm add d12-ui

Configure Tailwind CSS

Add d12-ui to your Tailwind CSS configuration:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/d12-ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Styles

Import the d12-ui styles in your main CSS file:

/* globals.css */
@import 'd12-ui/dist/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

Start using d12-ui components in your React application:

import { Button } from 'd12-ui'

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

TypeScript Support

d12-ui is built with TypeScript and provides full type definitions out of the box:

import { Button, type ButtonProps } from 'd12-ui'

interface CustomButtonProps extends ButtonProps {
  loading?: boolean
}

const CustomButton: React.FC<CustomButtonProps> = ({ loading, children, ...props }) => {
  return (
    <Button disabled={loading} {...props}>
      {loading ? 'Loading...' : children}
    </Button>
  )
}

Next Steps

Now that you have d12-ui installed, you can: