# starlord-ui-library

> Starlord UI Library is a component library built with Tailwind CSS and TypeScript. The library provides a collection of reusable UI components that can be used to create beautiful and functional user interfaces for web applications.

Latest version **0.1.227-beta** (published 2023-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install starlord-ui-library
pnpm add starlord-ui-library
yarn add starlord-ui-library
bun add starlord-ui-library
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.227-beta |
| Published | 2023-04-28 |
| First published | 2023-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 13 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Francois van Rensburg |
| Maintainers | francoisvanrensburg |

## Links

- npm: https://www.npmjs.com/package/starlord-ui-library
- Repository: https://github.com/FrancoisvanRensburg/starlord-ui-library
- Issues: https://github.com/FrancoisvanRensburg/starlord-ui-library/issues
- npm.io page: https://npm.io/package/starlord-ui-library

## Dependencies (13)

- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [moment](https://npm.io/package/moment.md) ^2.29.4
- [react-popper](https://npm.io/package/react-popper.md) ^2.3.0
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.7
- [detect-browser](https://npm.io/package/detect-browser.md) ^5.3.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) 5.2.0
- [@headlessui/react](https://npm.io/package/@headlessui/react.md) ^1.7.14
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^4.0.4
- [@react-google-maps/api](https://npm.io/package/@react-google-maps/api.md) ^2.18.1
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.2.0
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^6.4.0
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.4.0

## Recent versions

- 0.1.227-beta (latest) — 2023-04-28
- 0.1.226-beta — 2023-04-28
- 0.1.225-beta — 2023-04-28
- 0.1.224-beta — 2023-04-28
- 0.1.223-beta — 2023-04-28
- 0.1.222-beta — 2023-04-28
- 0.1.221-beta — 2023-04-28
- 0.1.220-beta — 2023-04-28
- 0.1.219-beta — 2023-04-28
- 0.1.218-beta — 2023-04-28
- 0.1.217-beta — 2023-04-28
- 0.1.215 — 2023-04-28
- 0.1.214 — 2023-04-28
- 0.1.213 — 2023-04-28
- 0.1.211 — 2023-04-28
- … 10 more at https://npm.io/package/starlord-ui-library/versions

## README

# Starlord ui library

Starlord UI Library is a component library built with Tailwind CSS and TypeScript. The library provides a collection of reusable UI components that can be used to create beautiful and functional user interfaces for web applications.

To get you started, let's install the library

## Installation

`npm install starlord-ui-library`

or

`yarn add starlord-ui-library`

The library is built with Tailwind CSS and TypeScript. To use the library, you need to install Tailwind CSS and its dependencies.

Then add the css file to your project at `index.tsx`

`import "starlord-ui-library/dist/tailwind.css"`

Then we need to add "fluff" to the index.scss file. `example/styles/index.scss`

Populate the `tailwind.config.js` file with the following:

```
const colors = require("tailwindcss/colors");

module.exports = {
  content: {
    enabled: true,
    content: [
      "./src/*.{js,jsx,ts,tsx}",
      "./src/**/*.{js,jsx,ts,tsx}",
      "./src/**/**/*.{js,jsx,ts,tsx}",
      "./node_modules/uafrica-ui-framework/build/*.{js,jsx,ts,tsx}",
      "./public/index.html"
    ],
    options: {
      safelist: [/data-theme$/]
    }
  },
  media: false, // or 'media' or 'class'
  theme: {
    screens: {
      xs: "475px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px"
    },
    boxShadow: {
      sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
      DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
      md: "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
      lg: "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)",
      xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
      "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
      "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
      inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
      none: "none"
    },
    extend: {
      spacing: {
        120: "30rem"
      },
      transitionProperty: {
        width: "width"
      },
      colors: {
        transparent: "transparent",
        current: "currentColor",
        black: colors.black,
        white: colors.white,
        gray: colors.neutral,
        turquise: colors.turquise,
        indigo: colors.indigo,
        red: { ...colors.red, light: "#FCA5A5", DEFAULT: "#DC2626", dark: "#991B1B" },
        green: {
          ...colors.green,
          100: "rgb(231, 255, 209)",
          500: "#06b73d",
          DEFAULT: "#06b73d"
        },
        pink: {
          ...colors.pink,
          100: "#FFDFDC",
          500: "#FF024E",
          DEFAULT: "#FF024E"
        },
        yellow: {
          ...colors.yellow,
          100: "#FFFBD3",
          500: "#FFB600",
          DEFAULT: "#FFB600"
        },
        blue: {
          ...colors.blue,
          light: "#D6ECFF",
          DEFAULT: "#007BFF",
          dark: "#0060C7",
          100: "rgb(214, 236, 255)",
          500: "#0076fa"
        },
        primary: {
          ...colors.primary,
          light: "#D6ECFF",
          DEFAULT: "#1ABC9C",
          dark: "#148F77",
          50: "rgb(238, 252, 249)",
          100: "rgb(182, 234, 225)",
          500: "#3DC7AE"
        }
      }
    },
    fontFamily: {
      display: ["Montserrat"],
      body: ["Montserrat"]
    },
    borderWidth: {
      DEFAULT: "1px",
      0: "0",
      2: "2px",
      3: "3px",
      4: "4px",
      6: "6px",
      8: "8px"
    }
  },
  variants: {
    extend: {
      opacity: ["disabled"]
    }
  }
};
```

## Customization

Starlord UI Library uses Tailwind CSS under the hood, which means that you can customize the appearance of the components by modifying the Tailwind CSS configuration in your project.

To customize the appearance of the components, you need to install Tailwind CSS and its dependencies.

Then add the css file to your project at `index.tsx`

## Contributing

Contributions to Starlord UI Library are welcome and appreciated! If you find a bug or have a feature request, please open an issue on the GitHub repository.

## License

Starlord UI Library is open source software under the MIT Licence

---
_Source: https://npm.io/package/starlord-ui-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._