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.

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.

Yuva0/stelios