@contentstudio/ui v0.1.52

ContentStudio Design System

Welcome to the ContentStudio Design System, a collection of reusable components built with Vue.js, TypeScript, and Tailwind CSS. This design system is designed to provide a consistent and flexible foundation for building modern web applications.

Installation

To get started with the design system, follow these steps:

1. Install dependencies using pnpm:

pnpm install

2. Start the development environment:

# Watch for changes and rebuild
pnpm build:watch

# Run documentation site
pnpm dev:docs

Usage

Import the components you need in your Vue.js application:

import { Button } from '@contentstudio/ui';

Components

• Button: A versatile button component that supports various styles, sizes, and states.
• Input: A customizable input field component.
• Select: A dropdown select component.
• Checkbox: A simple checkbox component.
• Radio: A radio button component.

Utilities

The design system provides several utility modules to help maintain consistency across your application:

• Colors: Color palette and theme management utilities
• Forms: Form-related utilities for handling inputs and validation
• Position: Utilities for handling element positioning
• Radius: Border radius presets and utilities
• Sizes: Size-related utilities and constants
• States: Component state management utilities

For detailed documentation on each utility, refer to the Utilities Documentation.

Missing Components Checklist

To enhance the design system, consider adding the following components:

• Modal: A component for displaying modals and dialogs.
• Tooltip: A component for displaying tooltips on hover or focus.
• Accordion: A collapsible panel component.
• Tabs: A tabbed navigation component.
• Slider: A component for selecting a value from a range.
• Date Picker: A component for selecting dates.
• Avatar: A component for displaying user avatars.
• Breadcrumbs: A component for displaying navigation breadcrumbs.
• Pagination: A component for navigating through paginated content.

Contributing

Contributions are welcome! Please read the contributing guidelines before making a contribution.

License

This project is licensed under the MIT License. See the LICENSE file for more information.