website·Indexed 32 days ago
https://deskblocks.mohanvadivel.comA comprehensive design system and component library featuring a wide array of UI elements including inputs, data displays, and layout components. It includes detailed guidelines on typography, color management via Semantic Color Tokens, and design principles aligned with WCAG 2.2.
Note component highlights contextual information, confirmations, and warnings within a page. It uses role="status" for accessibility, ensuring updates are announced without interrupting the user.<script>
import { Note } from 'deskblocks';
</script>
<Note>This ticket is linked to an open problem ticket #4521.</Note>Rating component renders a read-only score. It supports three visual variants: stars (default), thumbs (for helpful/like counts), and votes (for upvote counts). The component is read-only and does not emit events.<script>
import { Rating } from 'deskblocks';
</script>
<!-- Default star rating -->
<Rating label="Customer happiness" value={4} />
<!-- Thumbs variant for helpful counts -->
<Rating label="Helpful replies" variant="thumbs" value={128} />
<!-- Votes variant for upvote counts -->
<Rating label="Feature request votes" variant="votes" value={342} />Spinner component provides immediate visual feedback to users by indicating ongoing activity, such as loading or processing data.<Spinner />IconButton is a compact, square button used for common actions where an icon alone communicates the intent. To use it, pass an Icon component as the child content of the IconButton.<script>
import { IconButton, Icon } from 'deskblocks';
import { IconEdit } from 'deskblocks/icons';
</script>
<IconButton>
<Icon icon={IconEdit} color="--db-color-text-onbrand" />
</IconButton>Timer component counts down to a specified deadline. When the deadline is reached, it automatically switches to an 'overdue' state, displaying the elapsed time since the deadline and applying a danger color. If the deadline is empty or invalid, a dash placeholder is displayed.<script>
import { Timer } from 'deskblocks';
// Example: Deadline set to 6.4 hours from now
const inSixHours = Date.now() + 6.4 * 60 * 60 * 1000;
</script>
<Timer label="Respond by" deadline={inSixHours} />Timeline component renders a list of events in the order they are provided. It automatically groups consecutive items that share the same day value under a single heading. Note that the component does not perform date sorting or formatting; the day and time strings must be pre-formatted in the application logic.<script>
import { Timeline } from 'deskblocks';
const items = [
{
day: 'Today (13 Jul)',
time: '20 minutes ago',
title: 'Ticket Updated',
details: [{ label: 'Status', value: 'changed from Open to In Progress' }]
},
{
day: 'Today (13 Jul)',
time: '9:41 AM',
title: 'Comment Added',
actor: 'Lakshmi Narayanan'
},
{
day: '10 Jul',
time: '4:32 PM',
title: 'Ticket Created',
actor: 'Ananya Iyer',
details: [
{ label: 'Channel', value: 'Email' },
{ label: 'Priority', value: 'High' }
]
}
];
</script>
<Timeline {items} />.theme-{color} and .appearance-{mode} selectors./* Example: Style a div specifically for dark mode and the red theme */
:global(.theme-red.appearance-dark div) {
/* Your styles here */
}Tags component displays a wrapping group of compact, read-only labels. It accepts an array of strings; blank labels are ignored, and the row automatically wraps when space is limited. If the tags array is empty, the component renders a muted dash placeholder (—).<script>
import { Tags } from 'deskblocks';
</script>
<Tags tags={['billing', 'refund', 'priority-customer']} />inline prop to the RadioGroup component. You can further customize the horizontal spacing between items using the columnGap prop.<script>
import { Radio, RadioGroup } from 'deskblocks';
let spacecraft = 'apollo';
</script>
<RadioGroup inline bind:group={spacecraft} name="spacecraft">
<Radio value="apollo">Apollo</Radio>
<Radio value="voyager">Voyager</Radio>
<Radio value="enterprise">Enterprise</Radio>
</RadioGroup>The TimeInput component supports several states for form validation and accessibility:
required prop. Pair it with a FormLabel using the required prop for visual indication.invalid prop and provide an error message via the error-msg slot.disabled prop to prevent user interaction.readonly prop to prevent modifications.<script>
import { TimeInput, FormLabel } from 'deskblocks';
</script>
<!-- Mandatory Input -->
<div>
<FormLabel required for="inp-demo">Label</FormLabel>
<TimeInput required value="18:00" id="inp-demo" />
</div>
<!-- Invalid State with Error Message -->
<TimeInput invalid value="21:00">
<span slot="error-msg">This time is not available</span>
</TimeInput>
<!-- Disabled State -->
<TimeInput disabled value="21:00" />Text component from deskblocks is used to define typography styles for text elements, ensuring consistent and readable text throughout the interface.<script>
import { Text } from 'deskblocks';
</script>
<Text>Some text here.</Text>