e-INFRA CZ Design System

A comprehensive React component library built with shadcn/ui and Tailwind CSS v4, designed for the e-INFRA CZ app ecosystem.

✨ Features

• 🎨 46+ Components - Complete set of UI components based on shadcn/ui
• 🎯 TypeScript First - Full TypeScript support with type definitions
• 💅 Tailwind CSS v4 - Modern styling with the latest Tailwind features
• 🌗 Dark Mode - Built-in dark mode support
• ♿ Accessible - WAI-ARIA compliant components
• 📦 Tree-shakeable - Import only what you need
• 🎭 Customizable - Easy to theme and customize

📦 Installation

# Using npm
npm install @muni-ics/e-infra-design-system

# Using yarn
yarn add @muni-ics/e-infra-design-system

# Using pnpm
pnpm add @muni-ics/e-infra-design-system

# Using bun
bun add @muni-ics/e-infra-design-system

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom tailwindcss

🚀 Quick Start

1. Import Styles

Important: Import the CSS file in your main application file:

import '@muni-ics/e-infra-design-system/style.css';

2. Configure Tailwind CSS

Add the design system to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@muni-ics/e-infra-design-system/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Use Components

import { Button, Card, CardHeader, CardTitle, CardContent } from '@muni-ics/e-infra-design-system';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to e-INFRA CZ</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Start building with our design system!</p>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  );
}

📚 Available Components

Layout

• Card, Separator, AspectRatio, Sidebar

Forms

• Button, Input, Textarea, Label, Checkbox, Radio Group, Select, Switch, Slider

Data Display

• Table, Badge, Avatar, Calendar, Progress, Skeleton, Tooltip

Feedback

• Alert, Alert Dialog, Toast (Sonner)

Navigation

• Tabs, Breadcrumb, Navigation Menu, Menubar, Context Menu, Dropdown Menu

Overlays

• Dialog, Sheet, Popover, Hover Card, Command, Drawer

Other

• Accordion, Collapsible, Carousel, Toggle, Toggle Group, Scroll Area, Resizable

🎨 Typography

The design system includes standardized typography:

// Headings
<h1 className="text-4xl font-bold tracking-tight">Main Heading</h1>
<h2 className="text-3xl font-semibold tracking-tight">Section Heading</h2>
<h3 className="text-2xl font-semibold tracking-tight">Sub-heading</h3>
<h4 className="text-xl font-semibold">Sub-section</h4>

// Body text
<p className="text-base leading-7">Standard body text</p>
<p className="text-sm text-muted-foreground">Small text</p>
<p className="text-xs text-muted-foreground">Caption text</p>

🎭 Theming

The design system uses CSS variables for theming. You can customize colors by overriding these variables:

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  /* ... more variables */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  /* ... more variables */
}

📖 Documentation

For full documentation and live examples, visit:

🔗 Live Showcase

🛠️ Development

# Install dependencies
bun install

# Start dev server
bun run dev

# Build library
bun run build:lib

# Build showcase
bun run build:showcase

# Run linting
bun run lint

# Run type checking
bun run type:check

📄 License

MIT © CERIT-SC, Masaryk University

👥 Maintainers

• Jakub Čillík cillik@muni.cz
• Romana Ďuráčiová duraciova@mail.muni.cz
• Michal Mikuš 553650@mail.muni.cz

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details.

🐛 Issues

Found a bug? Please report it at our GitHub Issues.