@orangesk/orange-design-system
Advanced tools
> A framework-agnostic, accessible component library built with vanilla JavaScript, CSS/SCSS, and optional React wrappers.
A framework-agnostic, accessible component library built with vanilla JavaScript, CSS/SCSS, and optional React wrappers.
Orange Design System (ODS) is a comprehensive component library designed to work outside of React as the primary use case. React is used only for documentation and templating, making ODS truly framework-agnostic.
ODS components follow a three-layer architecture:
┌─────────────────────────────────────────┐
│ Your Application │
│ (React, Vue, Angular, Vanilla JS, etc.)│
└──────────────┬──────────────────────────┘
│
├─ React Components (optional)
│ └─ .tsx wrappers
│
├─ Vanilla JavaScript (core)
│ └─ .static.ts classes
│
└─ CSS/SCSS Styles
└─ BEM naming, design tokens
Core: Vanilla JavaScript + CSS/SCSS
Optional: React wrappers for convenient React integration
Styling: CSS custom properties (design tokens) with responsive breakpoints
✅ Framework Agnostic - Use in React, Vue, Angular, or vanilla JavaScript
✅ Vanilla JavaScript Core - No framework dependencies required
✅ Accessible - WCAG compliant components with ARIA attributes
✅ Responsive - Mobile-first design with breakpoint system
✅ Themable - CSS custom properties for easy customization
✅ Type Safe - Full TypeScript support
✅ Performance Focused - Lightweight, modular bundles
✅ Well Documented - Comprehensive documentation with live previews
npm install @orangesk/orange-design-system
# or
yarn add @orangesk/orange-design-system
# or
pnpm add @orangesk/orange-design-system
import { Button } from "@orangesk/orange-design-system";
export default function App() {
return (
<Button type="primary" onClick={() => alert("Clicked!")}>
Click Me
</Button>
);
}
Interactive Components with JavaScript behavior:
import { Accordion, AccordionItem } from "@orangesk/orange-design-system";
export default function MyAccordion() {
return (
<Accordion>
<AccordionItem headingLevel={3}>
<button>Section 1</button>
<div>Content goes here</div>
</AccordionItem>
</Accordion>
);
}
The React component automatically instantiates the vanilla JavaScript class for you.
ODS components work perfectly without React:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="node_modules/@orangesk/orange-design-system/build/lib/components.css"
/>
</head>
<body>
<!-- HTML Structure -->
<div class="accordion" id="myAccordion">
<button
class="accordion__button"
data-accordion-toggle
aria-expanded="false"
aria-controls="panel-1"
>
Section 1
</button>
<div id="panel-1" hidden>Content here</div>
</div>
<!-- Instantiate JavaScript -->
<script type="module">
import Accordion from "@orangesk/orange-design-system/build/components/Accordion/Accordion.static.js";
const accordionEl = document.getElementById("myAccordion");
const accordion = new Accordion(accordionEl, {
buttonSelector: "[data-accordion-toggle]",
});
</script>
</body>
</html>
Many components are CSS-only and don't require JavaScript:
<link
rel="stylesheet"
href="node_modules/@orangesk/orange-design-system/build/lib/components.css"
/>
<!-- Button -->
<button class="button button--primary">Click Me</button>
<!-- Badge -->
<span class="badge badge--success">Active</span>
<!-- Card -->
<div class="card">
<div class="card__section">
<h3>Title</h3>
<p>Description</p>
</div>
</div>
<!-- Grid -->
<div class="grid grid--3">
<div class="grid__col">Column 1</div>
<div class="grid__col">Column 2</div>
<div class="grid__col">Column 3</div>
</div>
📖 Full documentation: https://ods2.lb.sk
Each component page includes:
<a> vs <button>, etc.# Install dependencies
npm install
# Build SCSS exports and search index
npm run build:scss-exports
npm run build:search-index
# Start development server with hot reload
npm run dev
Open http://localhost:3000 to view the documentation site.
# Build documentation and component bundles
npm run build
# Build component bundle only
npm run build:bundle
# Build megamenu bundle
npm run build:megamenu
# Build footer bundle
npm run build:footer
# Run tests
npm test
# Watch mode
# Watch mode
npm test
# Visual tests in pinned Playwright Docker image (stable rendering in CI)
npm run test:visual:docker
# Generate/update visual baselines in Docker
npm run test:visual:docker:update
# Coverage report
npm run coverage
# Run Biome lint checks
npm run lint
# Run Biome lint checks and auto-fix where possible
npm run lint:fix
# Format code with Biome
npm run format
src/
components/ # Component source files
Button/
Button.tsx # React wrapper
IconButton.tsx
styles/
style.scss
index.ts
Accordion/
Accordion.tsx # React wrapper
Accordion.static.ts # Vanilla JS class
AccordionItem.tsx
styles/
style.scss
index.ts
...
styles/ # Global styles
tokens.scss # Design tokens (CSS variables)
mixins.scss
utils/ # Shared utilities
hooks.ts # React hooks (useStatic)
keyboard.ts # Keyboard navigation
app/ # Next.js documentation site
components/ # Component docs pages
fundamentals/ # Design system docs
getting-started/ # Getting started guides
build/ # Compiled components (generated)
public/ # Static assets
package.json # Dependencies and scripts
tsconfig.json # TypeScript configuration
rollup.config.mjs # Bundle configuration
biome.json # Linting and formatting configuration
Contributions are welcome! Please read our Contributing Guidelines first.
Each component should include:
.tsx).static.ts) if interactivestyles/ directorySee CONTRIBUTING.md for detailed guidelines.
See CHANGELOG.mdx for detailed release notes, migration guides, and V1-to-V2 migration checklist.
FAQs
> A framework-agnostic, accessible component library built with vanilla JavaScript, CSS/SCSS, and optional React wrappers.
We found that @orangesk/orange-design-system demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A mini Shai-Hulud campaign compromised Red Hat Cloud Services npm packages to steal developer and CI/CD secrets during installation.
Research
/Security News
The North Korean malware loader hides in a Packagist-listed package and its GitHub branch to fetch and execute remote code in a likely Contagious Interview-style lure.
Security News
The Rust project is moving toward formal rules on LLM use in contributions after months of internal debate over maintainer burden, code quality, and contributor experience.