https://github.com/darenmalfait/darenui

https://github.com/darenmalfait/darenui

Last synced: about 15 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/darenmalfait/darenui
• Owner: darenmalfait
• Created: 2021-11-11T16:23:23.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-11T10:27:03.000Z (almost 2 years ago)
• Last Synced: 2024-12-26T13:37:37.467Z (15 days ago)
• Language: TypeScript
• Homepage: https://darenui-docs.vercel.app
• Size: 3.8 MB
• Stars: 0
• Watchers: 0
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


DarenUI


Daren Component library



---

- [Usage](#usage)

  - [Installation](#installation)

  - [Configuration](#configuration)

  - [Quick start](#quick-start)

## Usage

### Installation

To install the component-library run the following within your project directory.

```sh

npm i @daren/ui-core @daren/ui-components postcss tailwindcss @tailwindcss/typography @heroicons/react@2 tailwindcss-animate

```

### Configuration

The theme of this library depends on the @tailwindcss/typography plugin. To use it, follow the steps on the plugin source page. https://github.com/tailwindlabs/tailwindcss-typography

For animations, you need to install the tailwindcss-animate plugin.

```js

// tailwind.config.js

module.exports = {

  mode: "jit",

  content: [

    // ... paths that use tailwind

    "./node_modules/@daren/**/*.{js,ts,jsx,tsx}", // path to daren

  ],

  theme: {

    extend: {},

  },

  plugins: [

    require('tailwindcss-animate'),

    require('@tailwindcss/typography'),

    require("@daren/ui-core"),

  ],

};

```

```js

// postcss.config.js

module.exports = {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},

  },

};

```

Then you need a global css file which you import at the root of the project

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

### Quick start

```js

import * as React from "react";

import { ThemeProvider, H1 } from "@daren/ui-components";

import "@daren/theme/dist/darenui.css"

function App() {

  return (

    

      
Hello Daren

    

  );

}

```