https://github.com/js-toolkit/styled-components
Styled react components powered by JSS via @mui/styles
https://github.com/js-toolkit/styled-components
componets cssinjs jss material-ui mui react react-components styled-components
Last synced: about 2 months ago
JSON representation
Styled react components powered by JSS via @mui/styles
- Host: GitHub
- URL: https://github.com/js-toolkit/styled-components
- Owner: js-toolkit
- License: mit
- Created: 2020-05-23T05:00:19.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2026-02-23T11:37:18.000Z (3 months ago)
- Last Synced: 2026-02-23T19:52:56.345Z (3 months ago)
- Topics: componets, cssinjs, jss, material-ui, mui, react, react-components, styled-components
- Language: TypeScript
- Homepage:
- Size: 1.14 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @js-toolkit/styled-components
[](https://www.npmjs.org/package/@js-toolkit/styled-components)
[](https://www.npmjs.org/package/@js-toolkit/styled-components)
Styled React components powered by [@mui/system/styled](https://mui.com/system/getting-started/). Includes modal, dropdown, notifications, tooltips, buttons, forms, and more.
## Install
```bash
yarn add @js-toolkit/styled-components
# or
npm install @js-toolkit/styled-components
```
Requires `react >= 19` and `@mui/system` as peer dependencies.
## Components
### Layout and Display
| Component | Description |
|-----------|-------------|
| `Modal` | Modal dialog with Header, Body, Footer |
| `DropDown` | Dropdown menu with context |
| `DropDownLabel` | Dropdown trigger label |
| `DropDownBox` | Dropdown content container |
| `Tooltip` | Tooltip component |
| `Tooltipable` | HOC for adding tooltip to any component |
| `Divider` | Divider line |
| `TransitionFlex` | Flex with transition support |
| `TransitionWrapper` | Wrapper with transition animations |
| `SuspenseFallback` | Suspense fallback with delay |
| `ErrorBoundary` | Error boundary component |
| `ResizeListener` | Element resize detection |
### Forms and Inputs
| Component | Description |
|-----------|-------------|
| `Button` | Styled button |
| `LoadableButton` | Button with loading state |
| `TooltipButton` | Button with tooltip |
| `Checkbox` | Checkbox/radio/switch |
| `CheckboxGroup` | Grouped checkboxes |
| `InputGroup` | Input wrapper with error display |
| `Field` | Form field with label and helper |
### Notifications
| Component | Description |
|-----------|-------------|
| `Notifications` | Notification system |
| `NotificationBar` | Individual notification bar |
| `NotificationCloseAction` | Close button for notifications |
### Content
| Component | Description |
|-----------|-------------|
| `Avatar` | Avatar with image fallback |
| `Badge` | Badge with count |
| `Picture` | Image with loading states |
| `Poster` | Poster with low-quality placeholder |
| `TruncatedText` | Text truncation |
| `HighlightedText` | Text highlighting |
| `HiddenIFrame` | Hidden iframe for resize detection |
### Menu
| Component | Description |
|-----------|-------------|
| `MenuList` | Menu list |
| `MenuSelectList` | Selectable menu list |
| `MenuListItem` | Menu list item |
### Fonts
| Component | Description |
|-----------|-------------|
| `RobotoFont` | Roboto font loader |
| `RalewayFont` | Raleway font loader |
### Utilities
| Component | Description |
|-----------|-------------|
| `LoadableFlex` | Flex container with loading state |
| `Transition` | Transition wrapper |
## Usage Examples
### Modal
```tsx
import { Modal } from '@js-toolkit/styled-components/Modal';
function Settings({ open, onClose }: { open: boolean; onClose: () => void }): React.JSX.Element {
return (
Settings
Content here
Close
);
}
```
### LoadableButton
```tsx
import { LoadableButton } from '@js-toolkit/styled-components/LoadableButton';
function SubmitButton({ loading }: { loading: boolean }): React.JSX.Element {
return (
Save
);
}
```
### DropDown
```tsx
import { DropDown, DropDownLabel, DropDownBox } from '@js-toolkit/styled-components/DropDown';
function Menu(): React.JSX.Element {
return (
Open menu
Item 1
Item 2
);
}
```
## Repository
[https://github.com/js-toolkit/styled-components](https://github.com/js-toolkit/styled-components)