UI Components

Shared UI component library

UI Components

The UI package (@mindware-blog/ui) provides shared React components using Radix UI and Tailwind CSS.

Available Components

ComponentDescriptionPrimitives
ButtonAccessible button-
CardContent container-
DialogModal dialogsRadix Dialog
InputForm input-
SelectDropdown selectRadix Select
TabsTab navigationRadix Tabs
ToastNotificationsRadix Toast

Usage

import { Button, Card } from '@mindware-blog/ui'

export function Example() {
  return (
    <Card>
      <h2>Card Title</h2>
      <p>Card content</p>
      <Button variant="primary" size="lg">
        Click Me
      </Button>
    </Card>
  )
}

Component Examples

See Package System for detailed component documentation and examples.

Customization

Components use Tailwind CSS and can be customized via theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#your-color',
      },
    },
  },
}

Next Steps