WDS v1.0 will be coming 🎉 Read the Latest Release notes

Features

• Steady Components. Frequently used Components based on the Atomic Design Pattern.
• Storybook. You can explore the components in Storybook.

Getting Started

1. Install

yarn add @wishket/design-system

or

npm install @wishket/design-system

or

pnpm add @wishket/design-system

2. Setting in tailwind.config.ts

// tailwind.config.ts
import path from 'path';
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    path.join(path.dirname(require.resolve('@wishket/design-system')), '**/*.{js,ts,jsx,tsx,mdx}'),
  ],
  presets: [require('@wishket/design-system/dist/config/tailwind.config')],
  plugins: [],
};
export default config;

Usage

//Home.tsx
import { Typography } from '@wishket/design-system';

export const Home  = () => {
  return (
      <Typography variant="title1" className='bg-w-cyan-500'>Hello, World!</Typography>
  );
}

export default Home;