Dtd-ui

simple UI component lib for web

Installation

Install lib with npm

  npm i dtd-ui

Import css

dtd-ui/dist/styles/animations.css
dtd-ui/dist/styles/button.css
dtd-ui/dist/styles/cards.css
dtd-ui/dist/styles/colors.css
dtd-ui/dist/styles/menu.css
dtd-ui/dist/styles/select.css
// all css
dtd-ui/dist/styles/styles.css

Usage/Examples

import { GlassmorphismCard, GlassmorphismContainer } from "dtd-ui";

function App() {
  return (
    <div className="App">
      <GlassmorphismContainer>
        <GlassmorphismCard idNumber="1" title="title" content="content" />
      </GlassmorphismContainer>
    </div>
  );
}

import { LayerItem, LayerSocialIcon } from "dtd-ui";

function App() {
  return (
    <div className="App">
     <LayerItem>
        <LayerSocialIcon>Icon</LayerSocialIcon>
      </LayerItem>
    </div>
  );
}

function App() {
  const { onShowAlert, active, message } = useAlertNotification();

  return (
    <div className="App">
      <button
        onClick={() => {
          onShowAlert({
            status: "error",
            message: "succress",
          });
        }}
      >
        click
      </button>
      <Notification message={message} active={active} />
    </div>
  );
}

Demo

GlassmorphimCards

FullScreenMenu

3DlayerIcon

Badges

Authors

• @ducdang98