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:

Stelios is yet to be documented and will be updated soon. For now, you can refer to storybook for the documentation of the components.

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.