Complexes Components

Versions

Before Starting

Installation

npm i complexes-next-components


/tailwind.config.ts
import type { Config } from "tailwindcss";

  content: [
    "./node_modules/complexes-next-components/dist/complexes-next-components.js",
  ]

complexesui usalle Avatar

import { Avatar } from "complexes-next-components";

<Avatar
  src="/GitHub.png"
  alt="Miguel"
  size="sm"
  border="none"
  shape="rounded"
/>;

complexesui usalle InputField

import { InputField } from "complexes-next-components";

<InputField
  placeholder="nombre"
  inputSize="full"
  rounded="md"
  className="mt-2"
  regexType= "letters"
  prefixElement= "<FaUpload className="text-blue-600 w-5 h-5" />",
  type="text"
  {...register("name")}
  hasError={!!errors.name}
  errorMessage={errors.name?.message}
/>;

complexesui usalle MultiSelect

import { MultiSelect } from "complexes-next-components";

const [selectedOptions, setSelectedOptions] = useState<string[]>([]);

const options = [
  { value: "Bogotá", label: "Bogotá" },
  { value: "Medellin", label: "Medellin" },
  { value: "Cali", label: "Cali" },
];

<MultiSelect
  id="city"
  defaultOption="Ciudad"
  options={options}
  inputSize="full"
  regexType= "alphanumeric",
  rounded="md"
  hasError={false}
  className="mt-2"
  onChange={setSelectedOptions}
  value={selectedOptions}
/>;

complexesui usalle SelectField

import { SelectField } from "complexes-next-components";

const [selectedOption, setSelectedOption] = useState("");

const options = [
  { value: "Bogotá", label: "Bogotá" },
  { value: "Medellin", label: "Medellin" },
  { value: "Cali", label: "Cali" },
];

<SelectField
  tKeyHelpText={t("country")}
  tKeyDefaultOption={t("country")}
  searchable
  defaultOption="Pais"
  helpText="Pais"
  sizeHelp="sm"
  id="country"
  options={options}
  inputSize="lg"
  regexType= "numeric",
  rounded="md"
  {...register("country")}
  hasError={!!errors.country}
  errorMessage={errors.country?.message}
/>;

complexesui usalle Tabs

ts import { Tabs } from "complexes-next-components";

const tabs = [ { label: "Frontend", children: , colVariant: "default", size: "md", background: "default", padding: "md", rounded: "lg", }, ]

# complexesui usalle Modal

```ts
import { Modal, Text } from "complexes-next-components";

<Modal isOpen={isOpen} onClose={onClose} title={title}>
  <Text colVariant="primary">description</Text>
</Modal>;

complexesui usalle Button

import { Button } from "complexes-next-components";
    const { t } = useTranslation();
   <Title size="md" font="semi">Complexes</Title>

    <Button tKey={language} colVariant="warning">
      t("traduccion")
    </Button>

complexesui usalle Buton

import { Button } from "complexes-next-components";

   <Title size="md" font="semi">Complexes</Title>

    <Buton colVariant="warning">
        button
    </Buton>

complexesui usalle Tittle

import { Title } from "complexes-next-components";

<Title size="md" font="semi">
  Complexes
</Title>;

complexesui usalle Text

import { Text } from "complexes-next-components";

<Text size="lg" font="semi">
  Complexes
</Text>;

Contributing

If you have ideas, find any issues, or want to contribute, please visit our GitHub repository:

GitHub - complexes-next-components