https://github.com/blockarchitech/shale
A React component library, inspired by pebble/slate.
https://github.com/blockarchitech/shale
Last synced: 7 months ago
JSON representation
A React component library, inspired by pebble/slate.
- Host: GitHub
- URL: https://github.com/blockarchitech/shale
- Owner: blockarchitech
- License: mit
- Created: 2025-09-19T04:58:14.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-20T20:29:51.000Z (9 months ago)
- Last Synced: 2025-09-20T21:30:12.617Z (9 months ago)
- Language: TypeScript
- Size: 206 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shale
A React component library, inspired by [Slate](https://github.com/pebble/slate).
## Installation
```bash
npm install @blockarchitech/shale
```
## Components
### Button
A button component.
```tsx
import { Button } from '@blockarchitech/shale';
```
### Checkbox
A checkbox component.
```tsx
import { Checkbox } from '@blockarchitech/shale';
```
### Container
Components for grouping items.
```tsx
import { ItemContainer, ItemContainerHeader, ItemContainerContent, ItemContainerFooter, Item, ButtonContainer } from '@blockarchitech/shale';
Header
Content
Footer
```
### DateInput
A date input component.
```tsx
import { DateInput } from '@blockarchitech/shale';
```
### Paragraph
A paragraph component for text blocks.
```tsx
import { Paragraph } from '@blockarchitech/shale';
Some text
```
### Select
A select dropdown component.
```tsx
import { Select } from '@blockarchitech/shale';
One
```
### Toggle
A toggle switch component.
```tsx
import { Toggle } from '@blockarchitech/shale';
```
## Theming
To use Shale, wrap your application in the `ShaleTheme` provider. This will provide the theme and global styles to all components.
```tsx
import { ShaleTheme } from '@blockarchitech/shale';
{/* your app */}
```
You can also provide a custom theme to `ShaleTheme`:
```tsx
import { ShaleTheme } from '@blockarchitech/shale';
const myTheme = {
// ... your theme overrides
};
{/* your app */}
```
## Contributing
This project uses Vite for development and building the library.
### Development
To start the development server, run:
```bash
npm run dev
```
### Building
The `vite.config.ts` is configured to build the library for production. The entry point is `src/components/shale/index.ts`. The build generates a `dist` folder with the library files.
The following dependencies are externalized and not included in the bundle: `react`, `react-dom`, and `styled-components`.
To build the library, run:
```bash
npm run build
```
## License
MIT