@designervoid/ton-design-system NPM

TON Design System

TDS Wiki

Home
Quick start
dotlottie
yanot-charts ton-connect

TDS Highlights

Advantages of TailwindCSS
TailwindCSS offers flexibility and scalability with its utility-first approach.
It allows for fast, customizable UI development without imposing design constraints.
Awesome DX (Developer Experience)
TailwindCSS improves developer experience by offering instant feedback, comprehensive documentation, and tools like rsbuild for optimized development workflows.
Atomic CSS
TailwindCSS automates the generation of atomic classes, where each class does one specific thing, ensuring small, reusable, and predictable CSS.
Design Tokens
Design tokens provide a system for values like colors, typography, and spacing.
The example includes the golden ratio for generating dynamic spacing, font sizes, and more, ensuring design consistency across the app.
Lightweight
TailwindCSS is lightweight, especially with tools like patterns-vanjs, which offer a lean, production-ready solution for creating fast and optimized products.
Ready to go patterns
A folder (registry/patterns) with pre-built, customizable UI patterns, enabling quick prototyping and reusable components for rapid development.
Checkout patterns.
CLI
You can copy projects and components from the registry with the CLI. See TDS Wiki Quick Start.

Usage

Atomic Components using Declarative components with Raw Framework

import { tags } from './package/raw'

const { div, button } = tags;

export const Button = () => {
  return (
    div(
      { className='px-2 py-2 h-full flex' }, 
      button(
        { class: "custom-classname", variant="default" }, 
        'Cross-platform button (default)'
      )
    );
};