A design system library for React.js and Next.js with TailwindCSS v4 by Soongle
npm install soongle-uibash
npm
npm install soongle-ui
yarn
yarn add soongle-ui
pnpm
pnpm add soongle-ui
`
🛠️ Setup Guide
To ensure components are styled correctly, follow the setup guide based on your project configuration.
$3
If you are not using Tailwind CSS in your project, import the pre-compiled stylesheet in your root entry file:
`tsx
// For Next.js (app/layout.tsx) or Vite (src/main.tsx)
import 'soongle-ui/styles.css';
`
$3
If your project already uses Tailwind CSS, do not import soongle-ui/styles.css. Instead, include the library in your Tailwind configuration to leverage shared theme tokens and avoid duplicate styles.
#### For Tailwind CSS v4
Tailwind v4 scans your modules automatically. Simply ensure your root CSS file includes the @source directive:
`css
@import "tailwindcss";
@source "../node_modules/soongle-ui";
`
#### For Tailwind CSS v3 (tailwind.config.ts)
Add the library path to your content array:
`ts
export default {
content: [
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/soongle-ui/dist/*/.{js,ts,jsx,tsx}",
],
// ...
};
`
📖 Component Usage
$3
The Text component supports various sizes, weights, and colors derived from Tailwind defaults.
`tsx
import { Text } from 'soongle-ui';
function Example() {
return (
Modern UI with Soongle
Build beautiful interfaces faster with pre-styled components.
);
}
`
🏗️ Roadmap
| Component | Status | Description |
| :--- | :---: | :--- |
| Button | ✅ | Primary, Secondary, and Ghost variants with loading states. |
| Text | ✅ | Semantic typography with full Tailwind utility support. |
| Input | ⏳ | Accessible form inputs and validations. |
| Card | ⏳ | Flexible container for diverse content layouts. |
🧩 Requirements
- React: ^18.0.0 or ^19.0.0
- Tailwind CSS: v4.x recommended (compatible with v3.x`)