https://github.com/longnguyen245/solid-corner-smoothing
This is a component package used to create smooth curved corners for solidJS. You can use it easily for basic tags or a solid-styled-components.
https://github.com/longnguyen245/solid-corner-smoothing
solid solid-start solidjs
Last synced: about 1 month ago
JSON representation
This is a component package used to create smooth curved corners for solidJS. You can use it easily for basic tags or a solid-styled-components.
- Host: GitHub
- URL: https://github.com/longnguyen245/solid-corner-smoothing
- Owner: longnguyen245
- License: mit
- Created: 2023-01-26T14:06:04.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-09-26T00:36:10.000Z (9 months ago)
- Last Synced: 2026-05-25T05:29:26.784Z (about 1 month ago)
- Topics: solid, solid-start, solidjs
- Language: TypeScript
- Homepage:
- Size: 2.93 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Solid corner smoothing
This is a component package used to create smooth curved corners for solidJS. You can use it easily for basic tags or a solid-styled-components.
From version 0.2.0 will support solid-start and the documentation has been changed
# [:point_right: Link demo](https://long5436.github.io/solid-corner-smoothing/)
## Installation
```bash sh
npm install solid-corner-smoothing
pnpm install solid-corner-smoothing
yarn add solid-corner-smoothing
```
## Usage
### Import
```js
import SolidCornerSmoothing from 'solid-corner-smoothing';
```
### Basic
```jsx
const App = () => {
return (
This is box
);
};
export default App;
```
### Using with reactivity
you can use react and have to enable `reSize` prop to be able to change element state according to it
```jsx
const [radius, setRadius] = createSignal(60);
const [smoothing, setSmoothing] = createSignal(0.7);
return (
This is box
);
```
### Wrapper
pass the tag name as a string to the `wrapper` prop that will be used as the root tag
```jsx
return (
This is box
);
```
### Solid-styled-components
You can also pass a style-components to the wrapper prop to generate the root tag
```jsx
const Btn = styled('button')`
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 100px;
border: none;
`;
return (
This is button
);
```
### Use css
Background color can be used via css or options props, border color can only be passed through options props. (the colors passed options props also accept css variables)
```jsx
return (
This is button
);
```
```css
.box {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 100px;
background-color: gray;
}
```
## Props
| Prop name | Type value | Description |
| --------- | :--------------------- | :------------------------------------------------------------------- |
| wrapper | string, Styled Element | Root tag (default is `div`), can also be a `solid-styled-components` |
| options | Options | Where to put options. (required to work)border-radius. |
### Options
| Prop name | Type value | Description |
| ----------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| cornerRadius | number | Similar to the CSS property border-radius. |
| topLeftCornerRadius | number | Radius each corner |
| topRightCornerRadius | number | Radius each corner |
| bottomRightCornerRadius | number | Radius each corner |
| bottomLeftCornerRadius | number | Radius each corner |
| cornerSmoothing | number | The degree of corner smoothing as a number in the range 0–1. 0 is equivalent to no smoothing and looks like normal border-radius. 1 indicates maximal smoothing. |
| preserveSmoothing | boolean | Allow corner smoothing to work better on large rounded corners. |
| reSize | boolean | Allows resizing and corners |
| border.size | number | When this prop has a value, it will turn into border mode (need to change the css according to the instructions or use prop `borderColor` and `backgroundColor`) |
| border.color | string | Border color |
| backgroundColor | string | Background color (can still use css if not using this prop) |
| fitBorderWidth | number | Add custom angle width parameter to fix visual effects |