Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@symviosis/design-system) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Symbiotic Ecosystem Design System

A modern React component library featuring a dark gradient theme with beautiful UI components built with TypeScript and Tailwind CSS.

npm version license

Features

🌙 Dark Theme First - Optimized for dark mode with #0C0F19 background
🎨 Gradient Aesthetics - Beautiful blue gradient (#70A7FF → #2578FF)
📐 12-Column Grid System - Responsive layout with 1440px max width
🎯 TypeScript Support - Full type definitions included
🎪 Tailwind CSS - Utility-first styling approach
📦 Tree-shakeable - Import only what you need
♿ Accessible - Built with Radix UI primitives

Installation

npm install @symviosis/design-system

or with Yarn:

yarn add @symviosis/design-system

Quick Start

1. Import the styles

Add the design system styles to your application:

// In your main App.tsx or index.tsx
import '@symviosis/design-system/dist/styles.css';

2. Configure Tailwind (Optional)

If you're using Tailwind CSS, you can use our preset configuration:

// tailwind.config.js
const designSystemPreset = require('@symviosis/design-system/src/styles/tailwind.preset');

module.exports = {
  presets: [designSystemPreset],
  // ... your other configurations
}

3. Use the components

import { CustomButton, Container, Grid, Column } from '@symviosis/design-system';

function App() {
  return (
    <Container>
      <Grid>
        <Column span={12}>
          <h1>Welcome to Symbiotic Design System</h1>
          <CustomButton variant="primary">
            Get Started
          </CustomButton>
        </Column>
      </Grid>
    </Container>
  );
}

Components

CustomButton

A versatile button component with multiple variants and states.

import { CustomButton } from '@symviosis/design-system';

// Primary gradient button
<CustomButton variant="primary">Primary Button</CustomButton>

// Secondary button
<CustomButton variant="secondary">Secondary Button</CustomButton>

// Outlined buttons
<CustomButton variant="primaryOutlined">Primary Outlined</CustomButton>
<CustomButton variant="secondaryOutlined">Secondary Outlined</CustomButton>
<CustomButton variant="thirdOutlined">Third Outlined</CustomButton>

// Ghost and Link variants
<CustomButton variant="ghost">Ghost Button</CustomButton>
<CustomButton variant="link">Link Button</CustomButton>

// Sizes
<CustomButton size="sm">Small</CustomButton>
<CustomButton size="default">Default</CustomButton>
<CustomButton size="lg">Large</CustomButton>
<CustomButton size="icon">🔍</CustomButton>

// Disabled state
<CustomButton disabled>Disabled Button</CustomButton>

Grid System

A responsive 12-column grid system with Container, Grid, and Column components.

import { Container, Grid, Column } from '@symviosis/design-system';

<Container>
  <Grid>
    <Column span={12}>Full width</Column>
    <Column span={6}>Half width</Column>
    <Column span={6}>Half width</Column>
    <Column span={4}>One third</Column>
    <Column span={4}>One third</Column>
    <Column span={4}>One third</Column>
    
    {/* Responsive columns */}
    <Column span={12} md={6} lg={4}>
      Responsive column
    </Column>
  </Grid>
</Container>

CustomTabs

Tab navigation component with smooth transitions.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@symviosis/design-system';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    Content for tab 1
  </TabsContent>
  <TabsContent value="tab2">
    Content for tab 2
  </TabsContent>
  <TabsContent value="tab3">
    Content for tab 3
  </TabsContent>
</Tabs>

IconWrapper

A wrapper component for icons with hover states.

import { IconWrapper } from '@symviosis/design-system';

<IconWrapper>
  <YourIcon />
</IconWrapper>

<IconWrapper active>
  <ActiveIcon />
</IconWrapper>

<IconWrapper hoverable={false}>
  <StaticIcon />
</IconWrapper>

Design Tokens

The design system includes the following design tokens:

Colors

Background: #0C0F19
Card: #21263C
Primary Gradient: #70A7FF → #2578FF
Icon Default: #949FB7
Icon Active: #70A7FF

Typography

Font Family: Inter
Font Weights: 300, 400, 500, 600, 700

Spacing

Grid Gutter: 20px
Container Margins: 32px
Max Width: 1440px

Border Radius

Cards: 10px
Buttons: 20px

Utility Functions

cn - Class Name Merger

A utility function for merging Tailwind CSS classes with proper precedence.

import { cn } from '@symviosis/design-system';

const className = cn(
  'base-class',
  condition && 'conditional-class',
  'override-class'
);

TypeScript Support

All components are fully typed. Import types directly:

import type { CustomButtonProps } from '@symviosis/design-system';

const MyButton: React.FC<CustomButtonProps> = (props) => {
  // Your implementation
};

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Contributing

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

License

Changelog

v1.0.0

Initial release
Core components: CustomButton, Grid System, CustomTabs, IconWrapper
Dark gradient theme
TypeScript support
Complete documentation

@symviosis/design-system