Stelios Design System:

Building Themable Responsive Components

Welcome to Stelios, a comprehensive design system built with TypeScript, React, and Styled-Components. Stelios provides a robust set of components and utilities to help you efficiently create responsive and accessible user interfaces.

Table of Contents:

• 📋 Documentation
• 🚀 Features
• 📦 Installation
• 📚 Storybook
• 📝 License
• 📱 Components
• 💯 Coverage

Documentation:

Comprehensive documentation for Stelios is available at steliosui.com. Our documentation includes:

• Getting Started Guide: Learn how to quickly set up Stelios in your project.
• Component API: Detailed information on props, usage, and examples for each component.
• Theming Guide: Understand how to customize and create themes for your project.
• Best Practices: Tips and tricks for using Stelios effectively in your applications.
• Tutorials: Step-by-step guides for common use cases and advanced features.

We regularly update our documentation to ensure it remains current and valuable. If you have any questions or need further clarification, please don't hesitate to open an issue on our GitHub repository.

Features:

• Theming: Dynamic color and theme computation on the fly. Create your own website using just one color.
• TypeScript: Enjoy strong typing and enhanced developer experience.
• Styled-Components: Seamlessly integrate with your styles using styled-components.
• Responsive Design: Ensure your components look great on all devices.
• Accessibility: Built with accessibility in mind and ARIA guidelines to provide an inclusive experience.

Installation

To install Stelios, simply run the following command:

# with npm
$ npm install stelios@latest

# with yarn
$ yarn add stelios@latest

Storybook:

You can access the storybook here.
It provides documentation for the components, including their props and numerous samples to help you get started.

Components Supported

• Accordion
• Autocomplete
• Avatar
• Banner
• Breadcrumbs
• Button
• Capsule
• Card
• Checkbox
• ClickAwayListener
• CodeDisplay
• CodePreview
• ColorPicker
• Collapsible
• ComponentHighlight
• Drawer
• FormControlLabel
• Header
• IconButton
• ImageHighlight
• Input
• Link
• List
• Loader
• Menu
• MenuItem
• NavigationBar
• NotificationDialog
• NumberInput
• Password
• Radio
• RadioGroup
• Select
• Sidebar
• Slider
• Switch
• Tabs
• Tag
• Text
• ThemeProvider
• ToggleButton

Coverage

Every line of code in Stelios is meticulously crafted with a clear purpose to create beautiful components. You can explore the latest code coverage report here.