SquareX UI Component Library

A modern, comprehensive React component library featuring beautiful charts and UI components built with TypeScript, Tailwind CSS, and D3.js.

Features

- 🎨 Beautiful Components: Modern, accessible UI components with consistent design
- 📊 Interactive Charts: D3.js-powered charts with smooth animations and interactions
- 🔧 Highly Customizable: Extensive theming and customization options
- 📱 Responsive Design: Mobile-first approach with responsive components
- ⚡ Lightweight: Optimized bundle size with tree-shaking support
- 🎯 TypeScript First: Full TypeScript support with comprehensive type definitions
- 🚀 React Ready: Built for modern React applications
- 🎭 Storybook Integration: Interactive documentation and component playground
- ♿ Accessible: WCAG compliant components with proper ARIA support
- 🎨 Tailwind CSS: Utility-first styling with custom SquareX design system

Installation

``bash
npm install squarex-ui-component-lib
`

or

`bash
yarn add squarex-ui-component-lib
`

Quick Start

$3

To use the component library, you must import the global CSS in your application's entry point (e.g., main.tsx or App.tsx):

`tsx
import 'squarex-ui-component-lib/dist/index.esm.css';
`

$3

`jsx
import React from 'react';
import { Button, Card, BarChart, PieChart } from 'squarex-ui-component-lib';

function App() {
const chartData = [
{ category: 'Q1', value: 120, color: '#0ea5e9' },
{ category: 'Q2', value: 190, color: '#0284c7' },
{ category: 'Q3', value: 300, color: '#0369a1' },
{ category: 'Q4', value: 280, color: '#075985' },
];

return (

Dashboard

Get Started

data={chartData}
title="Quarterly Sales"
width={600}
height={400}
/>

);
}
`

#### Icon
A flexible icon component that supports over 300+ vectors.

`jsx
import { Icon } from 'squarex-ui-component-lib';

// Basic usage


// With variant and custom size
name="arrow-right"
variant="primary"
size={24}
/>

// All icons list can be found in src/components/data/iconList.ts
`

$3

Icons are automatically loaded from a CDN (JSDelivr) as a fallback, so they will work out of the box in projects like Vite, Create React App, or Codesandbox.

$3

`jsx
// Import only what you need
import { Button } from 'squarex-ui-component-lib/ui';
import { BarChart } from 'squarex-ui-component-lib/charts';
`

Components

$3

#### Button
A versatile button component with multiple variants and states.

`jsx
import { Button } from 'squarex-ui-component-lib';


Click me

`

#### Card
A flexible container component for grouping related content.

`jsx
import { Card } from 'squarex-ui-component-lib';

Card Title

Card content goes here

`

$3

#### BarChart
Interactive bar charts with customizable styling and animations.

`jsx
import { BarChart } from 'squarex-ui-component-lib';

const data = [
{ category: 'Q1', value: 120, color: '#0ea5e9' },
{ category: 'Q2', value: 190, color: '#0284c7' },
];

data={data}
title="Quarterly Sales"
width={600}
height={400}
showTooltip={true}
animate={true}
/>
`

#### PieChart
Beautiful pie charts with interactive tooltips and legends.

`jsx
import { PieChart } from 'squarex-ui-component-lib';

const data = [
{ label: 'Desktop', value: 45, color: '#0ea5e9' },
{ label: 'Mobile', value: 35, color: '#0284c7' },
{ label: 'Tablet', value: 20, color: '#0369a1' },
];

data={data}
title="Device Usage"
showLegend={true}
showTooltip={true}
/>
`

Configuration

$3

Add the SquareX design system to your Tailwind config:

`javascript
// tailwind.config.js
module.exports = {
content: [
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/squarex-ui-component-lib/*/.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
squarex: {
primary: {
50: '#f0f9ff',
500: '#0ea5e9',
900: '#0c4a6e',
},
// ... more colors
},
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}
`

$3

Import the global styles in your main entry file:

`tsx
import 'squarex-ui-component-lib/dist/index.esm.css';
`

Development

$3

- Node.js 16+
- npm or yarn
- Git

$3

`bash

Clone the repository

git clone https://github.com/SquareX/SquareXUIComponentLib.git
cd SquareXUIComponentLib

Install dependencies

npm install

Start development server

npm run dev

Run Storybook

npm run storybook

Run tests

npm test

Build the library

npm run build
`

$3

`
src/
├── components/ # React components
│ ├── charts/ # Chart components (BarChart, PieChart, etc.)
│ └── ui/ # UI components (Button, Card, etc.)
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
├── styles/ # Global styles and CSS
└── index.ts # Main export file
`

$3

1. Create component directory: src/components/ui/NewComponent/
2. Add component files: NewComponent.tsx, NewComponent.types.ts, index.ts
3. Create Storybook story: NewComponent.stories.tsx
4. Add tests: NewComponent.test.tsx
5. Export from main index files

$3

`bash

Run all tests

npm test

Run tests in watch mode

npm run test:watch

Run tests with coverage

npm run test:coverage
`

$3

`bash

Start Storybook development server

npm run storybook

Build Storybook for production

npm run build-storybook
`

Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

$3

- Follow TypeScript best practices
- Write comprehensive tests
- Add Storybook stories for new components
- Follow the existing code style
- Update documentation as needed

License

This project is licensed under the MIT License - see the LICENSE file for details.