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 and used for designing Preswald, it provides customizable UI components for modern web applications.

Package

npm package

Installation

Install Glyphwald via npm:

npm i glyphwald

Or with Yarn:

yarn add glyphwald

Usage

Import and use components in your project:

import { Button } from "glyphwald";

export default function App() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <Button variant="default" size="lg">Click Me</Button>
    </div>
  );
}

Tailwind CSS Setup

Glyphwald relies on Tailwind CSS. Ensure your project has it configured.

If Tailwind is Missing:

1. Install Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

2. Update tailwind.config.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:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Updating Glyphwald

To update Glyphwald to the latest version:

npm update glyphwald

Storybook

npm run storybook