Wishket Design System

Wishket Design System (WDS) is the design concept system for Wishket products.

Features

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

Getting Started

1. Install

Choose according to your environment.

yarn add @wishket/design-system

npm install @wishket/design-system

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/dist')],
  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;