Components

45+ UI components built with Radix UI and styled with Tailwind. All components support dark mode and follow Finitless brand guidelines.

Button Variants

Important: Only use ONE CTA button per page.

The CTA gradient button is reserved for the primary action (hero, form submit). Use Primary (Finitless Blue) for standard actions.

Button Sizes

Button States

Button Shapes

Usage

import { Button, CTAButton } from '@finitless/design-system';

// Standard action
<Button variant="primary">Save Changes</Button>

// Primary CTA (only one per page!)
<CTAButton size="lg">Get Started Free</CTAButton>

// With loading state
<Button isLoading>Submitting...</Button>

// With icon
<Button prefixIcon={<Plus />}>Add Item</Button>