Scilent UI

A component and utility library for music-based applications and UIs.

Table of Contents

• Scilent UI
  • Table of Contents
  • Features
    • 🎵 Music-Focused Components
    • 🎨 Comprehensive Theming
    • 🔌 Music Provider Integration
    • 📱 Responsive & Adaptive
    • 🚀 Modern Technology Stack
    • ♿ Accessibility First
    • 🧩 Customizable & Extensible
    • ✨ Rich Interactions
    • 🔍 Type Safety
    • 📖 Open Source
  • Design Guidelines
  • Requirements
  • Getting Started
    • Using NVM (recommended)
    • Development
    • Component Development with Storybook
    • Project Structure
    • Release Process
  • Contributing
  • License

Features

🎵 Music-Focused Components

• Presentational components specifically designed for music metadata display
• Interactive music players, visualizers, and controls
• Specialized components for playlists, albums, artists, and tracks
• Developer utilities for handling music data and playback

🎨 Comprehensive Theming

• Flexible theming system with light and dark modes
• Rich typography system optimized for music applications
• Extensive iconography for music-related actions and metadata

🔌 Music Provider Integration

• Support for all major music providers including Spotify, Apple Music, Tidal, YouTube Music, SoundCloud, and more
• Components that comply with each provider's design and branding guidelines
• TOS-compliant implementations for each platform
• Standardized interfaces across providers

📱 Responsive & Adaptive

• Fully responsive designs that work across all device sizes
• Adaptive layouts for different screen orientations
• Touch-optimized interactions for mobile devices
• Consistent experience across platforms

🚀 Modern Technology Stack

• Built with React 19 and TypeScript

• Bundled with TSUP for optimal package size

• Monorepo structure using Turborepo for efficient development

• BONUS: AI-ready with .cursorrules boilerplate template
• Storybook for interactive component exploration and documentation
• Vite for lightning-fast development experience
• Latest web standards and best practices

♿ Accessibility First

• Based on Radix UI Primitives for robust accessibility
• WCAG 2.1 AA compliant components
• Keyboard navigation support
• Screen reader optimized

🧩 Customizable & Extensible

• Modular architecture for picking only what you need
• Highly customizable components via props and theming
• Extensible design patterns for building custom components
• Composition-based API for maximum flexibility

✨ Rich Interactions

• Smooth animations and transitions
• Advanced interaction patterns
• Audio-reactive components
• Haptic feedback support for compatible devices

🔍 Type Safety

• 100% TypeScript throughout the codebase
• Comprehensive type definitions for all components and utilities
• Strongly typed theme system
• IntelliSense support in modern IDEs

📖 Open Source

• MIT licensed for maximum flexibility
• Community-driven development
• Transparent roadmap and issue tracking
• Welcoming to contributions

Design Guidelines

Read more about the design philosophy and guidelines behind Scilent UI here.

Requirements

• Node.js v23 or higher
• pnpm v10 or higher

Getting Started

Using NVM (recommended)

This project uses Node Version Manager (NVM) to manage Node.js versions.

# Install the correct Node.js version
nvm install
nvm use

# Install dependencies
pnpm install

Development

# Start the development server
pnpm dev

# Run linting
pnpm lint

# Run tests
pnpm test

# Build all packages
pnpm build

# Run Storybook
pnpm storybook

Component Development with Storybook

We use Storybook for developing and documenting components in isolation. Storybook provides a great way to visualize different states of your components and develop them interactively.

# Start Storybook
pnpm storybook

# Build Storybook for static deployment
pnpm build-storybook

Storybook is powered by Vite, which provides:

• Extremely fast hot module replacement (HMR)
• Native ES modules support
• Optimized build performance
• Built-in support for TypeScript, JSX, CSS, and more

Each component in the library has:

• A .stories.tsx file that defines various states and variants
• A .mdx file for comprehensive documentation
• Auto-generated API documentation from TypeScript types and JSDoc comments

To view the Storybook documentation locally, run pnpm storybook and open your browser to http://localhost:6006.

Project Structure

This is a monorepo managed with pnpm workspaces and Turborepo. The packages are organized as follows:

• packages/core: Core components and utilities
• packages/icons: Icon components
• packages/themes: Theme definitions and utilities

Release Process

This project uses Changesets to manage versions and publish packages.

# Create a new changeset
pnpm changeset

# Version packages based on changesets
pnpm version-packages

# Publish packages
pnpm release

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes using conventional commits (git commit -m 'feat: add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

See the Contributing readme for more instructions on how to contribute to this project.

License

MIT © Scilent Digital