0.3.2 • Published 10 days ago

@mentor-inc/ui v0.3.2

Weekly downloads
-
License
MIT
Repository
-
Last release
10 days ago

Mentor Inc. UI Library

Installation

This package can be used for Nextjs project

pnpm add -D tailwindcss postcss autoprefixer
pnpm add @mentor-inc/ui

Usage

  • Create tailwind.config.ts in root directory and paste the following code:
import configSrc from '@mentor-inc/ui/tailwind.config';
import path from 'path';
const modulePath = require.resolve('@mentor-inc/ui/tailwind.config');
const config: Config = {...configSrc};

config.content = [
  ...(config.content as string[]),
  path.join(path.dirname(modulePath), 'src/**/*.tsx'),
];

export default config;

You can modify the config, this is the example

if (!config.theme) {
  config.theme = {};
}
if (!config.theme.extend) {
  config.theme.extend = {};
}
config.theme.extend.keyframes = {
  ...config.theme.extend.keyframes,
  'floatUp': {
    '0%': {transform: 'translateY(100%)'},
    '100%': {transform: 'translateY(0)'},
  },
  'zoom': {
    '0%': {transform: 'scale(0)'},
    '100%': {transform: 'scale(1)'},
  },
  'zoom-pulse': {
    '0%': {transform: 'scale(1)'},
    '50%': {transform: 'scale(1.1)'},
    '100%': {transform: 'scale(1)'},
  },
  'btn-pulse': {
    '0%': {boxShadow: '0 0 0 0 #25d366', opacity: '1'},
    '100%': {boxShadow: '0 0 0 15px #25d366', opacity: '0'},
  },
};
  • Create postcss.config.js in root directory and paste the following code:
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

  • Make sure the moduleResolution option in tsconfig.json is set to Bundler

  • Import the globals.css in root layout and add Inter font

import {Metadata} from 'next';
import {Inter} from 'next/font/google';
import '../../globals.css';

const inter = Inter({subsets: ['latin'], variable: '--font-inter'});

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body className={inter.variable}>{children}</body>
    </html>
  );
}
  • Import the component you want to use
import {Button} from '@mentor-inc/ui/button';
  • To use the SvgLink component, you need to make the api route. Create file app/icons/url/route.ts and paste the following code
export * from '@mentor-inc/ui/svg-api';
@radix-ui/react-checkbox@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-label@radix-ui/react-select@radix-ui/react-slot@radix-ui/react-switchclass-variance-authorityclsxreactreact-domreact-hook-formtailwind-mergetailwindcss-animate
@everything-registry/sub-chunk-594
0.3.2

10 days ago

0.3.1

10 days ago

0.2.21

2 months ago

0.2.20

2 months ago

0.2.16

2 months ago

0.2.15

2 months ago

0.2.19

2 months ago

0.2.18

2 months ago

0.2.17

2 months ago

0.2.14

3 months ago

0.2.13

4 months ago

0.2.12

4 months ago

0.2.11

4 months ago

0.2.10

5 months ago

0.2.7

5 months ago

0.2.9

5 months ago

0.2.8

5 months ago

0.2.6

5 months ago

0.2.5

5 months ago

0.2.4

5 months ago

0.2.3

5 months ago