https://github.com/rustlanges/design-system-components
The brand design system for RustLangES
https://github.com/rustlanges/design-system-components
design-system leptos react rust
Last synced: 9 months ago
JSON representation
The brand design system for RustLangES
- Host: GitHub
- URL: https://github.com/rustlanges/design-system-components
- Owner: RustLangES
- License: mit
- Created: 2025-05-31T18:15:36.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-07-16T04:06:17.000Z (9 months ago)
- Last Synced: 2025-07-17T05:41:02.698Z (9 months ago)
- Topics: design-system, leptos, react, rust
- Language: TypeScript
- Homepage:
- Size: 999 KB
- Stars: 6
- Watchers: 0
- Forks: 6
- Open Issues: 84
-
Metadata Files:
- Readme: README.EN.md
- Contributing: CONTRIBUTING.EN.md
- License: LICENSE
Awesome Lists containing this project
README
## :rocket: Introduction
The RustLangES Design System serves as the single source of truth for UI components across Spanish Rust community projects. It provides accessible, consistent, and high-quality components for multiple technologies.
## :package: Installation
```bash
# For React projects
pnpm add @rustlanges/react
# For Leptos projects (Rust)
cargo add rustlanges-leptos
```
## :sparkles: Key Features
- **Multi-framework**: Support for React, Leptos, and more
- **Light/dark mode**: Automatic system theme compatibility
- **Accessibility**: WCAG 2.1 AA compliant components
- **Design system**: Based on [Figma](https://www.figma.com/design/S9yCZSaZ9q54XSojWNhJft/Rust-Lang-ES)
## :building_construction: Project Structure
```
.
├── crates/ # Rust components
└── js/ # JavaScript components
```
## :art: Component Usage
### React
```tsx
import { Button, TelegramIcon } from "@rustlanges/react";
function App() {
return (
}
label="Send"
/>
);
}
```
### Leptos
```rust
use rustlanges_leptos::components::Button;
view! {
"Hello Rust!"
}
```
## :paintbrush: Design System
All components follow specifications from our [official Figma](https://www.figma.com/design/S9yCZSaZ9q54XSojWNhJft/Rust-Lang-ES):
- :triangular_ruler: [Design Guidelines](https://www.figma.com/file/S9yCZSaZ9q54XSojWNhJft/Rust-Lang-ES?node-id=0%3A1)
- :art: [Color Palette](https://www.figma.com/file/S9yCZSaZ9q54XSojWNhJft/Rust-Lang-ES?node-id=1%3A2)
- :pencil2: [Iconography](https://www.figma.com/file/S9yCZSaZ9q54XSojWNhJft/Rust-Lang-ES?node-id=24-117)
## :hammer_and_wrench: Development
1. Clone the repository:
```bash
git clone https://github.com/RustLangES/design-system-components.git
cd design-system-components
```
2. Install dependencies:
```bash
pnpm install
```
3. Start the development environment:
```bash
pnpm run dev
```
## :handshake: Contributing
Follow our [contribution guide](CONTRIBUTING.EN.md) to:
- :new: Add new components
- :bug: Report issues
- :sparkles: Suggest improvements
**Important**: All components must:
1. Follow Figma specifications
2. Pass accessibility tests
3. Include documentation
## :page_facing_up: License
This project is licensed under the **MIT License** - see the [LICENSE](./LICENSE) file for details.
---
Part of the RustLangES ecosystem