DC UI Kit

A modern, lightweight React UI component library built with TypeScript and optimized for tree shaking.

Features

• 🌲 Tree Shaking Optimized - Import only what you need
• 🎨 Customizable - Flexible styling with CSS classes and inline styles
• 📦 TypeScript - Full type definitions included
• ⚡ Modern Build - Built with Vite for optimal performance
• 📚 Storybook - Interactive component documentation

Installation

npm install @arabian-systems/dc-ui-kit

or

yarn add @arabian-systems/dc-ui-kit

or

pnpm add @arabian-systems/dc-ui-kit

Important: Import Styles

You must import the CSS file for components to display correctly. Add this import once in your app entry file (e.g., main.tsx or App.tsx):

import '@arabian-systems/dc-ui-kit/styles.css'

or use the full path:

import '@arabian-systems/dc-ui-kit/dist/dc-ui-components.css'

Usage

Button Component

import { Button } from '@arabian-systems/dc-ui-kit'
import '@arabian-systems/dc-ui-kit/styles.css'

function App() {
  return (
    <Button
      primary
      size="medium"
      label="Click me"
      onClick={() => console.log('Clicked!')}
    />
  )
}

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | required | Button text | | primary | boolean | false | Primary or secondary variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | backgroundColor | string | - | Custom background color | | onClick | () => void | - | Click handler | | className | string | - | Additional CSS classes | | disabled | boolean | false | Disabled state |

NavBar Component

import { NavBar } from '@arabian-systems/dc-ui-kit'
import '@arabian-systems/dc-ui-kit/styles.css'

function App() {
  return (
    <NavBar logo={<span>My App</span>}>
      <NavBar.Item label="Home" active onClick={() => {}} />
      <NavBar.Item label="About" onClick={() => {}} />
      <NavBar.Item label="Contact" href="/contact" />
    </NavBar>
  )
}

NavBar Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | logo | ReactNode | - | Logo or brand element | | children | ReactNode | - | Navigation items | | position | 'fixed' \| 'static' \| 'sticky' | 'static' | Position variant | | align | 'left' \| 'center' \| 'right' \| 'space-between' | 'space-between' | Item alignment | | backgroundColor | string | - | Custom background color | | className | string | - | Additional CSS classes |

NavBarItem Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | required | Item text | | onClick | () => void | - | Click handler | | href | string | - | Link URL (renders anchor if provided) | | active | boolean | false | Active state | | className | string | - | Additional CSS classes |

Tree Shaking

This library is optimized for tree shaking. Import only what you need:

// ✅ Good - only Button code is included in your bundle
import { Button } from '@arabian-systems/dc-ui-kit'

// ❌ Avoid - imports everything
import * as DC from '@arabian-systems/dc-ui-kit'

With proper tree shaking, importing only the Button component will add approximately 3-4KB to your bundle instead of the entire library (~8KB).

TypeScript

This library is written in TypeScript and provides complete type definitions out of the box. No need for additional @types packages.

import type { ButtonProps, NavBarProps } from '@arabian-systems/dc-ui-kit'

Styling

The library uses CSS files for styling. You must import the CSS file in your application:

// Recommended: Short import path
import '@arabian-systems/dc-ui-kit/styles.css'

// Alternative: Full path
import '@arabian-systems/dc-ui-kit/dist/dc-ui-components.css'

Customizing Styles

You can override styles by:

1. Using props: Provide custom className or backgroundColor props
2. CSS overrides: Override the CSS classes in your own stylesheets

// Using className prop
<Button label="Custom" className="my-custom-button" />

// Using backgroundColor prop
<Button label="Custom" backgroundColor="#ff6b6b" />

Troubleshooting Styles

If your components appear unstyled:

1. ✅ Make sure you imported the CSS file: import '@arabian-systems/dc-ui-kit/styles.css'
2. ✅ Import it once in your app entry file (e.g., main.tsx or App.tsx)
3. ✅ Check that the CSS file is in your node_modules/@arabian-systems/dc-ui-kit/dist/ folder

CSS Classes

Button:

• .dc-button - Base button class
• .dc-button--primary - Primary variant
• .dc-button--secondary - Secondary variant
• .dc-button--small - Small size
• .dc-button--medium - Medium size
• .dc-button--large - Large size

NavBar:

• .dc-navbar - Base navbar class
• .dc-navbar--fixed - Fixed position
• .dc-navbar--sticky - Sticky position
• .dc-navbar__logo - Logo container
• .dc-navbar__items - Items container
• .dc-navbar__item - Individual item
• .dc-navbar__item--active - Active item

Development

# Install dependencies
npm install

# Start Storybook
npm run dev

# Build library
npm run build

# Lint
npm run lint

Components

• Button - Versatile button component with multiple sizes and variants
• NavBar - Responsive navigation bar with flexible layout options

More components coming soon!

License

MIT © Arabian Systems

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Repository

https://github.com/arabian-systems/dc-ui-components