Configuration

Installation

1. Clone the repository

   git clone https://github.com/plvo/shuip.git 
   cd shuip

   Copy

2. Install dependencies

   bun install

   Copy

3. Create a branch for your changes

   git checkout -b feat/my-component

   Copy

4. Start the development server

   bun run dev

   Copy

Add a component

File structure

Each shuip component follows this structure:

├── registry/
│   ├── ui/
│   │   └── my-component.tsx          	# Implementation of the component
│   └── examples/
│       └── my-component.tsx          	# Base example
│       └── my-component.with-state.tsx # Example with the title "With state"
│       └── my-component.disabled.tsx 	# Example with the title "Disabled"
├── docs/components/
│       └── my-component.mdx          	# Documentation of the component
└── registry.json                  		# Registry configuration

Detailed steps

1. Create your component in registry/ui/
2. Create at least one example in registry/examples/ (with the same name as the component file)
3. Generate and build the registry files

   bun run registry:generate # Generates the registry/__index__.tsx file
   bun run registry:build # Generates the JSONs in public/r/*

   Copy
4. Create the component documentation in content/components/

   ---
   title: My Component
   description: Description of the component
   group: shortcut
   ---
   
   <ItemHeader filename={'my-component'} />
   
   # ...
   
   <ItemFooter itemName={'my-component'} props={[
      {
        name: 'label',
        type: 'string',
        description: 'The label of the component',
      },
   ]} />
   
   

   Copy

Submit your contribution

Create a Pull Request

git add .
git commit -m "feat: new component my-component"
git push origin feat/my-component

Thank you for your contribution to shuip! 🚀