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.
- ๐ Documentation
- ๐ Features
- ๐ฆ Installation
- ๐ Storybook
- ๐ License
- ๐ฑ Components
- ๐ฏ Coverage
Stelios is yet to be documented and will be updated soon. For now, you can refer to storybook for the documentation of the components.
- 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.
To install Stelios, simply run the following command:
# with npm
$ npm install stelios@latest
# with yarn
$ yarn add stelios@latest
You can access the storybook here.
It provides documentation for the components, including their props and numerous samples to help you get started.
- 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
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.