Tailwind Polaris

Tailwind Polaris is a Tailwind CSS implementation of the Shopify Polaris design system. It provides a comprehensive set of components and utilities to build modern, accessible, and responsive user interfaces with ease.

Notice Board

🚀 Finally Stable

• Version 0.8.0 is the first usable stable release of Tailwind Polaris.
• We will continue to adhere to Semantic Versioning for all updates.

⚠️ Important Notes

• Breaking Changes in v0.5.0: If you are upgrading from v0.4.2 or earlier, note that class names have been camelCased to resolve internal conflicts.
• Work in Progress: New components are still under development
• Storybook: Check out the latest Storybook for live examples and documentation: Tailwind Polaris Storybook.

🔗 Links

| Resource | Status | | ------------------------------------------------------------------------- | ---------------------- | | Tailwind Polaris Storybook | ✅ Recommended | | Tailwind Polaris Website | 🚧 Development On Hold | | Tailwind Polaris NPM | 📦 Available |

💬 T.W.Polaris GPT

This is a custom GPT, built using OpenAI's ChatGPT, designed to provide comprehensive information about Tailwind Polaris and generate UI blocks. I am continuously working to enhance its capabilities. You can explore it here:

📦 Installation

Prerequisites

Ensure you have installed Tailwind CSS (version <=3.4.17) before proceeding.

npm install tailwindcss-animate

npm install @dtewary/tw-polaris

⚙️ Tailwind Configuration

Add the following configuration to your tailwind.config.js file:

import { themes, twExtract } from '@dtewary/tw-polaris';

export default {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/@dtewary/tw-polaris/dist/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                ...twExtract.transformColorClasses(twExtract.reformattedColors(themes.light.color)),
            },
            zIndex: {
                ...themes.light.zIndex,
            },
            borderRadius: twExtract.borderRadius(themes.light.border),
            borderWidth: twExtract.borderWidth(themes.light.border),
            boxShadow: {
                ...themes.light.shadow,
            },
            fontSize: twExtract.fontSizes(themes.light.font),
            fontWeight: twExtract.fontWeights(themes.light.font),
            letterSpacing: twExtract.fontLetterSpacings(themes.light.font),
            lineHeight: twExtract.fontLineHeights(themes.light.font),
            spacing: {
                ...themes.light.space,
            },
            keyframes: {
                'accordion-down': {
                    from: { height: '0' },
                    to: { height: 'var(--radix-accordion-content-height)' },
                },
                'accordion-up': {
                    from: { height: 'var(--radix-accordion-content-height)' },
                    to: { height: '0' },
                },
                'collapsible-down': {
                    from: { height: '0' },
                    to: { height: 'var(--radix-collapsible-content-height)' },
                },
                'collapsible-up': {
                    from: { height: 'var(--radix-collapsible-content-height)' },
                    to: { height: '0' },
                },
                overlayShow: {
                    from: { opacity: '0' },
                    to: { opacity: '1' },
                },
                contentShow: {
                    from: {
                        opacity: '0',
                        transform: 'translate(-50%, -48%) scale(0.96)',
                    },
                    to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
                },
            },
            animation: {
                'accordion-down': 'accordion-down 0.2s ease-out',
                'accordion-up': 'accordion-up 0.2s ease-out',
                'collapsible-down': 'collapsible-down 0.2s ease-out',
                'collapsible-up': 'collapsible-up 0.2s ease-out',
                overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
                contentShow: 'contentShow 300ms cubic-bezier(0.16, 1, 0.3, 1)',
            },
        },
    },
    plugins: [require('tailwindcss-animate')],
};

🌐 Global Styles

Add the following global styles to your CSS file:

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Inter', serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@layer base {
    body {
        @apply antialiased bg-colorBg text-onBackground;
    }
}

@layer components {
    .scrollbar-hide::-webkit-scrollbar {
        scrollbar-width: none;
        display: none;
    }
    .drop-shadow-toast {
        filter: drop-shadow(2px 3px 10px rgba(24, 23, 23, 0.32));
    }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

🔥 Toast Setup

To use the Toast component, wrap your app with the ToastProvider and use the useToast hook to trigger toasts.

import { ToastProvider, useToast } from '@dtewary/tw-polaris';

// Wrap your app with ToastProvider
<ToastProvider position="top-right">
    <App />
</ToastProvider>;

// Use the useToast hook to show a toast
const { addToast } = useToast();
addToast(
    'Description', // normal string or JSX
    'info', // type
    {
        // optional action button
        text: 'Action',
        onClick: () => {
            console.log('Action Clicked');
        },
    },
);

// View the Storybook for more examples

📚 Components

| Component Name | Description | | ------------------ | ------------------------------------------------------------- | | Button | A customizable button component. | | Creation Card | A card component for creating items. | | Alert Dialog | A dialog for displaying alerts. | | Button Group | A group of buttons for related actions. | | Checkbox | A checkbox input component. | | Select (Legacy) | A dropdown select component. (Not Radix) | | Tooltip (Legacy) | A tooltip for displaying additional information. (Not Radix) | | Inline Message | A message displayed inline with content. | | Toast | A toast notification component. | | TextField | A text input field component including multiline. | | Popover | A popover for displaying additional content. | | Table | A table for displaying tabular data. | | Calendar | A calendar component for date selection. | | Resizable | A resizable container component. | | Aspect Ratio | A component for maintaining aspect ratios. | | Avatar | A component for displaying user avatars. | | Dropdown Menu | A dropdown menu for navigation or actions. (Radix) | | Radix Select | A select component using Radix UI. (Radix) | | Banner | A banner for displaying important messages. | | Radio Group | A group of radio buttons. (Radix) | | Form | A form component for user input. (Radix) | | Accordion | An accordion for collapsible content. (Radix) | | Dialog | A dialog for modal interactions. (Radix) | | Nav Item | A navigation item for building sidebar. | | Badge | A badge for displaying status or counts. | | Collapsible | A collapsible section for hiding/showing content. (Radix) | | Label | A label for form inputs. | | Tabs | A tabbed navigation component. (Radix) | | Card | A card component for displaying grouped content. | | Radix Tooltip | A tooltip component using Radix UI. (Radix) | | Switch | A toggle switch component. (Radix) | | Sheet | A sheet component for side panels or overlays. (Radix Dialog) |

Related

If you want to contribute to the project, please submit this form here