https://github.com/nerdslabs/teiler
Teiler is an open source library that simplifies the creation of stylish components for various frameworks.
https://github.com/nerdslabs/teiler
javascript svelte typescript vue
Last synced: 4 months ago
JSON representation
Teiler is an open source library that simplifies the creation of stylish components for various frameworks.
- Host: GitHub
- URL: https://github.com/nerdslabs/teiler
- Owner: nerdslabs
- License: mit
- Created: 2022-11-27T07:43:35.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-30T15:26:56.000Z (7 months ago)
- Last Synced: 2025-01-27T22:01:48.458Z (4 months ago)
- Topics: javascript, svelte, typescript, vue
- Language: TypeScript
- Homepage:
- Size: 76.4 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Teiler πͺ‘ (ΛteΙͺlΙr - tailor)
**Teiler** is an open source library that simplifies the creation of stylish components for various frameworks.
Currently in the **alpha phase**, the library is actively being developed and improved.
Join our community on our [Discord Server](https://discord.gg/J6Sv9sQ64t) to stay informed about the latest developments, exchange ideas, and connect with fellow developers. We are continuously working on expanding our support to include more frameworks, allowing developers to effortlessly create components across various environments.
## Features
- π§° **Multiple** frameworks support
- πͺ‘ **Patterns system** for UI libraries
- π **Server-Side Rendering** (SSR)*
- β‘ **Babel** not required
\* Not all frameworks, more details [here](#frameworks)
### Example
```typescript
import { component } from '@teiler/framework'
const Button = component.button<{
_primary: boolean
}>`
display: inline-block;
border-radius: 4px;
font-size: 0.8rem;
line-height: 1.5rem;
background: transparent;
box-shadow: 0 0 0 3px #CBCBCB inset;
${({ _primary }) =>
_primary && `
color: #fff;
box-shadow: none;
background: #CBCBCB;
`
}
`
```
## Frameworks
These are the frameworks we are currently working on and planning to support in the future.
| Framework | CSR | SSR | More details |
| :--- | :---- | :--- | :----------- |
| Svelte v4 | β | β | [README](https://github.com/nerdslabs/teiler/blob/master/packages/svelte/README.md) |
| VueJS | β | β | [README](https://github.com/nerdslabs/teiler/blob/master/packages/vue/README.md) |
| SolidJS | β | β | --- |
| React | β | β | --- |
> [!NOTE]
> CSR - Client Side Rendering*\
> SSR - Server Side Rendering*
## Sew a Pattern
This tool simplifies the creation of consistent and reusable visual styles for components across various web frameworks. It provides a pattern-based approach, where patterns serve as blueprints for defining the visual style of components.
### Example
```typescript
// Pattern file in ui kit library
import { pattern } from '@teiler/core'
const ButtonPattern = pattern.button`
display: inline-block;
border-radius: 4px;
font-size: 0.8rem;
line-height: 1.5rem;
background: transparent;
box-shadow: 0 0 0 3px #CBCBCB inset;
`
export default ButtonPattern
// Usage of Pattern
import { ButtonPattern } from 'some-uikit-library'
import { sew } from '@teiler/core'
import { createComponent } from '@teiler/framework'
const Button = sew(ButtonPattern, createComponent)
export default Button
```
## Packages
| Package | Download | Size
| :--- | :------ | :---- |
| Core |  |  |
| Svelte |  |  |
| Vue |  |  |