SIUX Design System

Comprehensive set of design components, guidelines, and best practices for creating beautiful and intuitive user experiences.

https://design.siux.studio

✨ 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" />

🎨 Setup custom CSS

Create a brand in SIUX Studio and in the CSS Library section copy the links to make your custom implementation.

🔗 Links

• SIUX Studio
• Styles management
• CSS Foundations
• Next.js implementation
• Join our community on Discord