UI LibraryUI Library
Guide
Components
Styling
Repo
Guide
Components
Styling
Repo
  • Guide

    • Introduction
    • Getting Started
  • Components

    • CataUiAccordion
    • CataUiAccordionItem
    • CataUiAlert
    • CataUiAnchorMenu
    • CataUiBadge
    • CataUiButton
    • CataUiCollapse
    • CataUiDraggable
    • CataUiDropdown
    • CataUiDropover
    • CataUiFileTree
    • CataUiIcon
    • CataUiIconSwitch
    • CataUiInput
    • CataUiInputCheckbox
    • CataUiInputColor
    • CataUiInputDate
    • CataUiInputGroup
    • CataUiInputRadio
    • CataUiInputSearch
    • CataUiInputSelect
    • CataUiMasonry
    • CataUiMasonryTile
    • CataUiLogo
    • CataUiModal
    • CataUiPaginate
    • CataUiProgress
    • CataUiSpinner
    • CataUiStatusLabel
    • CataUiSwitch
    • CataUiTable
    • CataUiTableAG
    • CataUiTableFooter
    • CataUiTabs
    • CataUiTabSwitch
    • CataUiTooltip
  • Styling

    • Colors
    • Icons
    • Typography
    • Utils

Getting Started

Installation

Install the Catalyst UI Library using npm:

npm install @catalyst/ui-library

Basic Usage

Importing Components

You can import individual components as needed:

import { CataUiButton, CataUiInput } from '@catalyst/ui-library';

Importing Styles

To ensure all components render correctly, include the library's CSS in your main file:

import '@catalyst/ui-library/style.css';

Using Components

When using the Composition API with <script setup>:

<template>
  <div>
    <CataUiButton>Click me</CataUiButton>
    <CataUiInput placeholder="Enter your name" />
  </div>
</template>

<script setup>
import { CataUiButton, CataUiInput } from '@catalyst/ui-library';
</script>
Prev
Introduction