CatUI Design System

Getting Started

tutorial

npx install catui-design

yarn add catui-design

pnpm add catui-design

Storybook

two way options for create a component, using component for export or just exporting an object type Story

• tsx

import { Skeleton } from 'Skeleton';

export const Main = ({ size }) => {
  return <Skeleton size={size} />;
};

Main.args = {
  /** props */
  size: 'lg',
};

• simple

import type { Meta, StoryObj } from '@storybook/react';

import { Skeleton } from 'Skeleton';

const meta = {
  title: 'Example/Skeleton',
  component: Skeleton,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    /** args Types */
  },
} satisfies Meta<typeof Skeleton>;

type Story = StoryObj<typeof meta>;

export const Main: Story = {
  args: {
    variant: 'normal',
    size: 'md',
    role: 'info',
    children: 'Main Skeleton',
  },
};