A React-based UI library. Built with TypeScript, Tailwind CSS, and shadcn/ui components. Check out the Storybook for documentation.
To install it in your project:
pnpm i @metaversal.gg/ui-libraryAs this project uses Tailwind CSS, you will need to configure your project to scan the library's files for Tailwind classes.
In tailwind.config.js, add the following:
module.exports = {
content: ["./node_modules/@metaversal.gg/ui-library/dist/**/*.js"],
};- Modern and accessible UI components
- Built with TypeScript
- Tailwind CSS for styling
- Storybook for documentation and development
- ESLint and Prettier for code quality
- Vite for fast development and building.
- Node.js >= v18
- pnpm >= v8
pnpm installTo start the development server, run:
pnpm storybookThis will start Storybook on port 6006, where you can view and interact with all components.
pnpm buildThe package is publicly available on GitHub Packages. You can install it directly with:
pnpm i @metaversal.gg/ui-libraryimport { EmptyStateAnimation } from "@metaversal.gg/ui-library";
function MyComponent() {
return <EmptyStateAnimation />;
}Important: When pushing to the main branch, you must update the package version.
To update the version:
# For bug fixes and patch updates
pnpm version patch
# For new features (backwards compatible)
pnpm version minor
# For breaking changes
pnpm version majorThis command will:
- Update the version in package.json
- Create a git tag for the new version
- Commit the changes
After running the version command, push both the commit and the tags:
git push && git push --tagsThe GitHub Actions workflow will then build and publish your updated package to GitHub Packages.
When adding a new component:
- Open an issue in the repository with the name of the component. Example:
Add Button component - Include:
- Component name and purpose
- Expected behaviors and variants
- Props and API design
- Visual mockups or design references (if available)
.
├── public # public assets, eg: fonts & images
├── src
│ ├── components # components folder
│ │ ├── svg # svg components
│ │ └── ui # shadcn components only
│ ├── lib # utility and other functions
│ ├── stories # storybook stories
│ └── types # type interfaces and types
When adding a new component, import it and then export it in the src/components/index.ts file.
When adding new type definitions, add them to the src/types/index.d.ts file.
-
TypeScript and Typing:
- Use TypeScript interfaces for props
- Export types for consumers
- Avoid using
anyand use proper type constraints
-
Accessibility:
- Follow WAI-ARIA practices
- Include proper ARIA attributes
- Ensure keyboard navigation support
-
Styling:
- Use Tailwind CSS for styling
- Ensure responsiveness across breakpoints
-
Best Practices:
- Keep components focused on a single responsibility
- Implement proper prop validation
- Prefer functional components with hooks
- Basic usage example
- Variants showcase
- Interactive controls for all props
- Dark mode example when applicable
- Responsive behavior demonstrations
- Accessibility status and notes
// Example Breadcrumbs.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import Breadcrumbs from "@/components/Breadcrumbs";
const meta = {
title: "Components/Breadcrumbs",
component: Breadcrumbs,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
argTypes: {
className: {
control: "text",
description: "Additional CSS classes to add to the component",
},
},
args: {},
} satisfies Meta<typeof Breadcrumbs>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
breadcrumbs: [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
};