Schmancy is a UI library built as web components, designed to provide a collection of reusable and customizable UI elements for modern web applications. It offers an uncomplicated implementation of Material Design 3 (M3), with minor deviations, utilizing lit.dev and Tailwind CSS, and employs Vite as the build process.
- Web Components: Built using the Web Components standard, ensuring encapsulation and reusability across different projects.
- Material Design 3: Adheres to M3 guidelines, providing a modern and cohesive design language.
- Customizable: Easily style and configure components to match your application's design requirements.
- Lightweight: Minimal dependencies to keep your application performant.
To install Schmancy, use npm:
npm install @mhmo91/schmancyAlternatively, if you're using Yarn:
yarn add @mhmo91/schmancyAfter installation, you can import and use Schmancy components in your project.
To import all components:
import '@mhmo91/schmancy'This will make all Schmancy components available for use in your application.
To import a specific component, such as the schmancy-button:
import '@mhmo91/schmancy/button'This will load only the schmancy-button component, which can be used as follows:
<schmancy-button>Click Me</schmancy-button>Note: Replace 'button' with the desired component name to import other components individually.
For detailed documentation and examples, please visit the Schmancy Wiki.
Below is a table linking to each component’s documentation on the GitHub Wiki:
| Component | Description | Documentation |
|---|---|---|
schmancy-animate |
Animation component | Wiki - schmancy-animate |
schmancy-animated-text |
Animated text component | Wiki - schmancy-animated-text |
schmancy-area |
Area component | Wiki - schmancy-area |
schmancy-autocomplete |
Autocomplete field | Wiki - schmancy-autocomplete |
schmancy-busy |
Loading/busy indicator | Wiki - schmancy-busy |
schmancy-button |
Customizable button | Wiki - schmancy-button |
schmancy-card |
Card for content display | Wiki - schmancy-card |
schmancy-checkbox |
Checkbox component | Wiki - schmancy-checkbox |
schmancy-chips |
Chips for display or selection | Wiki - schmancy-chips |
schmancy-content-drawer |
Collapsible drawer component | Wiki - schmancy-content-drawer |
schmancy-divider |
Divider for separating sections | Wiki - schmancy-divider |
schmancy-form |
Form component | Wiki - schmancy-form |
schmancy-icons |
Icon set | Wiki - schmancy-icons |
schmancy-input |
Input field component | Wiki - schmancy-input |
schmancy-layout |
Layout utility | Wiki - schmancy-layout |
schmancy-list |
List component | Wiki - schmancy-list |
schmancy-menu |
Menu component | Wiki - schmancy-menu |
schmancy-nav-drawer |
Navigation drawer | Wiki - schmancy-nav-drawer |
schmancy-notification |
Notification component | Wiki - schmancy-notification |
schmancy-option |
Option selector | Wiki - schmancy-option |
schmancy-radio-group |
Radio button group | Wiki - schmancy-radio-group |
schmancy-select |
Select dropdown | Wiki - schmancy-select |
schmancy-sheet |
Sheet component | Wiki - schmancy-sheet |
schmancy-surface |
Surface element | Wiki - schmancy-surface |
schmancy-table |
Table component | Wiki - schmancy-table |
schmancy-tabs |
Tabbed navigation | Wiki - schmancy-tabs |