cl-react-ts-css-001

It is a UI Kit components using React, Typescript, and CSS.

Installation

npm i @your-organization-name/cl-react-ts-css-001

Usage

Option 1. Create a React app

npm create vite@latest

Option 2. Use Codesandbox

1. Visit https://codesandbox.io/.
2. Create a React (TS) project

• Name: ui-kit-react-ts-css-test-001
• Runtime: Devbox

Example

• Create a wrapper component

mkdir -p src/components/wrappers
touch src/components/wrappers/WrapperButtons.tsx

import { AppButton } from "@your-organization-name/cl-react-ts-css-001";

export default function WrapperButtons() {
  return (
    <div>
      <AppButton variant="primary">Primary Button</AppButton>
      <AppButton variant="secondary">Secondary Button</AppButton>
      <AppButton variant="danger">Danger Button</AppButton>
      <AppButton disabled variant="danger">
        Disabled Button
      </AppButton>
    </div>
  );
}

• Update App.tsx

import WrapperButtons from "./components/wrappers/WrapperButtons";
import "./index.css";

export default function App() {
  return (
    <div className="App">
      <WrapperButtons />
    </div>
  );
}

• Clean up dependecies

rm -rf node_modules
rm -rf package-lock.json
rm -rf pnpm-lock.yaml

• Re-install dependencies

npm i

• Run server

npm run dev