https://github.com/structuredlabs/glyphwald
The Structured Labs design system
https://github.com/structuredlabs/glyphwald
Last synced: 9 months ago
JSON representation
The Structured Labs design system
- Host: GitHub
- URL: https://github.com/structuredlabs/glyphwald
- Owner: StructuredLabs
- Created: 2025-03-15T00:21:12.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-28T22:06:41.000Z (10 months ago)
- Last Synced: 2025-03-28T23:22:38.460Z (10 months ago)
- Language: TypeScript
- Size: 897 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Glyphwald
Glyphwald is a **React + ShadCN** UI component library designed to streamline development with **Vite**, **TypeScript**, and **Tailwind CSS**. Built and maintained by [Structured Labs](https://structuredlabs.com/) and used for designing [Preswald](https://www.preswald.com/), it provides customizable UI components for modern web applications.
## Package
[npm package](https://www.npmjs.com/package/glyphwald)
## Installation
Install Glyphwald via npm:
```sh
npm i glyphwald
```
Or with Yarn:
```sh
yarn add glyphwald
```
## Usage
Import and use components in your project:
```tsx
import { Button } from "glyphwald";
export default function App() {
return (
Click Me
);
}
```
## Tailwind CSS Setup
Glyphwald relies on **Tailwind CSS**. Ensure your project has it configured.
### If Tailwind is Missing:
1. Install Tailwind CSS:
```sh
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
2. Update `tailwind.config.js`:
```js
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@structuredlabs/glyphwald/dist/**/*.js"
],
theme: {
extend: {},
},
plugins: [],
};
```
3. Ensure `src/index.css` includes:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## Updating Glyphwald
To update Glyphwald to the latest version:
```sh
npm update glyphwald
```
# Storybook
```
npm run storybook
```