@siuxco/design-system NPM

Our goal is to provide a comprehensive set of design components, guidelines, and best practices for creating beautiful and intuitive user experiences. We prioritize simplicity and ease of use, making it easy for designers and developers to create consistent and cohesive interfaces across all their projects.

✨ Features

🌈 UI components for web applications.
📦 High-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🎨 Powerful cloud customization based on SIUX Studio.

📱 Environment Support

All modern browsers
Server-side Rendering
Electron

Getting started

🔧 Installation

npm install @siuxco/design-system

🔨 Usage

import { Button, Text } from '@siuxco/design-system';

const App = () => (
  <>
    <Text variant="body-strong-1">
      Example text
    </Text>
    <Button
      iconLeft="icon-system-download-line"
      variant="primary"
    >
      Button
    </Button>
  </>
);

🎨 Setup basic CSS

<link href="https://cdn.siux.studio/static/brand/632213d5a467b1178b31dde0/latest/siux.main.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.siux.studio/static/brand/632213d5a467b1178b31dde0/latest/siux.main.responsive.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Inter:100,200,300,500,600,700,800,900|Lato:100,300,700,900|Roboto+Mono:100,200,300,500,600,700" type="text/css" rel="stylesheet" />