ds-smart-ui v0.2.16

Smart UI - React Components

Smart UI is a collection of React components designed to streamline the development of user interfaces. It includes a variety of components such as buttons, forms, and navigation elements, all styled to match modern design standards. This documentation provides an overview of how to install and use Smart UI in your React project.

Installation

To install Smart UI, use npm:

npm install ds-smart-ui

After installation, import the CSS file in your main application file to apply the styles:

import "ds-smart-ui/dist/style.css";

Usage

Once Smart UI is installed and the styles are imported, you can start using the components in your React application.

For example, to use the **Button** component:

import React from "react";
import { Button } from "ds-smart-ui";

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Click me
      </Button>
    </div>
  );
}

export default App;

Lucide Icons

For icons, it is recommended to use Lucide Icons along with Smart UI. You can install Lucide Icons using npm:

npm install lucide-react

Then, you can use Lucide Icons in your **IconButton** component from Smart UI:

import React from "react";
import { IconButton } from "ds-smart-ui";
import { CrossIcon } from "lucide-react";

function App() {
  return (
    <div>
      <IconButton
        iconStart={<CrossIcon />}
        onClick={() => console.log("Button clicked")}
      >
        Click me
      </IconButton>
    </div>
  );
}

export default App;

Project Usage

Smart UI is designed to meet the needs of projects like PT Praisindo Teknologi, providing a reliable set of components for building user interfaces efficiently and effectively.

Changelog

0.1.67 - 2025-02-12

🚀 Added (Design Tokens)

• Implementasi design tokens untuk mengelola warna, ukuran font, line-height, dan letter-spacing.

• Menambahkan daftar warna standar dalam variabel badge:

  primary: "",
  secondary: "",
  info: "",
  success: "",
  warning: "",
  danger: "",
  light: "",
  dark: "",