internal-ds01

v1.0.9

Published

18 days ago

Subframe UI components and theme for Sampath Internal Design System

0High
0Medium
0Low

pmgpathum

subframe ui components tailwind design-system

internal-ds01

Subframe UI components and theme for Sampath Internal Design System.

Installation

npm install internal-ds01

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom tailwindcss@^4.0.0 @subframe/core

Quick Start

Step 1: Load Fonts in HTML

Add the font link to your layout's <head> (e.g., app/layout.tsx in Next.js):

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
  <link 
    href="https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;500;600;700;800;900&display=swap" 
    rel="stylesheet" 
  />
</head>

Step 2: Import CSS

In your main CSS file (typically app/globals.css, styles.css, or index.css):

@import "tailwindcss";
@import "internal-ds01/setup.css";
@source "../../node_modules/internal-ds01/ui/**";

What setup.css includes:

CSS variable --font-rethink-sans for font family (fonts must be loaded via HTML <head>)
Complete theme configuration from theme.css

Important Notes:

Fonts should be loaded via HTML <link> tags, not CSS @import (to avoid CSS parsing issues)
The @import "internal-ds01/setup.css" line loads the CSS variable and theme
The @source directive tells Tailwind to scan the component files for class names
Adjust the relative path in @source based on your project structure

Advanced Setup

If you need more control over font and theme loading, you can import them separately:

Option 1: Separate Font and Theme Imports

@import "tailwindcss";
@import "internal-ds01/fonts.css";
@import "internal-ds01/theme.css";
@source "../../node_modules/internal-ds01/ui/**";

Option 2: Theme Only (if fonts are already loaded)

@import "tailwindcss";
@import "internal-ds01/theme.css";
@source "../../node_modules/internal-ds01/ui/**";

Available CSS exports:

internal-ds01/setup.css - Complete setup (CSS variable + theme) - Recommended
internal-ds01/fonts.css - CSS variable only (fonts must be loaded via HTML <head>)
internal-ds01/theme.css - Theme variables only

PostCSS Configuration

Ensure your postcss.config.mjs includes the Tailwind CSS PostCSS plugin:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Theme Customization

Preventing Theme Conflicts

⚠️ Important: To prevent theme conflicts, only import ONE theme file:

✅ Recommended: Use setup.css (includes CSS variable + theme)
✅ Alternative: Use fonts.css + theme.css separately
⚠️ Remember: Always load fonts via HTML <head> tags, not CSS @import
❌ Avoid: Importing multiple @theme blocks or importing theme.css multiple times

The @theme directive in Tailwind CSS v4 creates a single theme configuration. Importing multiple @theme blocks can cause conflicts where later imports override earlier ones unpredictably.

Customizing Theme Variables

To customize the theme, you can override CSS variables in your own CSS file after importing the theme:

@import "tailwindcss";
@import "internal-ds01/setup.css";
@source "../../node_modules/internal-ds01/ui/**";

/* Override theme variables */
@theme {
  --color-brand-primary: rgb(59, 130, 246); /* Your custom color */
}

Note: When overriding theme variables, ensure you only have one @theme block in your CSS file to avoid conflicts.

Using Components

Import components from the package:

import { Button, TextField, Alert } from "internal-ds01";

function MyComponent() {
  return (
    <div>
      <TextField label="Name" placeholder="Enter your name" />
      <Button variant="brand-primary">Submit</Button>
    </div>
  );
}

Component Source Files for Tailwind

For Tailwind CSS v4 to properly detect all utility classes used in the components, make sure your @source directive includes the package component files. The @source directive in step 1 should handle this, but if you need to customize it:

@source "../../node_modules/internal-ds01/ui/components/**/*.{ts,tsx}";

Troubleshooting

Theme Colors Not Applying

If theme colors are not applying correctly:

Verify theme.css import: Make sure @import "internal-ds01/theme.css" is in your main CSS file
Check @source directive: Ensure the @source directive includes the package component paths
Verify Tailwind v4: Make sure you're using Tailwind CSS v4 (tailwindcss@^4.0.0)
Check PostCSS config: Ensure @tailwindcss/postcss plugin is configured

Components Not Styled Correctly

If components render but don't have the correct styles:

Check @source directive: Tailwind needs to scan component files to generate CSS for the classes used
Verify imports: Make sure you're importing components correctly
Check build process: Ensure your build process includes CSS processing

Build Errors

If you encounter build errors:

Check peer dependencies: Ensure all peer dependencies are installed
TypeScript types: The package includes TypeScript definitions in dist/index.d.ts
Module resolution: Ensure your bundler can resolve the package exports correctly

Available Components

Accordion
Alert
Avatar
Badge
Button
Calendar
Checkbox
Dialog
Drawer
DropdownMenu
Select
TextField
TextArea
Toast
Tooltip
And more...

See the Subframe documentation for component usage and props.

The theme is defined in theme.css and includes:

Color palettes (brand, neutral, error, warning, success)
Typography scales
Spacing utilities
Border radius values
Box shadows
Container utilities

See the Theme Customization section above for details on customizing the theme.

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

internal-ds01

Installation

Peer Dependencies

Quick Start

Step 1: Load Fonts in HTML

Step 2: Import CSS

Advanced Setup

Option 1: Separate Font and Theme Imports

Option 2: Theme Only (if fonts are already loaded)

PostCSS Configuration

Theme Customization

Preventing Theme Conflicts

Customizing Theme Variables

Using Components

Component Source Files for Tailwind

Troubleshooting

Theme Colors Not Applying

Components Not Styled Correctly

Build Errors

Available Components

License