Loading repository data…
mateusvillain / repository
A fluid and multi-brand design system for web projects.
Let's UI is a multi-brand design system built around a token-first approach. Design tokens are defined in JSON and compiled by Terrazzo into CSS custom properties and a Sass variables map, supporting light/dark themes and multiple brands via data-theme and data-brand attributes.
The system ships three publishable packages:
| Package | Description |
|---|---|
@lets-ui/tokens | CSS custom properties and SCSS variables |
@lets-ui/styles | Component styles compiled to letsui.min.css |
@lets-ui/components | Vanilla JS Web Components (custom elements) |
A complete Figma library and interactive Storybook are available alongside the code.
Install only what you need:
# CSS styles only
npm install @lets-ui/styles
# CSS + Web Components
npm install @lets-ui/styles @lets-ui/components
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lets-ui/styles@latest/dist/letsui.min.css" />
@import '@lets-ui/styles';
Or in HTML:
<link rel="stylesheet" href="node_modules/@lets-ui/styles/dist/letsui.min.css" />
Import all components at once:
import '@lets-ui/components';
Or import only what you use (tree-shakeable):
import '@lets-ui/components/button';
import '@lets-ui/components/modal';
import '@lets-ui/components/input';
Then use the custom elements directly in HTML:
<ui-button variant="primary">Click me</ui-button>
<ui-input label="Email" type="email"></ui-input>
<ui-modal trigger="open-btn">...</ui-modal>
Apply a theme and brand via data attributes:
<html data-theme="dark" data-brand="brand-name">
git clone https://github.com/mateusvillain/lets-ui.git
cd lets-ui
pnpm install
pnpm build # build all packages
pnpm storybook # start Storybook on port 6006
pnpm lint # lint CSS/SCSS and Markdown
Contributions are welcome. Please open an issue before submitting large changes.
This project uses Conventional Commits and Changesets for versioning. Every PR that touches a published package must include a changeset:
pnpm changeset
See .changeset/README.md for the full release flow.
MIT — free to use, modify, and distribute.
Selected from shared topics, language and repository description—not editorial ratings.
Eshbanoliver /
A high-end, modern, and interactive web application designed for a premium flooring solutions provider. This showcase website emphasizes visual excellence through glassmorphism, fluid animations, and a rich, curated design system.
Eshbanoliver /
A high-end, modern, and interactive web application designed for a premium flooring solutions provider. This showcase website emphasizes visual excellence through glassmorphism, fluid animations, and a rich, curated design system.