React component library for SQLI applications built with Radix UI, CVA, and Tailwind CSS 4.
Current version: 0.12.0-alpha - View Changelog
| Layer | Technology |
|---|---|
| Components | React 19 + TypeScript |
| Primitives | Radix UI |
| Variants | class-variance-authority (CVA) |
| Styling | Tailwind CSS 4 + CSS variables |
| Build | tsup (ESM + CJS + .d.ts) |
| Storybook | @storybook/react-vite |
Install directly from GitLab Paris:
# Latest version (main branch)
npm install git+https://gitlab-paris.sqli.com/SQLI/elevate-design-system.git
# Specific version tag
npm install git+https://gitlab-paris.sqli.com/SQLI/elevate-design-system.git#v1.0.0
# Development branch
npm install git+https://gitlab-paris.sqli.com/SQLI/elevate-design-system.git#devimport { Button, Card, CardBody, Alert } from '@sqli/elevate-design-system';
import '@sqli/elevate-design-system/css';
function App() {
return (
<div data-theme="sqli-light">
<Button variant="primary">Hello World</Button>
</div>
);
}/* In your main CSS file */
@import '@sqli/elevate-design-system/dist/sqli-design-system.css';
@import '@sqli/elevate-design-system/dist/fonts.css';<html data-theme="sqli-light">
<button class="btn btn-primary">Hello World</button>
</html>If published to GitLab npm registry:
npm install @sqli/elevate-design-system| File | Description | Size |
|---|---|---|
dist/index.js |
ESM React components | - |
dist/index.cjs |
CJS React components | - |
dist/index.d.ts |
TypeScript declarations | - |
dist/sqli-design-system.css |
Full CSS (readable) | ~267 KB |
dist/sqli-design-system.min.css |
Minified CSS (production) | ~198 KB |
dist/tokens.css |
CSS variables only | ~3 KB |
dist/fonts.css |
@font-face declarations | ~2 KB |
dist/fonts/ |
TWK Everett font files | - |
dist/logos/ |
SQLI logos (SVG & PNG) | - |
src/tailwind/preset.js |
Tailwind CSS preset | - |
25 React components with TypeScript types and CVA variants:
import { Button, Badge, Alert, Dialog, DialogTrigger, DialogContent } from '@sqli/elevate-design-system';
<Button variant="primary" size="lg">Action</Button>
<Badge variant="secondary">New</Badge>
<Alert variant="info">Information</Alert>12 Radix UI primitives for accessible interactive components: Dialog, Accordion, Tabs, Select, Checkbox, RadioGroup, Switch, Slider, DropdownMenu, Tooltip, Toast, Label.
| Theme | Background | Primary | Usage |
|---|---|---|---|
sqli-light |
Cream | Cobalt | Default |
sqli-dark |
Midnight | Sky | Dark mode |
import { ElevateTheme, useTheme } from '@sqli/elevate-design-system';
<ElevateTheme defaultTheme="sqli-light">
<App />
</ElevateTheme>Or use the data-theme attribute directly:
document.documentElement.setAttribute('data-theme', 'sqli-dark');| Color | Hex | Usage |
|---|---|---|
| Cream | #FFFAF0 |
Light background |
| Midnight | #0F0E2B |
Dark background |
| Cobalt | #1F24E9 |
Primary (light) |
| Sky | #6DA5FF |
Primary (dark) |
npm run dev # Storybook + CSS watch
npm run build # Build all assets (components + CSS + fonts + logos)
npm run build:components # Build React components only (tsup)
npm run storybook # Launch Storybook
npm run typecheck # TypeScript type checking- Node.js >= 22
- npm >= 9
Full documentation available in Storybook:
- Getting Started - 5-minute quick start
- Installation Guide - Git repository, frameworks
- Design Tokens - CSS variables
- Component Index - All 25 React components
- Sommaire
- Distinctive Assets - Logo, Ascenders, Typeface, Couleurs, Promise, Icons
- Usage Guide - Safe zone, placement, couleurs, don'ts
- Tone of Voice - Professionally Human, vocabulaire, copywriting
- Accessibility - WCAG 2.1 AAA, guides couleurs
Proprietary SQLI - Internal use only.
- Repository: https://gitlab-paris.sqli.com/SQLI/elevate-design-system
- Brand Guidelines: See SQLI-BRAND-REFERENCE.md