@crossangle-org/cs-ui

Common React UI Component Library for Xangle Services. Built on Shadcn UI and Tailwind CSS v4, providing an accessible and customizable design system.

Installation

npm install @crossangle-org/cs-ui

Setup

This library uses Tailwind CSS v4 styling. Import the stylesheet in your project's root file (e.g., App.tsx, layout.tsx, index.tsx).

import '@crossangle-org/cs-ui/globals.css';

Peer Dependencies

Ensure the following packages are installed in your project:

• react >= 18
• react-dom >= 18
• tailwindcss >= 4

Usage

Import components directly:

import { CsButton, CsInput } from '@crossangle-org/cs-ui';

function Example() {
  return (
    <div className="flex gap-4 p-4">
      <CsInput placeholder="Type something..." />
      <CsButton variant="primary">Submit</CsButton>
    </div>
  );
}

Documentation & Preview

• Hosted Storybook: https://cs-ui-main--693b7dd6c9e6c77f41fd64ac.chromatic.com/