Configuration
Customize and configure shuip components to fit your needs and design system.
Component Customization
shuip components are designed to be easily customizable. Each component accepts all the standard props of its base component, along with some specific ones.
Method 1: Props and className
The simplest way to customize a component:
import { SubmitButton } from '@/components/ui/shuip/submit-button'
<SubmitButton
label="Send"
className="bg-blue-600 hover:bg-blue-700"
size="lg"
loading={isLoading}
/>Method 2: Editing the Source Code
Since the components are copied directly into your project, you can freely modify them:
// src/components/ui/shuip/submit-button.tsx
export function SubmitButton({
onClick,
label,
disabled,
loading,
icon = <MyCustomIcon className='mr-2 size-4 animate-spin' />,
...props
}: SubmitButtonProps) {
return (
<Button
type='submit'
variant='default'
className='w-full bg-primary hover:bg-primary/90'
disabled={disabled || loading}
{...props}
{...(onClick && { onClick })}
>
{loading && icon}
{label}
</Button>
);
}